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 相关文章推荐
用javascript实现的支持lrc歌词的播放器
May 17 Javascript
JavaScript Date对象 日期获取函数
Dec 19 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
js的window.showModalDialog及window.open用法实例分析
Jan 29 Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
jQuery基本筛选选择器实例代码
Feb 06 Javascript
Vue.js划分组件的方法
Oct 29 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
微信小程序从注册账号到上架(图文详解)
Jul 17 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
拼音码表的生成
2006/10/09 PHP
php 备份数据库代码(生成word,excel,json,xml,sql)
2013/06/23 PHP
深入解析PHP中逗号与点号的区别
2013/08/05 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP的new static和new self的区别与使用
2019/11/27 PHP
可输入的下拉框
2006/06/19 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
JS实现动态添加外部js、css到head标签的方法
2019/06/05 Javascript
layui 上传文件_批量导入数据UI的方法
2019/09/23 Javascript
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)
2020/05/03 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
JS闭包原理及其使用场景解析
2020/12/03 Javascript
Python网络爬虫与信息提取(实例讲解)
2017/08/29 Python
你眼中的Python大牛 应该都有这份书单
2017/10/31 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
window7下的python2.7版本和python3.5版本的opencv-python安装过程
2019/10/24 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
python对XML文件的操作实现代码
2020/03/27 Python
Python批量修改xml的坐标值全部转为整数的实例代码
2020/11/26 Python
python selenium 获取接口数据的实现
2020/12/07 Python
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
澳大利亚连衣裙和女装在线:Esther
2017/11/11 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
以下的初始化有什么区别
2013/12/16 面试题
个人担保书范文
2014/05/20 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书