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 相关文章推荐
Maps Javascript
Jan 22 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
用jquery仿做发微博功能示例
Apr 18 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
php 日期时间处理函数小结
2009/12/18 PHP
php ios推送(代码)
2013/07/01 PHP
php可扩展的验证类实例(可对邮件、手机号、URL等验证)
2015/07/09 PHP
php中输出json对象的值(实现方法)
2018/03/07 PHP
PHP实现给定一列字符,生成指定长度的所有可能组合示例
2019/06/22 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
JS前端框架关于重构的失败经验分享
2013/03/17 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
原生js实现addclass,removeclass,toggleclasss实例
2016/11/24 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
layui使用及简单的三级联动实现教程
2020/12/01 Javascript
[04:04]显微镜下的DOTA2第六期——电影级别的华丽团战
2014/06/20 DOTA
六个窍门助你提高Python运行效率
2015/06/09 Python
Python 中的with关键字使用详解
2016/09/11 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
tensorflow更改变量的值实例
2018/07/30 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
python中for in的用法详解
2020/04/17 Python
基于Python的接口自动化unittest测试框架和ddt数据驱动详解
2021/01/27 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
德国购买健身器材:AsVIVA
2017/08/09 全球购物
英国办公家具网站:Furniture At Work
2019/10/07 全球购物
教师见习期自我鉴定
2014/04/28 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
人与自然观后感
2015/06/16 职场文书
如何判断微信付款码和支付宝付款码
2021/04/01 PHP
Python 中random 库的详细使用
2021/06/03 Python