HTML5使用localStorage实现获取验证码保存倒计时时间

最新推荐文章于 2023-03-25 17:16:12 发布

weixin_34162629

最新推荐文章于 2023-03-25 17:16:12 发布

阅读量512

点赞数 1

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/senit/blog/743163

版权

为什么80%的码农都做不了架构师？>>>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script></head>
<body>
<button id="btn_click">获取验证码</button>


<script>
    $(function(){
        //加载刷新事件
        load($("#btn_click"));
        //点击事件
        $("#btn_click").click(function(){
            time($(this));
        })
    })

    function time(obj) {
        var wait=60;
        setLocalDelay(wait);
        if(wait==0){
            obj.attr("disabled",false);
            obj.html("获取验证码")
            setLocalDelay(wait);
        }else{
            var timer = setInterval(function() {
                if (wait > 0) {
                    wait--;
                    obj.attr("disabled",true);
                    obj.html("剩余("+wait+")秒")
                    setLocalDelay(wait);
                } else {
                    clearInterval(timer);
                    obj.attr("disabled",false);
                    obj.html("获取验证码")
                }
            }, 1000);
        }

    }
    function load(obj){
        //获取缓存中的值
        var timers = getLocalDelay();
        if(timers.lastname==null||timers.lastname==0){
            obj.html("获取验证码")
            return;
        }
        obj.html("剩余("+timers.lastname+")秒")
        var timer = setInterval(function() {
            if (timers.lastname > 0) {
                timers.lastname--;
                obj.attr("disabled",true);
                obj.html("剩余("+timers.lastname+")秒")
                setLocalDelay(timers.lastname);
            } else {
                clearInterval(timer);
                obj.attr("disabled",false);
                obj.html("获取验证码")
            }
        }, 1000);
    }

    function setLocalDelay(time) {
        //location.href作为页面的唯一标识，可能一个项目中会有很多页面需要获取验证码。
        localStorage.setItem("lastname" + location.href, time);
    }


    function getLocalDelay() {
        var LocalDelay = {};
        LocalDelay.lastname = localStorage.getItem("lastname" + location.href);
        return LocalDelay;
    }


</script>

</body>
</html>

转载于:https://my.oschina.net/senit/blog/743163