编程 Javascript

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程序设计有所帮助。

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

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

VBScript版代码高亮

Jun 26 Javascript

使用onbeforeunload属性后的副作用

Mar 08 Javascript

在线编辑器的实现原理(兼容IE和FireFox)

Mar 09 Javascript

jquery表单验证使用插件formValidator

Nov 10 Javascript

js判断文本框输入的内容是否为数字

Dec 23 Javascript

JavaScript实现页面跳转的方式汇总

May 16 Javascript

jQuery验证插件validate使用方法详解

Sep 13 Javascript

JavaScript与ActionScript3两者的同性与差异性

Sep 22 Javascript

关于json字符串与实体之间的严格验证代码

Nov 10 Javascript

vue构建单页面应用实战

Apr 10 Javascript

关于js对textarea换行符的处理方法浅析

Aug 03 Javascript

Vue 自适应高度表格的实现方法

May 13 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下对字符串的递增运算代码

2010/08/21 PHP

thinkphp如何获取客户端IP

2015/11/03 PHP

php微信公众号开发之欢迎老朋友

2018/10/20 PHP

jquery 模式对话框终极版实现代码

2009/09/28 Javascript

火狐4、谷歌12不支持Jquery Validator的解决方法分享

2011/06/20 Javascript

jQuery弹出层始终垂直居中相对于屏幕或当前窗口

2013/04/01 Javascript

jquery获得同源iframe内body下标签的值的方法

2014/09/25 Javascript

js中数组排序sort方法的原理分析

2014/11/20 Javascript

JavaScript实现点击文字切换登录窗口的方法

2015/05/11 Javascript

javascript实现输出指定行数正方形图案的方法

2015/08/03 Javascript

JS实现的5级联动Select下拉选择框实例

2015/08/17 Javascript

浅析JavaScript中的对象类型Object

2016/05/26 Javascript

星期几的不同脚本写法(推荐)

2016/06/01 Javascript

详解node.js搭建代理服务器请求数据

2017/04/08 Javascript

基于AngularJS实现的工资计算器实例

2017/06/16 Javascript

node实现简单的反向代理服务器

2017/07/26 Javascript

vue 2.0项目中如何引入element-ui详解

2017/09/06 Javascript

echarts设置图例颜色和地图底色的方法实例

2018/08/01 Javascript

微信小程序之onLaunch与onload异步问题详解

2019/03/28 Javascript

jquery实现二级导航下拉菜单效果实例

2019/05/14 jQuery

[01:47]2018年度DOTA2最具人气解说-完美盛典

2018/12/16 DOTA

python根据路径导入模块的方法

2014/09/30 Python

详解Python的Django框架中的通用视图

2015/05/04 Python

Python 多线程Threading初学教程

2017/08/22 Python

Python文件监听工具pyinotify与watchdog实例

2018/10/15 Python

Django3.0 异步通信初体验(小结)

2019/12/04 Python

Tensorflow的常用矩阵生成方式

2020/01/04 Python

Django调用百度AI接口实现人脸注册登录代码实例

2020/04/23 Python

财务部出纳岗位职责

2013/12/22 职场文书

图书馆标语

2014/06/19 职场文书

电教室标语

2014/06/20 职场文书

亲子阅读的活动方案

2014/08/15 职场文书

2014四风问题对照检查材料范文

2014/09/15 职场文书

党的群众路线教育实践活动对照检查材料

2014/09/22 职场文书

党员批评与自我批评发言

2014/10/02 职场文书

读《钢铁是怎样炼成的》有感：百炼方成钢

2019/11/05 职场文书