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插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jquery+php随机生成红包金额数量代码分享
Aug 27 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
关于vue.js中实现方法内某些代码延时执行
Nov 14 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
基于Vue的侧边目录组件的实现
Feb 05 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
drupal 代码实现URL重写
2011/05/04 PHP
PHP pathinfo()获得文件的路径、名称等信息说明
2011/09/13 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
对联广告js flash激活
2006/10/19 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
一些技巧性实用js代码小结
2009/10/14 Javascript
javascript之通用简单的table选项卡实现(二)
2010/05/09 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
jquery下将选择的checkbox的id组成字符串的方法
2010/11/28 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
js实现点小图看大图效果的思路及示例代码
2013/10/28 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
dul无法加载bootstrap实现unload table/user恢复
2016/09/29 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
vue-router重定向和路由别名的使用讲解
2019/01/19 Javascript
原来JS还可以这样拆箱转换详解
2019/02/01 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python反编译学习之字节码详解
2019/05/19 Python
python 字符串追加实例
2019/07/20 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
手把手教你如何用Pycharm2020.1.1配置远程连接的详细步骤
2020/08/07 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
市场营销专业个人求职信范文
2013/12/14 职场文书
心理健康教育心得体会
2013/12/29 职场文书
自动一体化专业求职信
2014/03/15 职场文书
大学专科自荐信
2014/06/17 职场文书
计算机实训报告总结
2014/11/05 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015年读书月活动总结
2015/03/26 职场文书