首页 > 代码库 > 倒计时防刷新功能

倒计时防刷新功能

2024-09-09 18:46:32   209人阅读

原理很简单：页面加载的时候会从cookie中获取值，如果获取不到就设定一个值，然后存入cookie中，设置一个定时器，每秒存入cookie一次，页面刷新的时候会从cookie中获取存入的值，直到时间为0

当然你也可以使用localShortage存储

下面是代码

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   2 <html xmlns="http://www.w3.org/1999/xhtml">   3 <head>   4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   5     <title>time remaining</title>   6     <script src="~/Scripts/jquery-1.10.2.js"></script> 7 </head>   8  9 <body>10     剩余时间：<span id="timer"></span><br />11     <br />12     <script type="text/javascript">13         /*主函数要使用的函数，进行声明*/14         var clock = new clock();15         /*指向计时器的指针*/16         var timer;17         window.onload = function () {18             /*主函数就在每1秒调用1次clock函数中的move方法即可*/19             timer = setInterval("clock.move()", 1000);20         }21         function clock() {22             /*s是clock()中的变量，非var那种全局变量，代表剩余秒数*/23             //防止页面刷新，将秒数存入cookie24             if (getCookie("maxtime") == "") {25                 //60分*60秒，用户可以自己定义26                 this.s = 60 * 60;27             }28             else {29                 this.s = getCookie("maxtime");30             }31             this.move = function () {32                 /*输出前先调用exchange函数进行秒到分秒的转换，因为exchange并非在主函数window.onload使用，因此不需要进行声明*/33                 document.getElementById("timer").innerHTML = exchange(this.s);34                 if (this.s > 0) {35                     this.s = this.s - 1;36                     document.cookie = "maxtime=" + encodeURI(this.s);37                 }38                 else {39                     alert("时间到");40                     //停止setInterval41                     clearInterval(timer);42                     //清除cookie43                     //setCookie("maxtime", encodeURI(this.s), -1);44                 }45             }46         }47         //时间转换48         function exchange(time) {49             /*javascript的除法是浮点除法，必须使用Math.floor取其整数部分*/50             this.m = Math.floor(time / 60);51             /*存在取余运算*/52             this.s = (time % 60);53             this.text = this.m + "分" + this.s + "秒";54             /*传过来的形式参数time不要使用this，而其余在本函数使用的变量则必须使用this*/55             return this.text;56         }57         //读Cookie，返回值为相应Cookie的内容58         function getCookie(cookieName) {59             var cookieContent = ‘‘;60             var cookieAry = document.cookie.split("; ");//得到Cookie数组61             for (var i = 0; i < cookieAry.length; i++) {62                 var temp = cookieAry[i].split("=");63                 if (temp[0] == cookieName) {64                     cookieContent = decodeURI(temp[1]);65                 }66             }67             return cookieContent;68         }69         function setCookie(name, value, seconds) {70             if (!seconds) {71                 seconds = 24 * 60 * 60;//24小时*60分*60秒72             }73             var exp = new Date();74             exp.setTime(exp.getTime() + seconds * 1000);75             document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();76         }77     </script>78 </body>79 </html>

 

倒计时防刷新功能


联系
我们