• jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 
     3 <html xmlns="http://www.w3.org/1999/xhtml">
     4 <head>
     5     <title></title>
     6     <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
     7     <script type="text/javascript">
     8 
     9         /*-------------------------------------------*/
    10         var InterValObj; //timer变量,控制时间
    11 var count = 5; //间隔函数,1秒执行
    12 var curCount;//当前剩余秒数
    13 var code = ""; //验证码
    14 var codeLength = 6;//验证码长度
    15 function sendMessage() {
    16             curCount = count;
    17             var dealType; //验证方式
    18 var uid=$("#uid").val();//用户uid
    19 if ($("#phone").attr("checked") == true) {
    20                 dealType = "phone";
    21             }
    22             else {
    23                 dealType = "email";
    24             }
    25             //产生验证码
    26 for (var i = 0; i < codeLength; i++) {
    27                 code += parseInt(Math.random() * 9).toString();
    28             }
    29             //设置button效果,开始计时
    30                 $("#btnSendCode").attr("disabled", "true");
    31                 $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    32                 InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
    33 //向后台发送处理数据
    34                 $.ajax({
    35                     type: "POST", //用POST方式传输
    36                     dataType: "text", //数据格式:JSON
    37                     url: 'Login.ashx', //目标地址
    38                     data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
    39                     error: function (XMLHttpRequest, textStatus, errorThrown) { },
    40                     success: function (msg){ }
    41                 });
    42             }
    43         //timer处理函数
    44 function SetRemainTime() {
    45             if (curCount == 0) {                
    46                 window.clearInterval(InterValObj);//停止计时器
    47                 $("#btnSendCode").removeAttr("disabled");//启用按钮
    48                 $("#btnSendCode").val("重新发送验证码");
    49                 code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
    50             }
    51             else {
    52                 curCount--;
    53                 $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
    54             }
    55         }
    56     </script>
    57 </head>
    58 <body>
    59         <input id="btnSendCode" type="button" value="发送验证码" onclick="sendMessage()" /></p>
    60 </body>
    61 </html>
  • 相关阅读:
    StreamWrite写ASCII文本文件时,中文变成问号的处理
    asp.net错误处理封装
    C#减少图片文件大小和尺寸
    关于《代码大全2》
    关于重载
    Oracle移机
    用delphi模仿.net的string.split
    Oracle817搞怪
    oracle取得系统时钟
    15 个新鲜精彩的jQuery教程
  • 原文地址:https://www.cnblogs.com/zh719588366/p/5496657.html
Copyright © 2020-2023  润新知