• “发送”按钮倒计时效果


    1.相关html

    <div class="verification-sms">
    	<img class="cancel" src="./img/cancel.png"/>
    	<p class="title">短信验证码</p>
    	<p class="tip">验证码已发送,请及时查收</p>	
    	<div class="getcodecon">
    		<input class="validationcode" id="phoneCode" type="tel" placeholder="请输入验证码" maxlength="6">
    		<img class="empty-img" id="emptyText" src="./img/empty.png"/>
    		<span class="getcodebtn" id="getCode" class="getcode">获取验证码</span>
    	</div>
    	<!--*验证码输入错误-->
    	<p class="prompts" style="visibility: visible;">*验证码输入错误</p>
    	<!--<p class="but_submission">提交验证</p>-->
    	<img class="but_submission" src="./img/submitValidation.png"/>
    </div>
    

    2.相关js

    <script type="text/javascript">
    	var flag = false;// 是否有效开关
    	// 文本值清空
    	$('#emptyText').click(function() {
    		$('#phoneCode').val('')
    	});
    	
    	// 点击获取验证码
    	$('#getCode').click(function() {
    		getPhoneCode();
    	});
    	// 获取短信验证码
    	function getPhoneCode() {
    		if (flag) {
    			return;
    		}
    		//验证码
    		var bank_code = $("#phoneCode").val();
    		// 开户省份
    		if (bank_code == "" || bank_code == null) {
    			$('.prompts').css('visibility', 'visible');
    			$('.prompts').html('*请输入验证码');
    			return;
    		}
    		tt(60);
    		$('#getCode').removeClass("getcodebtn").addClass("getingcodebtn");
    		flag = true;//60s倒计时内点击,直接返回。转函数第一行
    		$.ajax({
    			url:"/H5.action?m=addFastMobilePhone",
    			type:"post",
    			data:{
    				"bank_code":bank_code
    			},
    			dataType:"json",
    			success:function( data ) {
    				if (data.status == 0) {
    					// 订单编号
    					var order_no = data.data.order_no;
    					$('#order_no').val(data.data.request_number);
    				} else {
    					$('.prompts').css('visibility', 'visible');
    					$('.prompts').html(data.errMessage);
    				}
    			}
    		});
    	}
    //	 * 倒计时
    	function tt(t) {
    		t -= 1;
    		var cle = setTimeout(function() {
    			tt(t);
    		}, 1000);
    		var t = t;// 计算差值
    		if (t <= 0) {
    			flag = false;
    			$('#getCode').html('重新获取');
    			$('#getCode').removeClass("getingcodebtn").addClass("getcodebtn");
    			clearInterval(cle);
    			return;
    		}
    		// var se = Math.floor( t / 1000 % 60 );
    		// console.log(se)
    		function dou(te) {// 当时间位数为1时,给前面拼接0
    			if (te < 10) {
    				te = '0' + te;
    			}
    			return te;
    		}
    		$('#getCode').html(dou(t) + 's后获取');
    	}
    </script>
  • 相关阅读:
    解决Django在mariadb创建的表插入中文乱码的问题
    运行在CentOS7.5上的Django项目时间不正确问题
    获取百度网盘真实下载连接
    Django2.x版本在生成数据库表初始化文件报错
    Pycharm中的Django项目连接mysql数据库
    Django2.x版本路由系统的正则写法以及视图函数的返回问题
    CentOS7.5安装坚果云
    CentOS7.5安装下载工具
    CentOS6.5修改/etc/pam.d/sshd后root无法ssh登陆
    oracle 时间
  • 原文地址:https://www.cnblogs.com/missme-lina/p/10188092.html
Copyright © 2020-2023  润新知