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 相关文章推荐
js 字符串操作函数
Jul 25 Javascript
JS 实现双色表格实现代码
Nov 24 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
jquery如何扑捉回车键触发的事件
Apr 24 Javascript
学习jQuey中的return false
Dec 18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
ionic实现滑动的三种方式
Aug 27 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP实现利用MySQL保存session的方法
2014/08/23 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php实现微信公众号无限群发
2015/10/11 PHP
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JavaScript 程序编码规范
2010/11/23 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
javascript获取网页各种高宽及位置的方法总结
2016/07/27 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
Vue声明式渲染详解
2017/05/17 Javascript
tangram.js库实现js类的方式实例分析
2018/01/06 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
react的hooks的用法详解
2020/10/12 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[02:57]2014DOTA2国际邀请赛-观众采访
2014/07/19 DOTA
浅析python递归函数和河内塔问题
2017/04/18 Python
python实现自动登录
2018/09/17 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python如何绘制日历图和热力图
2020/08/07 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
Europcar比利时:租车
2019/08/26 全球购物
WatchShop法国:英国排名第一的独立手表零售商
2020/02/17 全球购物
总经理助理工作职责
2014/02/06 职场文书
个人对照检查材料
2014/02/12 职场文书
2014年大学生党课心得体会范文
2014/03/29 职场文书
56句经典英文座右铭
2019/08/09 职场文书