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 获得选中文本内容的方法
Feb 15 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
把文本中的URL地址转换为可点击链接的JavaScript、PHP自定义函数
Jul 29 Javascript
js 操作符汇总
Nov 08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
解决使用layui对select append元素无效或者未及时更新的问题
Sep 18 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
Dec 22 Javascript
微信小程序文章详情功能完整实例
Jun 03 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中常用的转义函数
2014/02/28 PHP
php基于自定义函数记录log日志方法
2017/07/21 PHP
php 替换文章中的图片路径,下载图片到本地服务器的方法
2018/02/06 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
PHP中abstract(抽象)、final(最终)和static(静态)原理与用法详解
2020/06/05 PHP
JavaScript回调(callback)函数概念自我理解及示例
2013/07/04 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
网页右侧悬浮滚动在线qq客服代码示例
2014/04/28 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
理解JavaScript中Promise的使用
2016/01/18 Javascript
有关jquery与DOM节点操作方法和属性记录
2016/04/15 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
vue2.0结合Element实现select动态控制input禁用实例
2017/05/12 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
Webpack中SplitChunksPlugin 配置参数详解
2020/03/24 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
[04:22]DOTA2上海特级锦标赛主赛事第四日TOP10
2016/03/06 DOTA
Python三级目录展示的实现方法
2016/09/28 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
家长会主持词开场白
2014/03/18 职场文书
校企合作协议书
2014/04/16 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
员工旷工检讨书
2015/08/15 职场文书
学习经验交流会策划书
2015/11/02 职场文书
企业团队精神心得体会
2016/01/19 职场文书
Python基本数据类型之字符串str
2021/07/21 Python
Redis实现短信验证码登录的示例代码
2022/06/14 Redis