zoukankan      html  css  js  c++  java
  • 网页存储倒计时与解决网页cookie保存多个相同key问题

    短信倒计时多用网页临时存储,这可以保证网页在关闭状态也可记时。

     1 <p class="test_button" id="getcode">获取验证码</p>
     2 
     3 <script type="text/javascript">
     4 //加载页面访问cookie,防止关闭网页
     5 var t=getCookie("codeTime")>0?setCodeTime($("#getcode")):"";
     6 
     7 //短信倒计时事件
     8 var countdown;
     9 function setCodeTime(obj){
    10     countdown=getCookie("codeTime");
    11     if (countdown == 0) {
    12         obj.html("获取验证码"); 
    13         clearTimeout(mobRandomTime);
    14         delCookie("codeTime");
    15         return;
    16     } else { 
    17         obj.html(countdown + "秒重发"); 
    18         countdown--;
    19         editCookie("codeTime",countdown,countdown);
    20      } 
    21     mobRandomTime=setTimeout(function() { setCodeTime(obj) },1000) //每1000毫秒执行一次}
    22 
    23 //短信发送事件,设定短信间隔
    24 function phoneNote(obj,timeInterval){
    25     var obj=obj;
    26     addCookie("codeTime",timeInterval,timeInterval);
    27     setCodeTime(obj);
    28 }
    29 //触发短信发送
    30 $("#getcode").click(function(){
    31     var t=getCookie("codeTime")>0?"":phoneNote($("#getcode"),10);
    32 })
    33 </script>

    在当前页状态,每秒获取并修改cookie。

    同时Cookie不仅仅有名字和值两个属性,还有域(domain),过期时间(expires),路径(path)等属性。 其中,不同的域、不同的路径下可以存在同样名字的cookie。

     1 //添加cookie
     2 function addCookie(name,value,expireHours){
     3     var cookieString=name+"="+escape(value)+"; path=/";//注意红色话语,这是保证不会出现多个key的,只修改对应路径的key
     4     //判断是否设置过期时间
     5     if(expireHours>0){
     6         var date=new Date();
     7         date.setTime(date.getTime+expireHours*1000);
     8         cookieString=cookieString+"; expire="+date.toGMTString();
     9     }
    10     document.cookie=cookieString;
    11 }
    12 //获取cookie
    13 function getCookie(name){
    14     var strcookie=document.cookie;
    15     var arrcookie=strcookie.split("; ");
    16     for(var i=0;i<arrcookie.length;i++){
    17     var arr=arrcookie[i].split("=");
    18     if(arr[0]==name)return arr[1];
    19     }
    20     return "";
    21 }
    22 //修改cookie的值
    23 function editCookie(name,value,expiresHours){ 
    24     var cookieString=name+"="+escape(value)+"; path=/";//注意红色话语,这是保证不会出现多个key的,只修改对应路径的key
    25     if(expiresHours>0){ 
    26       var date=new Date(); 
    27       date.setTime(date.getTime()+expiresHours*1000); //单位是毫秒
    28       cookieString=cookieString+";expires=" + date.toGMTString(); 
    29     } 
    30       document.cookie=cookieString; 
    31 } 
    32 //删除cookie
    33 function delCookie(name){//删除cookie
    34     var exp = new Date();
    35     exp.setTime(exp.getTime() - 1);
    36     var cval=getCookie(name);
    37     if(cval!=null) document.cookie= name + "="+cval+"; path=/;expires="+exp.toGMTString();
    38 }
  • 相关阅读:
    background-clip与background-origin
    jquery判断一个元素是否为某元素的子元素
    Math.pow()实现开任意次方根
    vue基础点
    css3
    css系统学习
    angularJs
    jquery与JavaScript
    bootstrapt使用
    bootstrap
  • 原文地址:https://www.cnblogs.com/AaronNotes/p/6479558.html
Copyright © 2011-2022 走看看