首页 > 其他分享 >jquery 实现 点击按钮后倒计时效果,多用于实现发送手机验证码、邮箱验证码

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

时间:2023-06-08 16:36:43浏览次数:39  
标签:jquery code uid 验证码 var 邮箱 dealType curCount


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        /*-------------------------------------------*/
        var InterValObj; //timer变量,控制时间
var count = 5; //间隔函数,1秒执行
var curCount;//当前剩余秒数
var code = ""; //验证码
var codeLength = 6;//验证码长度
function sendMessage() {
            curCount = count;
            var dealType; //验证方式
var uid=$("#uid").val();//用户uid
if ($("#phone").attr("checked") == true) {
                dealType = "phone";
            }
            else {
                dealType = "email";
            }
            //产生验证码
for (var i = 0; i < codeLength; i++) {
                code += parseInt(Math.random() * 9).toString();
            }
            //设置button效果,开始计时
                $("#btnSendCode").attr("disabled", "true");
                $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
                InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
//向后台发送处理数据
                $.ajax({
                    type: "POST", //用POST方式传输
                    dataType: "text", //数据格式:JSON
                    url: 'Login.ashx', //目标地址
                    data: "dealType=" + dealType +"&uid=" + uid + "&code=" + code,
                    error: function (XMLHttpRequest, textStatus, errorThrown) { },
                    success: function (msg){ }
                });
            }
        //timer处理函数
function SetRemainTime() {
            if (curCount == 0) {                
                window.clearInterval(InterValObj);//停止计时器
                $("#btnSendCode").removeAttr("disabled");//启用按钮
                $("#btnSendCode").val("重新发送验证码");
                code = ""; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效    
            }
            else {
                curCount--;
                $("#btnSendCode").val("请在" + curCount + "秒内输入验证码");
            }
        }
    </script>
</head>
<body>
        <input id="btnSendCode" type="button" value="发送验证码" οnclick="sendMessage()" /></p>
</body>
</html>




标签:jquery,code,uid,验证码,var,邮箱,dealType,curCount
From: https://blog.51cto.com/u_5454003/6441248

相关文章

  • JQuery-XSS漏洞(CVE-2020-11022/CVE-2020-11023)
    JQuery-XSS漏洞(CVE-2020-11022/CVE-2020-11023)详细描述据NVD描述:在大于或等于1.2且在3.5.0之前的jQuery版本中,即使执行了消毒(sanitize)处理,也仍会执行将来自不受信任来源的HTML传递给jQuery的DOM操作方法(即html()、.append()等),从而导致xss漏洞。受影响版本大于等于1.2,小于......
  • 五、kaptcha实现图形验证码
    Kaptcha是谷歌开源的可高度配置的实用验证码生成工具。一、验证码配置加入依赖:<dependency><groupId>com.github.penggle</groupId><artifactId>kaptcha</artifactId><version>2.3.2</version></dependency> 生成验证码配置:......
  • redmine 迁移后邮箱配置
    https://blog.csdn.net/love8753/article/details/126380927步骤一修改配置文件步骤二redmine页面配置信息步骤一修改配置文件打开C:\Bitnami\redmine-3.3.0-1\apps\redmine\htdocs\config\configuration.yml,找到如下内容:address:一般为smtp+邮箱后缀名port:端口号,......
  • .Net6 调用qq邮箱发送邮件
    1.appsettings.json写入需要用到的基本信息 2.发送消息核心方法publicclassSendHelperl{privatereadonlyIConfiguration_configuration;publicSendHelperl(IConfigurationconfiguration){_configuration=configura......
  • jquery.serializejson.min.js的妙用
    jquery.serializejson.min.js的妙用关于这个jquery.serializejson.min.js插件来看,他是转json的一个非常简单好用的插件。前端在处理含有大量数据提交的表单时,除了使用Form直接提交刷新页面之外,经常碰到的需求是收集表单信息成数据对象,Ajax提交。而在处理复杂的表单时,......
  • jQuery
    jQueryjQuery常用插件网站jQuery插件库:http://www.jq22.com/jQuery之家http://www.htmleaf.com/jQuery事件/on()绑定多个事件jQuery解绑事件off()jQuery绑定只执行一次事件one()jQuery自动触发事件trigger()和定时器一起使用可以达到自动触发指定事件的效果......
  • springboot 发送邮箱验证码
    0步骤总览开启邮箱的POP3/SMTP服务。新建springboot项目。导入依赖。配置配置文件。编写controller测试接口。postman中测试1开启邮箱的POP3/SMTP服务这里我用的网易邮箱,其它邮箱类似步骤,不清楚的可以百度。总之就是要打开pop3/smtp服务,如果按照我的方法......
  • random模块生成六位随机数字+大小写验证码
    random模块生成六位随机数字+大小写验证码【一】代码importrandom'''生成六位随机(数字+大小写)验证码'''defget_verify_code(n):code=''foriinrange(n):random_int=str(random.randint(0,9))#0-9之间的整数random_upper......
  • jQuery Backstretch动态设置背景图片插件
    [url]http://www.2cto.com/kf/201411/348425.html[/url]官方:[url]https://github.com/srobbin/jquery-backstretch[/url]<scriptsrc="Scripts/jquery-1.8.2.min.js"></script><scriptsrc="Scripts/jquery.backstretc......
  • jQuery使用iframe做tab标签
    jQueryTab插件[url]http://jqueryui.com/tabs/#default[/url][b][color=red]Jquery、tabs、iframe相结合[/color][/b][url]http://blog.sina.com.cn/s/blog_656977f401014oy6.html[/url]使用Jquery中的ui.tabs.js,如果tab中的界面有按钮需要跳转到新的页......