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 相关文章推荐
JQuery 常用方法基础教程
Feb 06 Javascript
转换字符串为json对象的方法详解
Nov 29 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
很实用的js选项卡切换效果
Aug 12 Javascript
jQuery 局部div刷新和全局刷新方法总结
Oct 05 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
Jul 31 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
JavaScript禁止右击保存图片,禁止拖拽图片的实现代码
Apr 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
建立文件交换功能的脚本(二)
2006/10/09 PHP
发一个php简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php下使用iconv需要注意的问题
2010/11/20 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
PHP随机生成中文段落示例【测试网站内容时使用】
2020/04/26 PHP
js 居中漂浮广告
2010/03/21 Javascript
jqeury-easyui-layout问题解决方法
2014/03/24 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
js简易版购物车功能
2017/06/17 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
JavaScript中常见内置函数用法示例
2018/05/14 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
python改变日志(logging)存放位置的示例
2014/03/27 Python
python多线程用法实例详解
2015/01/15 Python
详解Python爬虫的基本写法
2016/01/08 Python
python3.4爬虫demo
2019/01/22 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python生成任意频率正弦波方式
2020/02/25 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python 下载文件的多种方法汇总
2020/11/17 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
试解释COMMIT操作和ROLLBACK操作的语义
2014/07/25 面试题
高中生的自我评价
2014/03/04 职场文书
2014年班主任自我评价范文
2014/04/23 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
python实现监听键盘
2021/04/26 Python
golang json数组拼接的实例
2021/04/28 Golang
JavaScript使用canvas绘制坐标和线
2021/04/28 Javascript
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers