jquery输入数字随机抽奖特效的简单实现代码
来源: 阅读:1545 次 日期:2016-06-20 14:49:05
温馨提示: 小编为您整理了“jquery输入数字随机抽奖特效的简单实现代码”,方便广大网友查阅!

下面小编就为大家带来一篇老生常谈JavaScript数组的用法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。

简介:jQuery自定义数值抽奖活动代码是一款点击开始按钮计算机会产生玩家输入范围内的随机数,点击停止按钮,将显示数字最终结果的效果。

效果图如下:

名单

代码如下:

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <title>jQuery自定义数值抽奖活动代码 - 脚本之家</title><base target="_blank" />

 <script type="text/javascript" src="http://down.yulu.jb51.net/jquery/jquery-1.12.4.min.js"></script>

 <script type="text/javascript" src="http://yulu.jb51.net/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://yulu.jb51.net">脚本之家</a>

<a href="http://yulu.jb51.net/texiao/">特效库</a>

<a href="http://yulu.jb51.net/h/bjaf/07a7l2on.htm">代码说明</a></p>

 </div>

</body>

</html>

js文件代码如下:

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://yulu.jb51.net/h/bjaf/3siyd3x7.htm

  {

   return; 

  }

  if (range == 0)

  {

   return;

  }

  if (isNaN(range))//http://yulu.jb51.net/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://yulu.jb51.net/h/bjaf/omgdn4mu.htm

   //return;

  }

  myNumber = setInterval(showRandomNum, 50);//多长时间运行一次,单位毫秒

 });

 /*点击结束按钮*/

 $("#stop").click(function () {

  /*将开始标签启用,停止标签禁用*/

  $("#start")[0].disabled = false;

  $("#stop")[0].disabled = true;

  clearInterval(myNumber);

 });

});

以上这篇jquery输入数字随机抽奖特效的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map