js实现n秒倒计时后才可以点击的效果
在我们进行注册用户时经常遇到点击按钮后,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毫秒倒计时同时进行效果
本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下 效果图: 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒: 效果图如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conte
-
javascript电商网站抢购倒计时效果实现
本文实例讲述了javascript电商网站抢购倒计时效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>团购--限时抢</title> </head> &
-
基于Javascript实现倒计时功能
本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~). 代码名称 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时实现</title> <sty
-
js倒计时简单实现方法
本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400)
-
js代码实现点击按钮出现60秒倒计时
比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
-
最全面的JS倒计时代码
第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="
-
js倒计时抢购实例
本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下 运行效果图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"
-
JavaScript电子时钟倒计时
本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay();
-
javascript倒计时效果实现
本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="text/javascript"> window.onload = fun
-
js实现新年倒计时效果
一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的2015年大家都收获了什么? 本文实例讲述了js实现新年倒计时效果代码.分享给大家供大家参考.具体如下: 运行效果图: 具体代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
随机推荐
- asp.net 字符串加密解密技术
- 一个非常实用的php文件上传类
- 简单的自定义php模板引擎
- JS中递归函数
- jQuery 中关于CSS操作部分使用说明
- 详解Vue中使用v-for语句抛出错误的解决方案
- PHP 字符串正则替换函数preg_replace使用说明
- 修改wamp的apache默认端口80为8088以及www目录
- SpringBoot集成Spring Data JPA及读写分离
- ASP.NET过滤器的应用方法介绍
- Swift的函数式编程详解
- PHP生成Gif图片验证码
- C++的静态联编和动态联编
- Android开发-之环境的搭建(图文详解)
- PHP中使用hidef扩展代替define提高性能
- 吐槽一下我所了解的Node.js
- JS的数组的扩展实例代码
- mssql insert into 和insert into select性能比较
- 简单粗暴的Caddy Server 使用介绍
- Python实现将文本生成二维码的方法示例