编程 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 相关文章推荐

ExtJS Store的数据访问与更新问题

Apr 28 Javascript

解决jQuery插件tipswindown与hintbox冲突

Nov 05 Javascript

利用javascript判断文件是否存在

Dec 31 Javascript

jquery实现的图片点击滚动效果

Apr 29 Javascript

js使用post 方式打开新窗口

Feb 26 Javascript

javascript生成img标签的3种实现方法(对象、方法、html)

Dec 25 Javascript

浅析jQuery事件之on()方法绑定多个选择器,多个事件

Apr 27 Javascript

在线引用最新jquery文件的实现方法

Aug 26 Javascript

Bootstrap 填充Json数据的实例代码

Jan 11 Javascript

JS使用tofixed与round处理数据四舍五入的区别

Oct 25 Javascript

angularjs 缓存的使用详解

Mar 19 Javascript

Vuejs2 + Webpack框架里,模拟下载的实例讲解

Sep 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

用IE远程创建Mysql数据库的简易程序

2006/10/09 PHP

Banner程序

2006/10/09 PHP

令PHP初学者头疼十四条问题大总结

2008/11/12 PHP

深入解析php之sphinx

2013/05/15 PHP

腾讯QQ微博API接口获取微博内容

2013/10/30 PHP

CodeIgniter使用phpcms模板引擎

2013/11/12 PHP

php时间戳格式化显示友好的时间函数分享

2014/10/21 PHP

纯PHP代码实现支付宝批量付款

2015/12/24 PHP

详解配置 Apache 服务器支持 PHP 文件的解析

2017/02/15 PHP

dess中一个简单的多路委托的实现

2010/07/20 Javascript

(jQuery,mootools,dojo)使用适合自己的编程别名命名

2010/09/14 Javascript

JavaScript下利用fso判断文件是否存在的代码

2010/12/11 Javascript

jquery动画2.元素坐标动画效果（创建一个图片走廊）

2012/08/24 Javascript

JavaScript类属性的访问方式详解

2014/02/11 Javascript

node.js中的fs.read方法使用说明

2014/12/17 Javascript

js数组常见操作及数组与字符串相互转化实例详解

2015/11/10 Javascript

JavaScript的Number对象的toString()方法

2015/12/18 Javascript

jquery仿QQ登录账号选择下拉框效果

2016/03/22 Javascript

jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果

2016/09/18 Javascript

vue.js表格分页示例

2016/10/18 Javascript

javascript ES6中箭头函数注意细节小结

2017/02/17 Javascript

JavaScript栈和队列相关操作与实现方法详解

2018/12/07 Javascript

微信小程序学习笔记之本地数据缓存功能详解

2019/03/29 Javascript

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

2020/01/14 Javascript

原生js无缝轮播插件使用详解

2020/03/09 Javascript

Python字典数据对象拆分的简单实现方法

2017/12/05 Python

Python的iOS自动化打包实例代码

2018/11/22 Python

keras的ImageDataGenerator和flow()的用法说明

2020/07/03 Python

英国门销售网站：Green Tree Doors

2020/01/07 全球购物

请写出 float x 与＂零值＂比较的 if 语句

2016/01/04 面试题

通用C#笔试题附答案

2016/11/26 面试题

竞职演讲稿范文

2014/01/11 职场文书

求职简历自我评价2015

2015/03/10 职场文书

python3美化表格数据输出结果的实现代码

2021/04/14 Python

MySQL为数据表建立索引的原则详解

2022/03/03 MySQL

JDK8中String的intern()方法实例详细解读

2022/09/23 Java/Android