zoukankan      html  css  js  c++  java
  • 倒计时防刷新功能

    原理很简单:页面加载的时候会从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>  
       
  • 相关阅读:
    SAR图像处理 MSTAR数据库利用问题
    python 获取系统环境变量 os.environ and os.putenv
    python 模块中的 __init__.py __main__.py
    pylint python2.7 安装记录
    Python--字典
    哈希表
    AC自动机模板
    平衡树(Splay)模板
    矩阵快速幂 模板
    非递归线段树
  • 原文地址:https://www.cnblogs.com/wangyulong/p/6594125.html
Copyright © 2011-2022 走看看