js实现60秒倒计时效果(使用了jQuery)

今天碰到要实现一个类似那种短信验证码60秒倒计时的需求,好久不写js,有点手生。把代码记录下,方便后续查阅。

这里我用了jQuey,毕竟写起来简洁点。下面直接看效果和代码。

一、效果

二、代码

(1)html

  1. <input type="button" id="btn" value="免费获取验证码" onclick="daojishi(10,this)" />

注意:要引入JQuery

(2)js

  1. <script type="text/javascript">
  2. function daojishi(seconds,obj){
  3. if (seconds > 1){
  4. seconds--;
  5. $(obj).val(seconds+"秒后可重新获取 ").attr("disabled", true);//禁用按钮
  6. // 定时1秒调用一次
  7. setTimeout(function(){
  8. daojishi(seconds,obj);
  9. },1000);
  10. }else{
  11. $(obj).val("免费获取验证码").attr("disabled", false);//启用按钮
  12. }
  13. }
  14. </script>
时间: 2024-12-14 18:44:12

js实现60秒倒计时效果(使用了jQuery)的相关文章

js jquery 按钮点击后 60秒之后才能点击 60秒倒计时

var wait = 60; function time(o) { if (wait == 0) { $(o).attr("disabled", false); $(o).val("获取验证码"); wait = 60; } else { $(o).attr("disabled", true); o.val(wait + "秒后重新发送"); wait--; setTimeout(function () {time(o);},

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

yii框架实现注册页面短信验证60秒倒计时

先说下简单的,直接用jquery来实现短信验证60秒倒计时,然后在说明在yii框架下怎么实现的. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Js写的一个倒计时效果实例

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果:另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

验证码60秒倒计时

验证码60秒倒计时(jQuery), 代码如下: //验证码倒计时 var countdown = 60; var st; function settime(element) { if (countdown != 0) { st = setTimeout(function () { settime(element); }, 1000); } if (countdown == 0) { element.removeAttr("disabled"); element.val("获

淘宝60秒倒计时

<!DOCTYPE html> <html> <head> <title>60秒倒计时</title> <script type="text/javascript"> window.onload=function(){ var oBtn = document.getElementById('but'); var conut = 60; var timer = null; oBtn.onclick=function(

60秒倒计时

<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown=60; function settime(val) { if (countdown == 0) { val.removeAttribute(&quo

js 短信60秒倒计时

废话不多说,看代码. 这是获取短信的按钮 <a href="javascript:void(0);" id="gSMS" onclick="get_sms_captcha('2')" style="font-size: 0.6rem;color: #444;left: 0.5rem;">获取短信验证码</a> 下面是js代码,思想就是定义60的数,然后定时器设置为一秒,每一秒执行一次.等到0是就可以重新

获取验证码,60秒倒计时js

<input type="button" id="btn" value="免费获取验证码" /><script type="text/javascript">var wait=60;function time(o) {        if (wait == 0) {            o.removeAttribute("disabled");