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 相关文章推荐
这段js代码得节约你多少时间
Dec 20 Javascript
验证手机号码的JS方法分享
Sep 10 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
js实现前端分页页码管理
Jan 06 Javascript
Echarts基本用法_动力节点Java学院整理
Aug 11 Javascript
vue组件父子间通信详解(三)
Nov 07 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
jQuery实现的中英文切换功能示例
Jan 11 jQuery
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 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 中dirname(_file_)讲解
2007/03/18 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
ExtJS DOM元素操作经验分享
2013/08/28 Javascript
javascript中取前n天日期的两种方法分享
2014/01/26 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jquery实现动态改变div宽度和高度
2015/05/08 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
JSONObject使用方法详解
2015/12/17 Javascript
JavaScript实现搜索框的自动完成功能(一)
2016/02/25 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jQuery简单实现彩色云标签效果示例
2016/08/01 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
2016/09/01 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
React/Redux应用使用Async/Await的方法
2017/11/16 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
Python中对列表排序实例
2015/01/04 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python3实现的爬虫爬取数据并存入mysql数据库操作示例
2018/06/06 Python
Python中的正则表达式与JSON数据交换格式
2019/07/03 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
pygame实现五子棋游戏
2019/10/29 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
小学生美德少年事迹
2014/02/02 职场文书
科长竞聘演讲稿
2014/05/16 职场文书
人事任命书范文
2014/06/04 职场文书
记者节感言
2015/08/03 职场文书
2016年母亲节寄语
2015/12/04 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS