js倒计时,页面刷新时,不会从头计时

  最近不忙,瞎鼓捣...哈哈

这里利用了H5的本地存储 localStorage,取秒数直接用了php的time()方法,就懒得用js取了。

把第一次访问页面时的时间存在客户端,然后再刷新的时候,比较用户第一次访问的时间和当前刷新时的时间。

这样就可以避免刷新的时候从头计时。当然方法有很多哈哈。

<div id=‘xx‘></div><script>  var first_access_time = localStorage.getItem("first_access_time");
  var i = 10;
  if (first_access_time){
    var refresh_time = "<?php echo time();?>";
     time(i - (refresh_time - first_access_time));
  } else {
     localStorage.setItem("first_access_time", ‘<?php echo time();?>‘);
     time(i);
  }

  function time(i){
      if (i <=0){
        location.href = ‘http://www.google.cn‘;
        return;
      }
      document.getElementById(‘xx‘).innerHTML = i;
      setTimeout(‘time(‘+(--i)+‘)‘, 1000);
  }
</script>
时间: 2024-10-11 15:18:25

js倒计时,页面刷新时,不会从头计时的相关文章

js中页面刷新和页面跳转的方法总结 [ 转自欢醉同学 ]

.js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascri

用js判断页面刷新或关闭的方法

onbeforeunload与onunload事件 Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行. Onbeforeunload也是在页面刷新或关闭时调用,Onbeforeunload是正要去服务器读取新的页面时调用,此时还没开始读取:而onunload则已经从服务器

react+antd分页 实现分页及页面刷新时回到刷新前的page

antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看代码,实现了页面跳转后刷新依然显示刷新前的页面. import React from 'react' import { Pagination, Spin } from 'antd' //引入分页组件 import 'whatwg-fetch' import './agricultural.less'

vue常见问题处理 -- 页面刷新时,如何保持原有vuex中的state信息

一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("

js倒计时+页面跳转

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 5秒倒计时跳转 var num_s = 5; var cal_timer = setInterval(showTime, 5000); fu

JS实现页面刷新方法

1,reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet])  参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") 2,replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL. 语法: loca

js实现页面刷新

1. reload reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet]) 参数: bForceGet, 可选参数, 默认为 false,从客户端缓存里取当前页.true, 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5("刷新") reload() 方法用于重新加载当前文档.如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已

JS 倒计时实现代码(时、分,秒)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>JS实现倒计时(时.分,秒)</title> <script language="javascript" type="text/javascript"> var interval = 1000; fun

JS倒计时页面跳转

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'> <html> <head> <title>页面提示</title> <meta http-equiv="Content-Type" content="text/html;