xml地图|网站地图|网站标签 [设为首页] [加入收藏]

奥门金沙手机娱乐网址JS自动倒计时30秒后按钮才可用(两种场景),js倒计时

时间:2020-01-04 21:39来源:计算机
JS自动倒计时30秒后开关才可用(三种情景卡塔尔(قطر‎,js倒计时 来得效果图: WEB开荒中时常会用到倒计时来节制顾客对表单的操作,举例希望客商在必然时间内看完相关心下一代协会

JS自动倒计时30秒后开关才可用(三种情景卡塔尔(قطر‎,js倒计时

来得效果图:

奥门金沙手机娱乐网址 1

WEB开荒中时常会用到倒计时来节制顾客对表单的操作,举例希望客商在必然时间内看完相关心下一代协会谈商讨音信才同意客商继续下一步操作,又举例在收到手提式有线电话机验证码时允许客商在确按期间未来(未接到验证码的气象下)再一次获得验证码。那么前日本身来给我们介绍下什么样行使Javascript来落实那第一批简化汉字便利用。

    翻开演示 下载源码

应用途景1:顾客注册时读书完相关心下一代组织议音信后工夫激活按键

好几网址注册时讲求客户同意所谓的客户协商之类的新闻,要是左券内容十一分关键,有个别网址会供给新登记的顾客必须求读书完相关磋商音讯技术激活下一步按键提交表单。为了让客商能翻阅完合同消息(实际顾客有未有实在阅读笔者不了然),开辟者会规划三个倒计时举例30秒,30秒过后,表单提交开关才会激活生效,上面来看现实怎么样落实。

<form action="http://www.bkjia.com/" 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.set提姆eout调用update(State of Qatar函数,将方今秒与倒计时相比,要是已经倒计时实现则显得“作者同意”,并激活开关。

使用项景2:客户激活短信通道向客商手提式有线电话机发送验证码短信以验明正身

有的是网址在验证顾客地点的时候必要巩固客商音讯的安全性,这样就能与顾客手提式有线电话机绑定,于是就能向客商手提式有线电电话机发送验证码音讯,即使顾客填写了不利的验证码提交后台,那么操作才会旗开马到。而发送验证码也大概鉴于种种原因有发送不成功的景色,又无法让顾客不停点击发送。如此开荒者使用倒计时来拍卖那类难题,顾客激活短信后,假诺30秒后未接纳验证码短信则足以再允许点击发送短信。

<form action="http://www.bkjia.com/" 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.setTimeoutupdate_p()来得倒计时,当倒计时完毕后,开关展现“重新发送”,那时开关状态为可用。

上述通过二种现象给我们来得了js完毕机关倒计时30秒后按键才可用,希望对大家享有助于。

展现效果图: WEB开辟中日常会用到倒计时来约束客商对表单的操作,举个例子希望客商在大器晚成...

编辑:计算机 本文来源:奥门金沙手机娱乐网址JS自动倒计时30秒后按钮才可用(两种场景),js倒计时

关键词: