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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
js兼容标准的表格变色效果
Jun 28 Javascript
js Date概念详细介绍
Nov 22 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
Mar 14 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
详解Vue单元测试case写法
May 24 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
微信小程序仿抖音短视频切换效果的实例代码
Jun 24 Javascript
JS sort方法基于数组对象属性值排序
Jul 10 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
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
Java中final关键字详解
2015/08/10 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
javascript中定义私有方法说明(private method)
2014/01/27 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
BootStrap tooltip提示框使用小结
2016/10/26 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
[01:10:57]Liquid vs OG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python splitlines使用技巧
2008/09/06 Python
python继承和抽象类的实现方法
2015/01/14 Python
在Python3中使用asyncio库进行快速数据抓取的教程
2015/04/02 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
使用Python3制作TCP端口扫描器
2017/04/17 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python爬虫项目设置一个中断重连的程序的实现
2019/07/26 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
机械专业应届生求职信
2013/09/21 职场文书
财务经理岗位职责
2013/11/09 职场文书
大学毕业生推荐信
2014/07/09 职场文书
十佳青年事迹材料
2014/08/21 职场文书
调研座谈会发言材料
2014/08/23 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
2014幼儿园教师个人工作总结
2014/11/08 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers