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 相关文章推荐
Script的加载方法小结
Jan 12 Javascript
时间戳转换为时间 年月日时间的JS函数
Aug 19 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
三种检测iPhone/iPad设备方向的方法
Apr 23 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
小程序实现分类页
Jul 12 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 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
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
php无限极分类实现方法分析
2019/07/04 PHP
PHP单文件上传原理及上传函数的封装操作示例
2019/09/02 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
解决laravel上传图片之后,目录有图片,但是访问不到(404)的问题
2019/10/14 PHP
CSS和Javascript简单复习资料
2010/06/29 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
js 取时间差去掉周六周日实现代码
2012/12/25 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
js实现带圆角的两级导航菜单效果代码
2015/08/24 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
JavaScript引用类型Date常见用法实例分析
2018/08/08 Javascript
Python+OpenCV人脸检测原理及示例详解
2020/10/19 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
python学生管理系统
2019/01/30 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
python使用minimax算法实现五子棋
2019/07/29 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
蛋白质世界:Protein World
2017/11/23 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
师德师风演讲稿
2014/05/05 职场文书
总经理岗位职责说明书
2014/07/30 职场文书
运动会演讲稿200字
2014/08/25 职场文书
行风评议整改报告
2014/11/06 职场文书
2015年安全工作总结范文
2015/04/02 职场文书
卡特教练观后感
2015/06/08 职场文书
2015年学校远程教育工作总结
2015/07/20 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书