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程序设计有所帮助。