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

拖动一个HTML元素

Dec 22 Javascript

javascript 控制 html元素显示/隐藏实现代码

Sep 01 Javascript

利用js(jquery)操作Cookie的方法说明

Dec 19 Javascript

从JQuery源码分析JavaScript函数的apply方法与call方法

Sep 25 Javascript

node.js中的emitter.on方法使用说明

Dec 10 Javascript

JavaScript头像上传插件源码分享

Mar 29 Javascript

AngularJS中的缓存使用

Jan 11 Javascript

Bootstrap如何激活导航状态

Mar 22 Javascript

微信小程序 input表单与redio及下拉列表的使用实例

Sep 20 Javascript

详解js的作用域、预解析机制

Feb 05 Javascript

手动用webpack搭建第一个ReactApp的示例

Apr 11 Javascript

记录一次开发微信网页分享的步骤

May 07 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 IPV6正则表达式验证代码

2010/02/16 PHP

php设计模式小结

2013/02/15 PHP

smarty自定义函数htmlcheckboxes用法实例

2015/01/22 PHP

PHP Hash算法：Times33算法代码实例

2015/05/13 PHP

学习ExtJS Panel常用方法

2009/10/07 Javascript

mailto的使用技巧分享

2012/12/21 Javascript

js判读浏览器是否支持html5的canvas的代码

2013/11/18 Javascript

Javascript四舍五入Math.round()与Math.pow()使用介绍

2013/12/27 Javascript

JavaScript新窗口与子窗口传值详解

2014/02/11 Javascript

JavaScript实现三阶幻方算法谜题解答

2014/12/29 Javascript

JS截取字符串实例详解

2015/11/24 Javascript

Jquery判断form表单数据是否变化

2016/03/30 Javascript

微信小程序开发之从相册获取图片使用相机拍照本地图片上传

2017/04/18 Javascript

Node.js如何使用Diffie-Hellman密钥交换算法详解

2017/09/05 Javascript

JS实现瀑布流布局

2017/10/21 Javascript

Vue官网todoMVC示例代码

2018/01/29 Javascript

vue权限管理系统的实现代码

2019/01/17 Javascript

JS实现前端动态分页码代码实例

2020/06/02 Javascript

python自动安装pip

2014/04/24 Python

Python设计模式之单例模式实例

2014/04/26 Python

Python中input和raw_input的一点区别

2014/10/21 Python

详解JavaScript编程中的window与window.screen对象

2015/10/26 Python

Python实现简易端口扫描器代码实例

2017/03/15 Python

python实现猜单词小游戏

2020/05/22 Python

python matplotlib库直方图绘制详解

2019/08/10 Python

用Python抢火车票的简单小程序实现解析

2019/08/14 Python

学python安装的软件总结

2019/10/12 Python

python实现拼接图片

2020/03/23 Python

Jo Malone美国官网：祖玛珑香水

2017/03/27 全球购物

轻松制作精彩视频：Animoto

2018/09/19 全球购物

ktv中秋节活动方案

2014/01/30 职场文书

学校出纳员岗位职责

2014/03/18 职场文书

生日庆典策划方案

2014/06/02 职场文书

四风查摆问题自查报告

2014/10/10 职场文书

2015年质量管理工作总结范文

2015/05/18 职场文书

分析设计模式之模板方法Java实现

2021/06/23 Java/Android