浏览器刷新不失效的倒计时按钮功能

最新推荐文章于 2022-09-20 16:22:55 发布

风神.NET

最新推荐文章于 2022-09-20 16:22:55 发布

阅读量1.1k

点赞数

分类专栏： Html+Javascript 文章标签：浏览器倒计时按钮刷新不失效

Html+Javascript 专栏收录该内容

258 篇文章 12 订阅

订阅专栏

Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!doctype html>
<html lang="en">
    <head>
        <meta name="Generator" content="EditPlus®" />
        <meta name="Author" content="" />
        <meta name="Keywords" content="" />
        <meta name="Description" content="" />
        <title>Document</title>
        <script src="JS/jquery-1.11.1.js" type="text/javascript"></script>
        <script src="JS/jquery.cookie.js" type="text/javascript"></script>
    </head>
    <body>
        <input id="phonenum" type="text" value="18321011111" />
        <input id="second" type="button" value="免费获取验证码" />
    </body>
    <script type="text/javascript">
        //发送验证码时添加cookie
        function addCookie(name, value, expiresHours) {
            //判断是否设置过期时间,0代表关闭浏览器时失效
            if (expiresHours > 0) {
                var date = new Date();
                date.setTime(date.getTime() + expiresHours * 1000);
                $.cookie(name, escape(value), { expires: date });
            } else {
                $.cookie(name, escape(value));
            }
        }

        //修改cookie的值
        function editCookie(name, value, expiresHours) {
            if (expiresHours > 0) {
                var date = new Date();
                date.setTime(date.getTime() + expiresHours * 1000); //单位是毫秒
                $.cookie(name, escape(value), { expires: date });
            } else {
                $.cookie(name, escape(value));
            }
        }

        //根据名字获取cookie的值
        function getCookieValue(name) {
            return $.cookie(name);
        }

        $(function() {
            $("#second").click(function() {
                sendCode($("#second"));
            });
            v = getCookieValue("secondsremained"); //获取cookie值
            if (v > 0) {
                settime($("#second")); //开始倒计时
            }
        });


        //发送验证码
        function sendCode(obj) {
            var phonenum = $("#phonenum").val();
            var result = isPhoneNum();
            if (result) {
                // doPostBack('${base}/login/getCode.htm',backFunc1,{"phonenum":phonenum});
                addCookie("secondsremained", 60, 60); //添加cookie记录,有效时间60s
                settime(obj); //开始倒计时
            }
        }

        //开始倒计时
        var countdown;

        function settime(obj) {
            countdown = getCookieValue("secondsremained");
            //alert(countdown);
            if (countdown == 0 || countdown == undefined) {
                obj.removeAttr("disabled");
                obj.val("免费获取验证码");
                return;
            } else {
                obj.attr("disabled", true);
                obj.val("重新发送(" + countdown + ")");
                countdown--;
                editCookie("secondsremained", countdown, countdown + 1);
            }
            setTimeout(function() { settime(obj); }, 1000); //每1000毫秒执行一次
        }

        //校验手机号是否合法
        function isPhoneNum() {
            var phonenum = $("#phonenum").val();
            var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            if (!myreg.test(phonenum)) {
                alert('请输入有效的手机号码！');
                return false;
            } else {
                return true;
            }
        }
    </script>
</html>

运行结果如图:

这里写图片描述

风神.NET

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
浏览器刷新不失效的倒计时按钮功能

Index.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!doctype html><html lang="en"> <head> <meta name="Gener
复制链接

扫一扫