jquery输入数字随机抽奖特效的简单实现代码


Posted in Javascript onJune 10, 2016

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

效果图如下:

jquery输入数字随机抽奖特效的简单实现代码

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>jQuery自定义数值抽奖活动代码 - 三水点靠木</title><base target="_blank" />

 <script type="text/javascript" src="http://down.yulu.3water.com/jquery/jquery-1.12.4.min.js"></script>
 <script type="text/javascript" src="http://yulu.3water.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://yulu.3water.com">三水点靠木</a>
<a href="http://yulu.3water.com/texiao/">特效库</a>
<a href="http://yulu.3water.com/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.3water.com/h/bjaf/3siyd3x7.htm
  {
   return; 
  }

  if (range == 0)
  {
   return;
  }

  if (isNaN(range))//http://yulu.3water.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://yulu.3water.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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码
Jun 04 Javascript
js浮动图片的动态效果
Jul 10 Javascript
javascript 实现 原路返回
Jan 21 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
js 监控iframe URL的变化实例代码
Jul 12 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
一次微信小程序内地图的使用实战记录
Sep 09 Javascript
jQuery学习心得总结(必看篇)
Jun 10 #Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 #Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 #Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 #Javascript
关于网页中的无缝滚动的js代码
Jun 09 #Javascript
Document.body.scrollTop的值总为零的快速解决办法
Jun 09 #Javascript
JavaScript事件学习小结(三)js事件对象
Jun 09 #Javascript
You might like
php生成EXCEL的东东
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
PHP实现的多彩标签效果代码分享
2014/08/21 PHP
解决phpcms更换javascript的幻灯片代码调用图片问题
2014/12/26 PHP
jquery创建div 实现代码
2009/04/27 Javascript
jquery 事件执行检测代码
2009/12/09 Javascript
总结Javascript中的隐式类型转换
2016/08/24 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
Python中操作MySQL入门实例
2015/02/08 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python按键按住不放持续响应的实例代码
2019/07/17 Python
Python FFT合成波形的实例
2019/12/04 Python
HTML5自定义data-* data(obj)属性和jquery的data()方法的使用
2012/12/13 HTML / CSS
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
师生聚会感言
2014/01/26 职场文书
校园文化建设方案
2014/02/03 职场文书
国家机关领导干部民主生活会对照检查材料思想汇报
2014/09/17 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
廉政承诺书
2015/01/19 职场文书
音乐课外活动总结
2015/05/09 职场文书
python如何做代码性能分析
2021/04/26 Python