倒计时防刷新功能
Posted 雪山玉龙
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了倒计时防刷新功能相关的知识，希望对你有一定的参考价值。
原理很简单：页面加载的时候会从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 //防止页面刷新，将秒数存入cookie 24 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 //停止setInterval 41 clearInterval(timer); 42 //清除cookie 43 //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>
以上是关于倒计时防刷新功能的主要内容，如果未能解决你的问题，请参考以下文章