jQuery自定义数值抽奖活动代码

2019-11-20 09:44:24

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jquery输入数字随机抽奖特效代码，供大家参考，具体内容如下

代码如下：

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery自定义数值抽奖活动代码 - 何问起</title><base target="_blank" /> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script> <style type="text/css">  #bigDiv {   width: 1080px;   margin: 0px auto; /*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> <div id="bigDiv">  <h1>玩家幸运抽奖活动</h1>  <div id="first"></div>  <div id="second"></div>  <div id="third"></div>  <input type="button" value="开始" id="start">  <input type="button" value="停止" id="stop" disabled="disabled"> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">  <p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>  <p>来源： <a href="http://hovertree.com">何问起</a><a href="http://hovertree.com/texiao/">特效库</a><a href="http://hovertree.com/h/bjaf/07a7l2on.htm">代码说明</a></p> </div></body></html>

js文件代码如下：

/** * Created by 何问起 午后的阳光 on 2016/5/14. */var ran = 0;var range = 0;var myNumber;/*将产生随机数的方法进行封装*/function sjs(range) { ran = Math.random() * range;//[0,range)的随机数 var result = parseInt(ran);//将数字转换成整数 return result;}/*对显示随机数的方法进行封装*/function showRandomNum() { var figure = sjs(range); $("#first").html(figure); var figure2 = sjs(range); $("#second").html(figure2); var figure3 = 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 何问起   $("#bigDiv div").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程序设计有所帮助。

上一篇：JavaScript地理位置信息API

下一篇：浅谈JavaScript的全局变量与局部变量