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

来源：互联网发布：php markdown 编辑：程序博客网时间：2024/06/05 00:50
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>
运行结果如图:

这里写图片描述
阅读全文
0 0