zoukankan      html  css  js  c++  java
  • 倒计时效果的递归实现

    效果:

    事件:

        //发送验证码
    	$('.js-sms-code').click(function(){
    		$(this).attr("disabled", "disabled").html("<span style='color:#666'><span id='countdown'>60</span>s 后再试</span>");
    		countdown();
    		var tel = $('#tel').val();
    		$.ajax({
    			url: "{sh::U('Home/sendSmscode')}",
    			type:'POST',
    			dataType:"json",
    			data: {tel: tel},
    			success: function() {
    			},
    			error: function() {
    				$('.js-help-info').html("请求失败");
    			}
    		});
    	})
    

    点评:这里的countdown方法就是妙处。

    看代码:

    function countdown() { // 递归
    	setTimeout(function() {
    		var time = $("#countdown").text();
    		
    		if (time == 1) {
    			$('.js-sms-code').removeAttr("disabled");
    			$('.js-sms-code').html("发送验证码");
    		} else {
    			$("#countdown").text(time - 1);
    			countdown();
    		}
    	}, 1000);
    }
    

    点评:如果time不等于1,就继续调用,同时时间减去一秒。setTimeout也很精髓。直至time减到1为止,移除disabled并更改内容为‘发送验证码’。

  • 相关阅读:
    第一次作业 黄学才
    shell重定向符
    umask
    Linux下新建用户自动复制文件
    任务计划cron
    vsftp配置
    xinetd.d配置格式
    php安装
    第五次作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/jiqing9006/p/5179822.html
Copyright © 2011-2022 走看看