HTML5手机绑定获取验证码特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 HTML5手机绑定获取验证码特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>HTML5手机绑定获取验证码特效</title>
<link rel="stylesheet" href="css/phone.css">
<link rel="stylesheet" type="text/css" href="css/weui.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="css/demos.css">

</head>
<body>

<form style="margin:8px" action="#" method="post" >
  <h3 class="demos-title" style="margin-bottom:50px; margin-top:50px">手机号绑定</h3>
  <div class="weui_cell">
    <div class="weui_cell_hd">
      <lab el class="weui_label">手机号：</label>
    </div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="tel" id="tell" name="tell" placeholder="请输入手机号">
    </div>
  </div>
  <div class="weui_cell">
    <div class="weui_cell_hd">
      <label class="weui_label">验证码：</label>
    </div>
    <div class="weui_cell_bd weui_cell_primary">
      <input class="weui_input" type="certifycode" id="certifycode" name="certifycode" placeholder="请输入验证码">
    </div>
    <div class="weui_cell_ft"> 
    
    <input style="width:117px;" type="button" class="weui_btn weui_btn weui_btn_mini weui_btn_primary" value="获取验证码"  onclick="clickButton(this)">  </div>
  </div>
   <div class="weui_cell"></div>
  <div class="weui_btn_area" style="margin-top:80px"> <a class="weui_btn weui_btn_primary" type="submit">提交</a> </div>
</form>

<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script> 
<script type="text/javascript">
function clickButton(obj){
    var obj = $(obj);
    obj.attr("disabled","disabled");/*按钮倒计时*/
    var time = 60;
    var set=setInterval(function(){
    obj.val(--time+"(s)");
    }, 1000);/*等待时间*/
    setTimeout(function(){
    obj.attr("disabled",false).val("重新获取验证码");/*倒计时*/
    clearInterval(set);
    }, 60000);
}
</script>
</body>
</html>

CSS代码(demos.css):

body,html{height:100%;-webkit-tap-highlight-color:transparent;}
.demos-title{text-align:center;font-size:34px;color:#3cc51f;font-weight:400;margin:0 15%;}
.demos-sub-title{text-align:center;color:#888;font-size:14px;}
.demos-header{padding:35px 0;}
.demos-content-padded{padding:15px;}
.demos-second-title{text-align:center;font-size:24px;color:#3cc51f;font-weight:400;margin:0 15%;}
footer{text-align:center;font-size:14px;padding:20px;}
footer a{color:#999;text-decoration:none;}

CSS代码(phone.css):

@charset "utf-8";/* CSS Document */
.boxPosition{text-align:center;float:left;width:95%;background:#878787;}
.phnenumber{border:none;height:36px;width:320px;margin-bottom:10px;}
.Verification_code{border:none;height:36px;width:220px;}
.button{height:36px;width:90px;border:none;color:#fff;border-radius:4px;background:#1aad19;}
.button:active{background:#0D720C;}

附件:下载该文件资源,减少时间成本(增值服务)