首页 > 代码库 > 倒计时防刷新功能
倒计时防刷新功能
原理很简单:页面加载的时候会从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>
倒计时防刷新功能
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。