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


Posted in Javascript onJune 11, 2016

本文实例为大家分享了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 相关文章推荐
给网站上的广告“加速”显示的方法
Apr 08 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
jQuery使用getJSON方法获取json数据完整示例
Sep 13 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
JSON与JS对象的区别与对比
Mar 01 Javascript
jQuery使用正则验证15/18身份证的方法示例
Apr 27 jQuery
微信小程序全局变量GLOBALDATA的定义和调用过程解析
Sep 23 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 #Javascript
javaScript知识点总结(必看篇)
Jun 10 #Javascript
浅谈javascript基础之客户端事件驱动
Jun 10 #Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 #Javascript
jQuery学习心得总结(必看篇)
Jun 10 #Javascript
You might like
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
ThinkPHP5框架中使用JWT的方法示例
2020/06/03 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js的hasownproperty使用示例
2014/03/02 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
jQuery实现表单动态添加与删除数据操作示例
2018/07/03 jQuery
javascript防抖函数debounce详解
2019/06/11 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python连接oracle数据库实例
2014/10/17 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python聊天室程序(基础版)
2018/04/01 Python
python和shell监控linux服务器的详细代码
2018/06/22 Python
解决Tensorboard 不显示计算图graph的问题
2020/02/15 Python
python中线程和进程有何区别
2020/06/17 Python
HTML5实现晶莹剔透的雨滴特效
2014/05/14 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
CK美国官网:Calvin Klein
2016/08/26 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
万代美国官网:PREMIUM BANDAI USA
2020/09/11 全球购物
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
什么叫应用程序域?什么是受管制的代码?什么是强类型系统?什么是装箱和拆箱?
2016/08/13 面试题
物流仓管员工作职责
2014/01/06 职场文书
医院实习介绍信
2014/01/12 职场文书
母亲节演讲稿
2014/05/27 职场文书
合同意向书范本
2014/07/30 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
行政申诉状范文
2015/05/20 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python