jQuery自定义数值抽奖活动代码
本文实例为大家分享了jquery输入数字随机抽奖特效代码，供大家参考，具体内容如下
代码如下：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>jQuery自定义数值抽奖活动代码-何问起</title><basetarget="_blank"/>
<scripttype="text/javascript"src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script>
<scripttype="text/javascript"src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script>
<styletype="text/css">
#bigDiv{
width:1080px;
margin:0pxauto;/*div网页居中*/
background-color:#494949;
color:#FFFFFF;
}
h1{
text-align:center;/*文本居中*/
padding-top:10px;
}
#first,#second,#third{
width:360px;
height:360px;
font-size:150px;
line-height:360px;
text-align:center;
float:left;/*让三个盒子左浮动*/
}
#first{
background-color:#009BFF;
opacity:0.9;
}
#second{
background-color:#007CCC;
}
#third{
background-color:#005388;
}
input{
font-size:30px;
font-weight:900;
}
#start{
margin-left:40%;
margin-right:5%;
}a{color:blue;}
</style>
</head>
<body>
<divid="bigDiv">
<h1>玩家幸运抽奖活动</h1>
<divid="first"></div>
<divid="second"></div>
<divid="third"></div>
<inputtype="button"value="开始"id="start">
<inputtype="button"value="停止"id="stop"disabled="disabled">
</div>
<divstyle="text-align:center;margin:50px0;font:normal14px/24px'MicroSoftYaHei';">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<ahref="http://hovertree.com">何问起</a>
<ahref="http://hovertree.com/texiao/">特效库</a>
<ahref="http://hovertree.com/h/bjaf/07a7l2on.htm">代码说明</a></p>
</div>
</body>
</html>
js文件代码如下：
/**
*Createdby何问起午后的阳光on2016/5/14.
*/
varran=0;
varrange=0;
varmyNumber;
/*将产生随机数的方法进行封装*/
functionsjs(range){
ran=Math.random()*range;//[0,range)的随机数
varresult=parseInt(ran);//将数字转换成整数
returnresult;
}
/*对显示随机数的方法进行封装*/
functionshowRandomNum(){
varfigure=sjs(range);
$("#first").html(figure);
varfigure2=sjs(range);
$("#second").html(figure2);
varfigure3=sjs(range);
$("#third").html(figure3);
}
$(function(){
/*点击开始按钮,产生的事件*/
$("#start").click(function(){
range=prompt("请输入随机数范围：","168");
if(range==null)//http://hovertree.com/h/bjaf/3siyd3x7.htm
{
return;
}
if(range==0)
{
return;
}
if(isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm
{
alert("请输入数字");
return;
}
/*将开始标签禁用，停止标签启用*/
$("#start")[0].disabled=true;
$("#stop")[0].disabled=false;
if(range>9999||range<-999)
{
//by何问起
$("#bigDivdiv").css("font-size","60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm
//return;
}
myNumber=setInterval(showRandomNum,50);//多长时间运行一次，单位毫秒
});
/*点击结束按钮*/
$("#stop").click(function(){
/*将开始标签启用，停止标签禁用*/
$("#start")[0].disabled=false;
$("#stop")[0].disabled=true;
clearInterval(myNumber);
});
});
以上就是，希望对大家学习jquery程序设计有所帮助。