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 相关文章推荐
js获取提交的字符串的字节数
Feb 09 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
js仿微博实现统计字符和本地存储功能
Dec 22 Javascript
JS图片放大效果简单实现代码
Sep 08 Javascript
JavaScript实现DOM对象选择器
Sep 24 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
javascript观察者模式实现自动刷新效果
Sep 05 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
Nov 20 Javascript
node koa2 ssr项目搭建的方法步骤
Dec 11 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函数)
2006/10/09 PHP
PHP类的使用 实例代码讲解
2009/12/28 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
2011/08/02 Javascript
js截取字符串的两种方法及区别详解
2013/11/05 Javascript
对于Form表单reset方法的新认识
2014/03/05 Javascript
jquery中取消和绑定hover事件的实现代码
2016/06/02 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
2016/09/30 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
使用JSON格式提交数据到服务端的实例代码
2018/04/01 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
Python实现的计算器功能示例
2018/04/26 Python
python 多线程中子线程和主线程相互通信方法
2018/11/09 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
利用python开发app实战的方法
2019/07/09 Python
解决pytorch GPU 计算过程中出现内存耗尽的问题
2019/08/19 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
pandas-resample按时间聚合实例
2019/12/27 Python
Selenium向iframe富文本框输入内容过程图解
2020/04/10 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
化学教师自荐信范文
2013/12/28 职场文书
中秋节超市促销方案
2014/01/30 职场文书
个人培训自我鉴定
2014/03/28 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
红头文件任命书范本
2014/06/05 职场文书
初中成绩单评语
2014/12/29 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
评测 | 大屏显示带收音机的高端音箱,JBL TUNE2便携式插卡音箱实测
2021/04/24 无线电
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫