JavaScript-定时器0~9抽奖系统详解(代码)


Posted in Javascript onAugust 16, 2017

具体代码如下:

<html> 
 <head> 
  <title>定时器0~9抽奖系统</title> 
  <meta charset="UTF-8" /> 
  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 
  <script type="text/javascript"> 
   $(function(){ 
    $("#start").click(function(){ 
     fn(); 
     timer = setInterval('fn()',200);//向DIV中填充内容 
    }); 
    $("#stop").click(function(){ 
     clearInterval(timer);//清除定时器 
    }); 
   }); 
   var i=0; 
   function fn(){ 
    $("#box").html(i); 
    i++; 
    if(i==10){ 
     i=0; 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <div> 
   <button id="start" type="button">开始</button> 
   <button id="stop" type="button">停止</button> 
  </div> 
  <br /> 
  <div id="box" style="width:200px;height:100px;border:1px solid;line-height:100px;font-size:80px;text-align:center;"></div> 
 </body> 
</html>

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
jquery实现心算练习代码
Dec 06 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
Aug 27 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
JavaScript数据结构之二叉树的删除算法示例
Apr 13 Javascript
AngularJS中下拉框的高级用法示例
Oct 11 Javascript
在vue中使用公共过滤器filter的方法
Jun 26 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
Jul 25 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
Vue 构造选项 - 进阶使用说明
Aug 14 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue实现留言板todolist功能
Aug 16 #Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 #Javascript
vue的事件绑定与方法详解
Aug 16 #Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 #Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 #Javascript
在一般处理程序(ashx)中弹出js提示语
Aug 16 #Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 #jQuery
You might like
PHP 的 __FILE__ 常量
2007/01/15 PHP
浅析PHP递归函数返回值使用方法
2013/02/18 PHP
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
php开发工具有哪五款
2015/11/09 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
javascript提取URL的搜索字符串中的参数(自定义函数实现)
2013/01/22 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
Jquery获取元素的父容器对象示例代码
2014/02/10 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
浅谈angularJS 作用域
2015/07/05 Javascript
javascript动画算法实例分析
2015/07/31 Javascript
javascript实现五星评价代码(源码下载)
2015/08/11 Javascript
XML文件转化成NSData对象的方法
2015/08/12 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
js获取form表单所有数据的简单方法
2016/08/18 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
js 数字、字符串、布尔值的转换方法(必看)
2017/04/07 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
深入浅析ES6 Class 中的 super 关键字
2017/10/20 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
[01:38]2018DOTA2亚洲邀请赛主赛事第二日现场采访 神秘商人痛陈生计不易
2018/04/05 DOTA
[40:05]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python+mysql实现教务管理系统
2019/02/20 Python
Python中的支持向量机SVM的使用(附实例代码)
2019/06/26 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
django中间键重定向实例方法
2019/11/10 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
酒店个人培训自我鉴定
2013/12/11 职场文书
宾馆仓管员岗位职责
2014/07/27 职场文书
暖春观后感
2015/06/08 职场文书