zoukankan      html  css  js  c++  java
  • 发送短信验证(防刷新)

    
    
    //防止页面刷新倒计时失效
    function monitor(obj) {
    var LocalDelay = getLocalDelay();
    var timeLine = parseInt((new Date().getTime() - LocalDelay.time) / 1000);
    if (timeLine > LocalDelay.delay) {
    console.log("过期");
    } else {
    _delay = LocalDelay.delay - timeLine;
    obj.text(_delay+'s').addClass("btn-disabled").removeClass('send-btn');
    var timer = setInterval(function() {
    if (_delay > 1) {
    _delay--;
    obj.text(_delay+'s');
    setLocalDelay(_delay);
    } else {
    clearInterval(timer);
    obj.text("发送验证码").removeClass("btn-disabled").addClass('send-btn');
    }
    }, 1000);
    }
    };
    //倒计时效果
    /**
    * @param {Object} obj 获取验证码按钮
    * @param {Function} callback 获取验证码接口函数
    */
    function countDown(obj, callback) {
    if (obj.text() == "发送验证码") {
    var _delay = 60;
    var delay = _delay;
    // 按钮禁用
    obj.text(_delay+'s').addClass("btn-disabled").removeClass('send-btn');
    var timer = setInterval(function() {
    if (delay > 1) {
    delay--;
    obj.text(delay+'s');
    setLocalDelay(delay);
    } else {
    clearInterval(timer);
    // 恢复按钮禁用状态
    obj.text("发送验证码").removeClass("btn-disabled").addClass('send-btn');
    }
    }, 1000);

    callback();
    } else {
    return false;
    }
    }
    //设置setLocalDelay
    function setLocalDelay(delay) {
    //location.href作为页面的唯一标识,可能一个项目中会有很多页面需要获取验证码。
    localStorage.setItem("delay_" + location.href, delay);
    localStorage.setItem("time_" + location.href, new Date().getTime());
    }
    //getLocalDelay()
    function getLocalDelay() {
    var LocalDelay = {};
    LocalDelay.delay = localStorage.getItem("delay_" + location.href);
    LocalDelay.time = localStorage.getItem("time_" + location.href);
    return LocalDelay;
    }

    //****************************获取验证码的 点击事件*************************************
    //***********************************************************************************
    var btn = document.getElementById("getCode");
    //调用监听
    monitor($(btn));
    //点击click

    btn.onclick = function() {
    //倒计时效果 getCode回调函数 获取验证码api
    countDown($(btn), getCode);
    };

    function getCode() {
    $.get("", function(data) {
    if (data.state ==0) {

    } else {

    }
    });
    }
     
  • 相关阅读:
    Singleton 单例模式 泛型 窗体控制
    SpringMVC异常处理注解@ExceptionHandler
    如何实现beanutils.copyProperties不复制某些字段
    Spring 注解学习笔记
    使用客户端SVN在Update时遇到Previous operation has not finished; run 'cleanup' if it was interrupted,需要cheanup文件夹,解决方式
    jQuery的选择器中的通配符
    mysql str_to_date字符串转换为日期
    Mybatis中mapper.xml文件判断语句中的单双引号问题
    Jquery中each的三种遍历方法
    Javascript 中动态添加 对象属性
  • 原文地址:https://www.cnblogs.com/duanyue/p/6945269.html
Copyright © 2011-2022 走看看