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

基于jQuery UI CSS Framework开发Widget的经验

Aug 21 Javascript

JavaScript.The.Good.Parts阅读笔记（二）作用域&闭包&减缓全局空间污染

Nov 16 Javascript

Prototype源码浅析 Enumerable部分(二)

Jan 18 Javascript

Javascript 拖拽的一些高级的应用(逐行分析代码，让你轻松了拖拽的原理)

Jan 23 Javascript

jQuery插件之Tocify动态节点目录菜单生成器附源码下载

Jan 08 Javascript

angularjs封装bootstrap时间插件datetimepicker

Jun 20 Javascript

BootStrap table使用方法分析

Nov 08 Javascript

Node.js的Mongodb使用实例

Dec 30 Javascript

vue-cli3中vue.config.js配置教程详解

May 29 Javascript

layui默认选中table的CheckBox复选框方法

Sep 19 Javascript

微信小程序静默登录的实现代码

Jan 08 Javascript

vue实现抽屉弹窗效果

Nov 15 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中getservbyport与getservbyname函数用法实例

2014/11/18 PHP

Code:　write(s,d) 输出连续字符串

2007/08/19 Javascript

JavaScript性能陷阱小结(附实例说明)

2010/12/28 Javascript

JS中动态添加事件(绑定事件)的代码

2011/01/09 Javascript

js获取当前时间(昨天、今天、明天)

2016/11/23 Javascript

Node.js连接MongoDB数据库产生的问题

2017/02/08 Javascript

Vue-cli proxyTable 解决开发环境的跨域问题详解

2017/05/18 Javascript

angular2+node.js express打包部署的实战

2017/07/27 Javascript

使用DataTable插件实现异步加载数据

2017/11/19 Javascript

JavaScript原生实现观察者模式的示例

2017/12/15 Javascript

JavaScript实现邮箱后缀提示功能的示例代码

2018/12/13 Javascript

小程序根据手机机型设置自定义底部导航距离

2019/06/04 Javascript

JavaScript工具库之Lodash详解

2019/06/15 Javascript

js中位数不足自动补位扩展padLeft、padRight实现代码

2020/04/06 Javascript

vuex存取值和映射函数使用说明

2020/07/24 Javascript

Python合并多个装饰器小技巧

2015/04/28 Python

Python实现删除文件中含“指定内容”的行示例

2017/06/09 Python

Django使用HttpResponse返回图片并显示的方法

2018/05/22 Python

python实现连连看辅助之图像识别延伸

2019/07/17 Python

python如何实现不可变字典inmutabledict

2020/01/08 Python

golang/python实现归并排序实例代码

2020/08/30 Python

详解python内置模块urllib

2020/09/09 Python

css3动画效果小结(推荐)

2016/07/25 HTML / CSS

canvas实现俄罗斯方块的方法示例

2018/12/13 HTML / CSS

const char*, char const*, char*const的区别是什么

2014/07/09 面试题

database面试题

2013/03/28 面试题

致长跑运动员广播稿

2014/01/31 职场文书

销售员岗位职责

2014/06/09 职场文书

初中优秀教师事迹材料

2014/08/18 职场文书

考试作弊检讨书

2015/01/27 职场文书

2015年学生会工作总结范文

2015/03/31 职场文书

舞出我人生观后感

2015/06/16 职场文书

PyCharm 安装与使用配置教程（windows,mac通用）

2021/05/12 Python

详解MySQL连接挂死的原因

2021/05/18 MySQL

nginx配置之并发频次限制

2022/04/18 Servers

MySQL添加索引特点及优化问题

2022/07/23 MySQL