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

JavaScript 中的日期和时间及表示标准介绍

Aug 21 Javascript

检查输入的是否是数字使用keyCode配合onkeypress事件

Jan 23 Javascript

全面解析Bootstrap中tooltip、popover的使用方法

Jun 13 Javascript

jQuery版AJAX简易封装代码

Sep 14 Javascript

学习vue.js表单控件绑定操作

Dec 05 Javascript

js实现截图保存图片功能的代码示例

Feb 16 Javascript

js 数字、字符串、布尔值的转换方法(必看)

Apr 07 Javascript

BootStrap 获得轮播中的索引和当前活动的焦点对象

May 11 Javascript

Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

Sep 14 Javascript

vue实现点击关注后及时更新列表功能

Jun 26 Javascript

Vue Element校验validate的实例

Sep 21 Javascript

vue项目如何监听localStorage或sessionStorage的变化

Jan 04 Vue.js

图解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

一次编写，随处运行

2006/10/09 PHP

php file_get_contents函数轻松采集html数据

2010/04/22 PHP

UCenter中的一个可逆加密函数authcode函数代码

2010/07/20 PHP

PHP中调用ASP.NET的WebService的代码

2011/04/22 PHP

PHP数组实例总结与说明

2011/08/23 PHP

详解如何在云服务器上部署Laravel

2017/06/30 PHP

extJs 常用到的增，删，改，查操作代码

2009/12/28 Javascript

jQueryUI写一个调整分类的拖放效果实现代码

2012/05/10 Javascript

Jquery实现搜索框提示功能示例代码

2013/08/13 Javascript

js函数在frame中的相互调用详解

2014/03/03 Javascript

jquery向上向下取整适合分页查询

2014/09/06 Javascript

jQuery数据缓存用法分析

2015/02/20 Javascript

JavaScript获取URL汇总

2015/06/08 Javascript

JS特效实现图片自动播放并可控的效果

2015/07/31 Javascript

移动端横屏的JS代码(beta)

2016/05/16 Javascript

json传值以及ajax接收详解

2016/05/24 Javascript

微信小程序 location API接口详解及实例代码

2016/10/12 Javascript

jQuery与js实现颜色渐变的方法

2016/12/30 Javascript

基于Vue过渡状态实例讲解

2017/09/14 Javascript

[01:11]回顾历届DOTA2国际邀请赛中国区预选赛

2017/06/26 DOTA

Python中获取对象信息的方法

2015/04/27 Python

Python中threading模块join函数用法实例分析

2015/06/04 Python

Python实现线程池代码分享

2015/06/21 Python

Python 中Pickle库的使用详解

2018/02/24 Python

caffe binaryproto 与 npy相互转换的实例讲解

2018/07/09 Python

python爬虫批量下载zabbix文档代码实例

2019/08/21 Python

python 单线程和异步协程工作方式解析

2019/09/28 Python

Python验证码截取识别代码实例

2020/05/16 Python

印度化妆品购物网站：Nykaa

2018/07/22 全球购物

The North Face官方旗舰店：美国著名户外品牌

2020/09/28 全球购物

大专自我鉴定范文

2013/10/23 职场文书

高中体育教学反思

2014/01/24 职场文书

办公室秘书岗位职责范本

2014/02/11 职场文书

党员干部廉洁自律承诺书

2015/04/28 职场文书

写给女朋友的检讨书

2015/05/06 职场文书

2015个人年度工作总结范文

2015/05/28 职场文书