JS自动倒计时30秒后按钮才可用(两种场景)

展示效果图：

WEB开发中经常会用到倒计时来限制用户对表单的操作，比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作，又比如在收取手机验证码时允许用户在一定时间过后（未收到验证码的情况下）再次获取验证码。那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用。

查看演示 下载源码

应用场景1：用户注册时阅读完相关协议信息后才能激活按钮

某些网站注册时要求用户同意所谓的用户协议之类的信息，如果协议内容非常重要，有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活下一步按钮提交表单。为了让用户能阅读完协议信息（实际用户有没有真正阅读咱不知道），开发者会设计一个倒计时比如30秒，30秒过后，表单提交按钮才会激活生效，下面来看具体如何实现。

<form action="http://www.jb51.net/" method="post" name="agree">
 <input type="submit" class="button" value="请认真查看<服务条款和声明> ()" name="agreeb">
</form>

假设有上面这样一个表单，表单的其他部分我们省略，只有一个提交按钮，初始时按钮不可用，当显示30秒倒计时结束后，按钮就会显示“我同意”，并且可以点击激活。

我们用原生的js来实现这一效果：

<script>
var secs = ;
document.agree.agreeb.disabled=true;
for(var i=;i<=secs;i++) {
 window.setTimeout("update(" + i + ")", i * );
}
function update(num) {
 if(num == secs) {
 document.agree.agreeb.value =" 我 同 意 ";
 document.agree.agreeb.disabled=false;
 }
 else {
 var printnr = secs-num;
 document.agree.agreeb.value = "请认真查看<服务条款和声明> (" + printnr +")";
 }
}
</script>

我们设置时间为30秒，当然你也可以设置你想要的时间，将按钮禁用，也就是不可点击，然后循环30秒，通过window.setTimeout调用update()函数，将当前秒与倒计时对比，如果已经倒计时完成则显示“我同意”，并激活按钮。

应用场景2：用户激活短信通道向用户手机发送验证码短信以验明正身

很多网站在验证用户身份的时候需要提高用户信息的安全性，这样就会与用户手机绑定，于是就会向用户手机发送验证码信息，如果用户填写了正确的验证码提交后台，那么操作才会成功。而发送验证码也可能由于各种原因有发送不成功的情况，又不能让用户不停点击发送。如此开发者使用倒计时来处理这类问题，用户激活短信后，如果30秒后未收到验证码短信则可以再允许点击发送短信。

<form action="http://www.jb51.net/" method="post" name="myform">
 <input type="button" class="button" value="获取手机验证码" name="phone" onclick="showtime()">
</form>

上面的表单在按钮上添加了一个onclick事件，调用了showtime()函数。

<script>
function showtime(t){
 document.myform.phone.disabled=true;
 for(i=;i<=t;i++) {
 window.setTimeout("update_p(" + i + ","+t+")", i * );
 } 

}
function update_p(num,t) {
 if(num == t) {
 document.myform.phone.value =" 重新发送 ";
 document.myform.phone.disabled=false;
 }
 else {
 printnr = t-num;
 document.myform.phone.value = " (" + printnr +")秒后重新发送";
 }
}
</script>

和场景1一样，当点击按钮后，按钮状态为禁用，通过调用window.setTimeout的update_p()显示倒计时，当倒计时完成后，按钮显示“重新发送”，这时按钮状态为可用。

以上通过两种场景给大家展示了js实现自动倒计时30秒后按钮才可用，希望对大家有所帮助。

赞 (0)

相关推荐

  • js倒计时抢购实例

    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"

  • 微信支付如何实现内置浏览器的H5页面支付

    因为项目需要,要在H5页面中加入微信支付,所以便去尝试,只想说真的很坑,尤其调试起来不方便 这是微信的官方API文档 微信API 微信支付的准备工作 申请公众号,申请开通支付,这个很简单,自行百度 申请好之后 在微信公众平台页面的"微信支付"页面中的"开发配置"Tab上配置"支付授权目录","测试授权目录","测试白名单" 在微信公众平台页面的"开发者中心"中找到"AppID(

  • 微信支付H5调用支付详解（java版）

    微信支付H5调用支付详解（java版）

    最近项目需要微信支付,然后看了下微信公众号支付,,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付  需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/ 那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.qq.com/wiki/d

  • javascript同步服务器时间和同步倒计时小技巧

    javascript同步服务器时间和同步倒计时小技巧

    之前在网上看到有人提问,如何在页面上同步显示服务器的时间,其实实现方法有几种,可能 一般人立马就想到可以使用Ajax每隔一秒去请求服务器,然后将服务器获取到时间显示在页面上,这样虽然能够实现,但存在一个很大的问题,那就是每隔一秒 去请求服务器,这样如果用户多了,服务器就会崩溃(内存占用率会很大),所以在我看来,这种方法不可行,我这里给出一种解决方案,能够实现同步服务器时间.同步倒计时,却不占用服务器太多资源,下面我给写实现的思路: 第一步,当用户第一次浏览页面时,服务器首先获取当前时间并显示在页

  • js实现点击获取验证码倒计时效果

    js实现点击获取验证码倒计时效果

    网站中为了防止恶意获取验证短信.验证邮箱,都会在点击获取验证码的按钮上做个倒计时的效果.实现这个功能,一个setInterval和一个clearInterval就能搞定了,不需要太多的代码.实例效果和代码如下: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <input type="button" style="height:

  • js代码实现点击按钮出现60秒倒计时

    js代码实现点击按钮出现60秒倒计时

    比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现 点击按钮 倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip

  • 使用微信内嵌H5网页解决JS倒计时失效问题

    使用微信内嵌H5网页解决JS倒计时失效问题

    项目要求:将H5商城页面嵌套到公司微信公众号里 项目本身的开发跟移动端网页并无太多差异,只是这昨天遇到一个问题,说是棘手,到也简单. 用户下单后,在选择支付方式页面,有个倒计时的逻辑(从下单时开始计算,24小时后未支付,会有ws自动取消这个订单),js代码如下: <script type="text/javascript"><br> var timespan = '20160113'; //后台程序生成24小时时间差值,这里随便写写 var timer; fun

  • 微信公众号支付H5调用支付解析

    微信公众号支付H5调用支付解析

    最近项目需要微信支付,然后看了下微信公众号支付,虽然不难,但是细节还是需要注意的,用了大半天时间写了个demo,并且完整的测试了一下支付流程,下面分享一下微信公众号支付的经验. 一.配置公众号微信支付   需要我们配置微信公众号支付地址和测试白名单. 比如:支付JS页面的地址为 http://www.xxx.com/shop/pay/             那此处配置www.xxx.com/shop/pay/ 二.开发流程 借用微信公众号支付api(地址 http://pay.weixin.q

  • 纯jsp实现的倒计时动态显示效果完整代码

    本文实例讲述了纯jsp实现的倒计时动态显示效果代码.分享给大家供大家参考,具体如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <div id="showTimes"></div> <% long current_time=System.currentTimeMillis(); long e

  • JS自动倒计时30秒后按钮才可用(两种场景)

    JS自动倒计时30秒后按钮才可用(两种场景)

    展示效果图: WEB开发中经常会用到倒计时来限制用户对表单的操作,比如希望用户在一定时间内看完相关协议信息才允许用户继续下一步操作,又比如在收取手机验证码时允许用户在一定时间过后(未收到验证码的情况下)再次获取验证码.那么今天我来给大家介绍下如何使用Javascript来实现这一简单应用. 查看演示 下载源码 应用场景1:用户注册时阅读完相关协议信息后才能激活按钮 某些网站注册时要求用户同意所谓的用户协议之类的信息,如果协议内容非常重要,有些网站会要求新注册的用户一定要阅读完相关协议信息才能激活

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • Navicat Premium 15 工具自动被杀毒防护软件删除的两种解决方法

    目录 Navicat Premium 15 工具自动被杀毒防护软件删除解决方法 方法一: 方法二 Navicat Premium 15 工具自动被杀毒防护软件删除解决方法 方法一: 如果开启了病毒防护,可以右键开始菜单→ 打开设置 设置中找到隐私和安全性 点击 WINDOS 安全中心 将 病毒和防护以及防火墙功能关闭掉 方法二 我重装系统后 安全防护系统感觉有点异常,点开安全防护中心时候发现里面是空白,没有仍和的安全防护软件,但是一解压注册机或者脚本的时候就会被删除,并且还会报错 以下是我的解决

  • Android 拍照后返回缩略图的两种方法介绍

    Android 拍照后返回缩略图的两种方法介绍

    目录 前言: 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 二.第二种方法 总结 前言: 如果简单地拍照片并非您应用的主要目标,那么您可能希望从相机应用中获取图片并对该图片执行一些操作. 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 下面我们看具体代码: 1.首先是布局文件activity_photothumbnail.xml <?xml version="1.0" encoding="utf-8"?> <

  • js设置控件的隐藏与显示的两种方法

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

  • Linux在shell中自动生成1到100的数组方法(两种方法)

    之前自己在写shell脚本的时候,需要自动创建1-100的文本确不知道该如何去创建.百度一翻终于知道了创建的方法. 在shell脚本中创建1-100的方法很多,那我在这里主要就说两种容易理解且方便的方法: 第一种方法: for i in {1..100} do echo $i done 使用{1..100}这种方式简单明了,大家也可以在linux命令模式下直接:echo {1..100}看一下效果. 第二种方法: 使用seq函数 for i in `seq 1 100` do echo $i d

  • javascript实现倒计时N秒后网页自动跳转代码

    复制代码 代码如下: <title>JS倒计时网页自动跳转代码</title>   <script language="JavaScript" type="text/javascript">     function delayURL(url) {         var delay = document.getElementById("time").innerHTML;         if(delay &g

  • VBS 断网后自动关机30秒后

    复制代码 代码如下: Dim Wsh,objWMIService,colMonitoredEvents Set Wsh = WScript.CreateObject("WScript.Shell") Set objWMIService = GetObject("winmgmts:\. ootwmi") Set colMonitoredEvents = objWMIService.ExecNotificationQuery("Select * from MS

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • Mongodb数据库误删后的恢复方法(两种)

    方法一:通过 oplog 恢复 如果部署的是 MongoDB 复制集,这时还有一线希望,可以通过 oplog 来尽可能的恢复数据:MongoDB 复制集的每一条修改操作都会记录一条 oplog,所以当数据库被误删后,可以通过重放现有的oplog来「尽可能的恢复数据」.前不久遇到的一个用户,运气非常好,数据库是最近才创建的,所有的操作都还保留在oplog里,所以用户通过oplog把所有误删的数据都找回了. 通过 oplog 恢复数据的流程非常简单,只需要把oplog集合通过mongodump导出,

随机推荐