JS实现定时器(类似工行网银支付限时操作)
js脚本内容:
//5秒倒计时
var num = 0 ;
var max = 5 ;
var id = null ;
id = setInterval(box , 1000) ; //1秒钟调用一次
function box(){
document.getElementById("a").innerHTML = (parseInt(max)-1) ;
max-- ;
if(max==num){
clearInterval(id) ;
alert("时间到!您无法操作") ;
}
}
html页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> Liaokailin </TITLE>
<script src="demo.js"></script>
</HEAD> <BODY>
您还剩下 <font color = "red" ><span id="a"></span></font> 秒
</BODY>
</HTML>
但是上面那种js用的是setInterval()这个方法,消除的时候需要按照id来消除,可能会存在一些同步的问题,从而采用setTimeout()这个函数,其代码如下:
//5秒倒计时
var num = 0 ;
var max = 5 ;
var id = null ;
id = setTimeout(box , 1000) ; //1秒钟调用一次
function box(){
document.getElementById("a").innerHTML = (parseInt(max)-1) ;
max-- ;
if(max==num){
clearInterval(id) ;
alert("时间到!您无法操作") ;
}else{
setTimeout(box,1000) ;
}
}
JS实现定时器(类似工行网银支付限时操作)的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 【JavaScript基础】Js的定时器(你想看的原理也在哟)
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- ASP.net与SQLite数据库通过js和ashx交互(连接和操作)
ASP.net与SQLite数据库通过js和ashx交互(连接和操作): 废话(也是思路):用的是VS2010,打算做网站前后台.由于不喜欢前台语言里加些与html和css和js的其他内容,想实现前后 ...
- Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作
Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...
- js/jQuery实现类似百度搜索功能
一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...
- js倒计时函数和(js禁用和恢复a标签的操作)
<script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...
- 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作
前端自动化(三) 合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...
- js插件---在线类似excel生成图表插件解决方案
js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...
- js延时定时器
// 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...
随机推荐
- org/springframework/core/MethodClassKey
解决下面报错的办法: 把pom.xml中下面两个dependency的version去掉. <dependency> <groupId>org.springframework& ...
- Codeforces Round #312 (Div. 2) C.Amr and Chemistry
Amr loves Chemistry, and specially doing experiments. He is preparing for a new interesting experime ...
- pdf打印乱码问题
问题: 使用Adobe Reader将一份pdf文件通过我的虚拟打印机输出后(输出的是中间文件,等同于EMF文件),查看的时候发现有时候是乱码.最简单的必现步骤: 1.使用Adobe Reader打开 ...
- M - Escape - HDU 3605 - (缩点+最大流SAP)
题目大意:2012世界末日来了,科学家发现了一些星球可以转移人口,不过有的人可以在一些星球上生存有的人不行,而且每个星球都有一定的承载量,现在想知道是否所有的人都可以安全转移呢? 输入:首先输入一个N ...
- Jenkins,Maven及TestNG在自动化测试的应用(转)
转自:http://qa.blog.163.com/blog/static/190147002201581634549893/ 希望实现的场景:Jenkins中的Job可针对不同浏览器,不同环境,运行 ...
- Java并发编程:并发容器ConcurrentHashMap
Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concu ...
- Android SwitchButton(滑动开关)
@RemoteView public class Button extends TextView { public Button(Context context) { this(context, nu ...
- 05-图2. Saving James Bond - Easy Version (25)
1 边界和湖心小岛分别算一个节点.连接全部距离小于D的鳄鱼.时间复杂度O(N2) 2 推断每一个连通图的节点中是否包括边界和湖心小岛,是则Yes否则No 3 冗长混乱的函数參数 #include &l ...
- 在Mac中安装.Net Core的开发环境
在mac中部署dotnet core开发环境,我的MacOS版本号为OSX EI Capitan 10.11.6 1.安装brew homebrew官网推荐的安装命令如下: /usr/bin/ruby ...
- 简单dp ---HDU3485 Count 101
题目大意:让求长度为n的0 和 1 构成的串中不包含101子串的个数有多少. 这个题当时想了好久,以为是一个规律题,一直在推规律,最后还是wa了,上网一看原来是dp问题, 不过确实递推式挺巧妙的. 递 ...