zoukankan      html  css  js  c++  java
  • 获取验证码倒计时

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>广告主注册</title>
    <link href="__CSS__/index.css" rel="stylesheet" />
    <script src="__JS__/jquery-1.9.1.min.js"></script>
    <script src="__JS__/index.js"></script>
    <script src="__COMM__/js/myPhoto.js"></script>
    <script src="__COMM__/js/ajaxfileupload.js"></script>
    <script src="__COMM__/js/tusi.js"></script>
    </head>

    <!--start引入头部-->
    <include file="Comm:header" />

    <!--start引入头部-->
    <body>
    <div id="wrap">
    <!-- cur-position start -->
    <div id="cur-position">
    <span class="tit">当前位置:</span>
    <a href="#">用户注册</a>
    </div>
    <!-- cur-position end -->

    <div class="list-text-box">
    <form id="formpwd">
    <div class="fill-list">
    <label class="fill-tit">用户名:</label>
    <div class="fill-cont">
    <input class="fill-ipt" type="text" placeholder="请输入用户名" name = "username" id="username" /><span class="required">*</span>
    </div>
    </div>
    <div class="fill-list">
    <label class="fill-tit">密码:</label>
    <div class="fill-cont">
    <input class="fill-ipt" type="password" placeholder="请输入密码" name = "password" id = "password" /><span class="required">*</span>
    </div>
    </div>
    <div class="fill-list">
    <label class="fill-tit">手机号:</label>
    <div class="fill-cont">
    <input class="fill-ipt" type="text" placeholder="请输入手机号" name = "telphone" id = "telphone" /><span class="required">*</span>
    </div>
    </div>
    <div class="fill-list">
    <label class="fill-tit">验证码:</label>
    <div class="fill-cont">
    <input class="fill-ipt" type="password" placeholder="请输入验证码" name = "yzm" id = "yzm" required="6"/><span class="required">*</span><span><input type="button" value="点击获取验证码" id="butid" onclick="getMobileCode()" /></span>
    </div>
    </div>
    <div class="fill-list">
    <label class="fill-tit">&nbsp;</label>
    <div class="fill-cont">
    <input class="fill-submit" type="button" value="注册" id="advreg" />
    </div>
    </div>
    </form>
    </div>

    </div>
    <!-- footer start -->
    <include file="Comm:footer"/>
    <!-- footer end -->
    <script type="text/javascript">
    var downSeconds = 0; //验证码120秒倒计时
    var backTelCode = '';
    var createDate = 0;
    var timer = null;
    function getMobileCode(){
    var mobile = $.trim($('#telphone').val());
    //手机号验证
    if(!(/^1[3|4|5|8][0-9]d{4,8}$/.test(mobile))){
    alert("不是完整的11位手机号或者正确的手机号前七位");
    $('#telphone').focus();
    return false;
    }
    // $('#telphone').disabled;
    if(1 < downSeconds){
    return false;
    }
    $.ajax({
    url: '{:U("Login/register")}',// 跳转到 action
    type: 'post',
    async: true, /*true异步执行,false*/
    data: {"mobile":mobile},
    dataType: 'json',
    timeout: 8000,
    //beforeSend:function(){ showDoAjaxTips();},
    success:function(res) {
    console.log(res);
    if(res.state){
    //hideDoAjaxTips();
    backTelCode = res.telcode;
    createDate = res.createDate;
    downSeconds = 120;
    downSecondsTimer();
    } else {
    tusi(res.msg);
    }

    },
    error : function(xmlHttpRequest, error) {
    if( error=='timeout'){ //超时
    tusi("网络太差!");
    } else {
    tusi("系统错误!");
    }
    }
    });
    }
    function downSecondsTimer(){
    timer && clearTimeout(timer);
    if(0 > downSeconds){
    $('.butid').val('获取验证码');
    return;
    }
    $('.butid').val('还有'+downSeconds+'秒');
    downSeconds --;
    timer = setTimeout("downSecondsTimer()",1000);
    }
    </script>

  • 相关阅读:
    [bzoj]2131: 免费的馅饼
    [bzoj]1098: [POI2007]办公楼biu
    [luogu]P2051 [AHOI2009]中国象棋
    [luogu]P2825 [HEOI2016/TJOI2016]游戏
    MSSQL To MongoDB Tool (FREE)
    虚拟机和Linux安装详解
    Maven
    springmvc的文件上传和下载,框架集成
    json详解以及fastjson使用
    JSP——语法,指令,表达式语言(EL),JSTL标签
  • 原文地址:https://www.cnblogs.com/finnlee/p/5405483.html
Copyright © 2011-2022 走看看