JS实现定时器(类似工行网银支付限时操作)

时间:2022-09-07 00:14:12
 

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&period;net与SQLite数据库通过js和ashx交互(连接和操作)

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

  4. Bootstrap&plus;Knockout&period;JS&plus;ASP&period;Net MVC3&plus;PetaPOCO实现CRUD操作

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

  5. js&sol;jQuery实现类似百度搜索功能

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

  6. js倒计时函数和&lpar;js禁用和恢复a标签的操作&rpar;

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

  7. 前端自动化&lpar;三&rpar; 合并压缩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. 检测到有潜在危险的 Request&period;Form 值

    这种问题是因为你提交的Form中有HTML字符串,例如你在TextBox中输入了html标签,或者在页面中使用了HtmlEditor组件等,解决办法是禁用validateRequest. 如果你是.n ...

  2. shell随机输出一人的学号与姓名

    如果要多输出,可以分成*组,然后从每组中输出一个(这里是分为3组)

  3. x01&period;os&period;10&colon; 输入输出

    从 x01.Lab.Download 中下载源代码,进入工程目录,make 后再 bochs,即可见到如下界面: 随便打几个字,ok!按 F2,可切换到第二个终端,界面如下: 当然,按 F3 还可切换 ...

  4. loadrunner java 缺少必要的导入包报错

    loadrunner 运行从eclipse中做好的脚本,ctrl + A 复制到loadrunner中来, 添加参数化的的语句:verifyCode =    lr.eval_string (&quo ...

  5. Unity C&num; const与static readonly的区别与联系

    using System; namespace Test { class MainClass { //懒人写法的单例 class Weapon { public static readonly Wea ...

  6. 关于无法全然下载CyanogenMod代码的问题

    CyanogenMod真的是一个奇妙的东东,它让开发手机固件不再是手机生产商的专利,每一个有志于此的程序猿都可能为自己的手机定制一份专有的,独一无二的固件,这在曾经是想都不敢想的. 而且Cyanoge ...

  7. C语言作业评价标准

    C语言作业评价标准 作业内容: 每周作业分为基础作业.挑战作业和预习作业: 基础作业为本周所学内容的巩固: 挑战作业包括但不仅限于所学知识的综合运用: 预习作业为下周所学内容的任务单,要求必须在课前完 ...

  8. Three&period;js里自定义顶点构建三角形面的朝向问题

    如上图所示,一个矩形可以由两个三角形组成 2 1 0 为朝向摄像机的方向显示 1 2 3 为朝向摄像机的方向显示

  9. freemark简单事例

    工作准备:开发环境myeclipse freemarker.jar(需要下载) 首先引入freemarker.jar包.然后,,,,直接贴代码: 1.创建一个FreemarkerUtil类: pack ...

  10. ArcGIS教程:曲率

    摘要 计算栅格表面的曲率,包括剖面曲率和平面曲率. 用法 · 主要输出结果为每个像元的表面曲率,该值通过将该像元与八个相邻像元拟合而得.曲率是表面的二阶导数,或者可称之为坡度的坡度.可供选择的输出曲率 ...