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实现定时器(类似工行网银支付限时操作)的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. 【JavaScript基础】Js的定时器(你想看的原理也在哟)

    [JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...

  3. ASP.net与SQLite数据库通过js和ashx交互(连接和操作)

    ASP.net与SQLite数据库通过js和ashx交互(连接和操作): 废话(也是思路):用的是VS2010,打算做网站前后台.由于不喜欢前台语言里加些与html和css和js的其他内容,想实现前后 ...

  4. Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作 1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1. ...

  5. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  6. js倒计时函数和(js禁用和恢复a标签的操作)

    <script type="text/javascript"> /*获取手机号*/ var start_time=60; function get_phone_nums ...

  7. 前端自动化(三) 合并压缩css、压缩js、添加时间戳、打包上线操作

    前端自动化(三)   合并压缩css.压缩js.添加时间戳.打包上线操作 此文在前两篇基础上对比参考,会很方便理解 gulp.task("delete",function(){ r ...

  8. js插件---在线类似excel生成图表插件解决方案

    js插件---在线类似excel生成图表插件解决方案 一.总结 一句话总结:google比百度好用多了,多用google google js editable table jquery 双向绑定 这种 ...

  9. js延时定时器

    // 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...

随机推荐

  1. 使用Qt编写模块化插件式应用程序

    动态链接库技术使软件工程师们兽血沸腾,它使得应用系统(程序)可以以二进制模块的形式灵活地组建起来.比起源码级别的模块化,二进制级别的模块划分使得各模块更加独立,各模块可以分别编译和链接,模块的升级不会 ...

  2. 主席树套树状数组 动态区间第k小

    先打上代码以后更新解释 #include <cstdio> #include <iostream> #include <algorithm> #include &l ...

  3. [Poetize I]守卫者的挑战

    描述 Description 打开了黑魔法师Vani的大门,队员们在迷宫 般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过.“我,Nizem,是黑魔法圣殿的守卫者.如果 ...

  4. delphi 托盘程序 转

    Delphi的托盘编程   .现在很多程序都用这个,比如傲游,迅雷等,主要代码如下: uses Windows, Messages, SysUtils, Variants, Classes, Grap ...

  5. 网页a标签:导航制作 怎么让鼠标经过A标签的时候显示块状背景?

    文章出处:http://dongguan.seosrx.net/website/6.html

  6. 计算机语言的发展(the history of computer's language)

    第一部分 计算机语言的分类: 机器语言:直接用二进制代码指令表达的计算机语言,指令是用0和1组成的一串代码.例如:1011011000000000,表示加法.可以直接执行. 汇编语言:汇编指令集.伪指 ...

  7. 终于有人把O2O、C2C、B2B、B2C的区别讲透了

    一.O2O.C2C.B2B.B2C的区别在哪里? o2o 是 online to offline 分为四种运营模式 1.online to offline 是线上交易到线下消费体验 2.offline ...

  8. 两个关于XML解析报错问题小记

    Caused by: org.xml.sax.SAXParseException: The string "--" is not permitted within comments ...

  9. 学做酷炫有爱的免费网页,学习 Github Page 教你分分钟搭建自己的博客

    Github Page 网页搭建教程,教你分分钟搭建自己的博客 很多其它美丽的网页搭建教程教程.请看这里:http://www.duobei.com/course/8506331668 waterma ...

  10. [Javascript] Array methods in depth - slice

    Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a ' ...