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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jquery实现简单实用的打分程序实例
Jul 23 Javascript
浅析Bootstrap缩略图组件与警示框组件
Apr 29 Javascript
深入理解JavaScript单体内置对象
Jun 06 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
Feb 28 Javascript
js 客户端打印html 并且去掉页眉、页脚的实例
Nov 03 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
ant design vue导航菜单与路由配置操作
Oct 28 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中使用灵巧的体系结构
2006/10/09 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
js函数调用常用方法详解
2012/12/03 Javascript
JavaScript子窗口ModalDialog中操作父窗口对像
2012/12/11 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
2015/08/13 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
深入理解Vue nextTick 机制
2018/04/28 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
Java分治归并排序算法实例详解
2017/12/12 Python
Python2.7+pytesser实现简单验证码的识别方法
2017/12/29 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
Python列表的切片实例讲解
2019/08/20 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
公司担保书范文
2014/05/21 职场文书
2014旅游局党组书记党建工作汇报材料
2014/11/02 职场文书
2015年重阳节活动总结
2015/03/24 职场文书
校园安全教育心得体会
2016/01/15 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python