点击获取短信验证码JQ倒计时代码
发布时间:2015-10-14, 17:10:30 分类:HTML | 编辑 off 网址 | 辅助
正文 1930字数 222,266阅读
<meta charset="UTF-8" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">[/html][js]
$(function () {
//获取短信验证码
var validCode=true;
$(".msgs").click (function () {
var time=30;
var code=$(this);
if (validCode) {
validCode=false;
code.addClass("msgs1");
var t=setInterval(function () {
time--;
code.html(time+"秒");
if (time==0) {
clearInterval(t);
code.html("重新获取");
validCode=true;
code.removeClass("msgs1");
}
},1000)
}
})
})[/js]
Run code
Cut to clipboard
</script>
<style type="text/css">
Run code
Cut to clipboard
form{margin:200px auto;width:500px;}
label{font-size:14px;color:#555;line-height:40px;margin-right:10px;}
input{width:212px;height:38px;border-style:none;padding:0 4px;border:1px solid #C8C8C8;margin-right:10px;outline:none;}
.msgs{display:inline-block;width:104px;color:#fff;font-size:12px;border:1px solid #0697DA;text-align:center;height:30px;line-height:30px;background:#0697DA;cursor:pointer;}
form .msgs1{background:#E6E6E6;color:#818080;border:1px solid #CCCCCC;}
Run code
Cut to clipboard
</style>
<form>
<label style="float:left;">验 证 码</label>
<input type="text" class="c_code_msg" style="margin-right: 10px;">
<span class="msgs">获取短信验证码</span>
</form>
Run code
Cut to clipboard
(支付宝)给作者钱财以资鼓励 (微信)→
暂无评论 »