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. Asp.net中request.QueryString与request.Params的区别 【转】

    Request.Form:获取以POST方式提交的数据(接收Form提交来的数据): Request.QueryString:获取地址栏参数(以GET方式提交的数据) Request:包含以上两种方式 ...

  2. FLASK初步实践

    感觉经过DJANGO,CI,RAILS之类的WEB框架之后,FLASK的思路就比较顺畅了... FLASKR.PY import sqlite3 from flask import Flask, re ...

  3. WPF利用动画实现圆形进度条

    原文:WPF利用动画实现圆形进度条 这是我的第一篇随笔,最近因为工作需要,开始学习WPF相关技术,自己想实现以下圆形进度条的效果,逛了园子发现基本都是很久以前的文章,实现方式一般都是GDI实现的,想到 ...

  4. COJN 0484 800502电池的寿命

    800502电池的寿命 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 小S新买了一个掌上游戏机,这个游戏机由两节5号电池供电. ...

  5. BZOJ 1010 [HNOI2008]玩具装箱toy

    1010: [HNOI2008]玩具装箱toy Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 7184  Solved: 2724[Submit][St ...

  6. 【转】（DT系列二）device tree的书写规范

    原文网址:http://www.cnblogs.com/biglucky/p/4057478.html devicetree的书写规范 下面从节点,属性,reg,ranges,中断控制器等几个方面叙述 ...

  7. HDOJ(HDU) 2097 Sky数(进制)

    Problem Description Sky从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会,他发现了一个有趣的四位数2992,这个数,它的十进制数表示,其四位数字之和为2+9+9+2=2 ...

  8. Perl时间处理函数

    官方网址:http://search.cpan.org/~stbey/Date-Calc-6.3/lib/Date/Calc.pod#___top use Date::Calc qw( Days_in ...

  9. Android学习之电话拨号器

    本人自己是做android驱动的,也会接触到系统层.上层的应用,所以在闲暇的时候也就开始了学习android应用的路程,在这里把这些东西记下来,希望自己能坚持下去,也好以后复习用. 今天先实现一个简单 ...

  10. Underscore.js 常用类型判断以及一些有用的工具方法

    1. 常用类型判断以及一些有用的工具方法 underscore.js 中一些 JavaScript 常用类型检查方法,以及一些工具类的判断方法. 首先我们先来谈一谈数组类型的判断.先贴出我自己封装好的 ...