js实现n秒倒计时后才可以点击的效果


Posted in Javascript onDecember 20, 2015

在我们进行注册用户时经常遇到点击按钮后,60秒倒计时后才能继续可以点击,按钮上还能显示倒计时,这60秒时间就是为大家提供”细阅读协议“做准备的,这种功能是如何实现的,下面为大家分享详细代码。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>倒计时然后才可以点击效果代码</title> 
<script type="text/javascript">
var s=4;
function countsub()
{
 var btnReg=document.getElementById("btnReg");
 if(btnReg)
 {
 if(s<=0)
 {
  btnReg.value="同意";
  btnReg.disabled=false;
  clearInterval(id);
 }
 else
 {
  btnReg.value="请仔细阅读协议(还剩"+s+"秒)";
  s--;
 }
 }
}
var id = setInterval('countsub()',1000)
</script>
</head>
<body>
<textarea>注册协议</textarea>
<input id="btnReg" type="button" value="同意" disabled="true" />
</body>
</html>

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
Sep 12 Javascript
网页中JS函数自动执行常用三种方法
Mar 30 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
关于自定义Egg.js的请求级别日志详解
Dec 12 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
图解js图片轮播效果
Dec 20 #Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 #Javascript
基于jquery实现页面滚动到底自动加载数据的功能
Dec 19 #Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 #Javascript
js获取本机操作系统类型的两种方法
Dec 19 #Javascript
javascript精确统计网站访问量实例代码
Dec 19 #Javascript
js实现图片轮播效果
Dec 19 #Javascript
You might like
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP中usort在值相同时改变原始位置问题的解决方法
2011/11/27 PHP
使用XHGui来测试PHP性能的教程
2015/07/03 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
分享20款好玩的jQuery游戏
2011/04/17 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
2011/05/02 Javascript
Web开发之JavaScript
2012/03/29 Javascript
seaJs的模块定义和模块加载浅析
2014/06/06 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
JS实现打砖块游戏
2020/02/14 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
[45:38]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第一局
2016/03/02 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
python实现自动登录人人网并采集信息的方法
2015/06/28 Python
Python3使用requests包抓取并保存网页源码的方法
2016/03/15 Python
Python yield 使用方法浅析
2017/05/20 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python基于pycrypto实现的AES加密和解密算法示例
2018/04/10 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python对文件的操作方法汇总
2020/02/28 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
HTML5 LocalStorage 本地存储详细概括(多图)
2017/08/18 HTML / CSS
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
大专自我鉴定范文
2013/10/23 职场文书
统计员岗位职责
2013/11/14 职场文书
面试后的英文感谢信
2014/02/01 职场文书
实验心得体会
2014/09/05 职场文书
2015年员工试用期工作总结
2015/05/28 职场文书
教师节晚会主持词
2015/06/30 职场文书
《给予树》教学反思
2016/03/03 职场文书