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

这里利用了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>

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

  1. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

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

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

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

    Onunload,onbeforeunload都是在刷新或关闭时调用,可以在<script>脚本中通过window.onunload来指定或者在<body>里指定.区别在于on ...

  4. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  5. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

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

    antd框架地址:https://ant.design/index-cn 利用antdUI框架做了个分页,其他功能都没问题,但是页面跳转后刷新会回到第一页,经过学习,在组件里增加了hash值,详情请看 ...

  7. js当前页面刷新并且清空文本内容的方法

    js当前页面刷新并且清空文本内容的方法: 1.js代码:location.reload(); 2.html:<body onload="document.forms[0].reset( ...

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

    一.页面刷新时,如何保持原有vuex中的state信息 页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 st ...

  9. JS倒计时(刷新页面不影响)的实现思路

    最近在做一个项目,用到了点击按钮实现倒计时,这个用js来实现很简单.但是遇到了一个问题 页面刷新后js重新加载导致 倒计时重新开始,或者直接初始化了 后来通过 cookie 保存来实现了js倒计时,关 ...

随机推荐

  1. php+layui实现图片上传与预览

    端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...

  2. position sticky的兼容

    position的sticky这个属性一般用于导航条,因为他在屏幕范围(viewport)时该元素的位置并不受到定位影响(设置是top.left等属性无效),当该元素的位置将要移出偏移范围时,定位又会 ...

  3. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  4. PHPCMS V9开发文档

    内容模块 内容模块PC标签调用说明 模块名:content 模块提供的可用操作 操作名 说明 lists 内容数据列表 relation 内容相关文章 hits 内容数据点击排行榜 category ...

  5. Python+Selenium笔记(三):使用unittest

    #网络很慢可能会运行报错 (一)   前言 Selenium WebDriver是一个浏览器自动化测试的API集合.它提供了很多与浏览器自动化交互的特性,并且这些API主要是用于测试Web程序.如果仅 ...

  6. 使用Fiddler模拟客户端http响应

    在客户端开发中,常常需要对一些特殊情况做处理,比如404.503等,又比如服务返回错误数据等.而测试这些情况会比较麻烦,往往都是找开发人员配合修改代码,这样效率不高. 接触到Fiddler之后,这样的 ...

  7. 可选的binlog解析组件

    本文的mysql-binlog-connector-java:https://github.com/shyiko/mysql-binlog-connector-java 阿里的canal:https: ...

  8. 个人犯的一个golang routine错误

    这个其实不是错误,2个写法没有区别.-2015.11.22 认识golang也不少时间了,也做过几个项目.最近发现之前用golang写的一个服务,内存涨得比较快,一直没找出来原因来.今天把疑惑发到群里 ...

  9. yum/dnf/rpm 等 查看rpm 包安装路径 (fedora 中 pygtk 包内容安装到哪里了)

    有时候我们 使用 包管理工具,安装很方便,但我们还要能知道它们安装了什么文件,都把这些文件安装到哪里了? 我们以探究 pygtk 为例 在 fedora 28 之中 查找 pygtk: ➜ ~ rpm ...

  10. StringBuffer&StringBuilder类

    0. 说明 1. 总体说明 当对字符串进行修改的时候,需要使用 StringBuffer 和 StringBuilder 类. 和 String 类不同的是,StringBuffer 和 String ...