脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript刷新不重记的倒计时

JavaScript实现刷新不重记的倒计时

 更新时间：2016年08月10日 11:08:35   投稿：daisy  
网上关于JavaScript实现倒计时的文章有很多，但是一般都是刷新后会重新开始计时，可是我们有的时候会需要刷新却不重新计算的倒计时，这该怎么做呢？下面我们一起来看看这种倒计时怎么实现吧。

前言

JavaScript倒计时，实现起来不难，但是一刷新往往就重新计算了，如果要实现刷新不重计该如何做呢？

有这么几种思路，

     1：cookie

     2：本地缓存

     3：window.name ……

前两种比较容易理解，今天我来为大家实现使用window.name实现刷新不重计，代码如下： 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js倒计时-刷新不重计</title>
</head>
 
<body>
<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime;
if(window.name==''){ 
 maxtime = 1*60;
 }else{
 maxtime = window.name;
}
 
function CountDown(){
 if(maxtime>=0){
 minutes = Math.floor(maxtime/60);
 seconds = Math.floor(maxtime%60);
 msg = "距离考试结束还有"+minutes+"分"+seconds+"秒";
// document.all["timer"].innerHTML = msg;
 document.getElementById("timer").innerHTML = msg;
 if(maxtime == 5*60) alert('注意，还有5分钟!');
 --maxtime;
 window.name = maxtime; 
 }
 else{
 clearInterval(timer);
 alert("考试时间到，结束!");
 }
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer" style="color:red"></div> 
 
</body>
</html>

总结

好了，就这么实现了，很简单吧！以上就是关于JavaScript实现刷新不重记的倒计时的全部内容，这个功能在模拟考试中很实用，希望对大家有所帮助。

您可能感兴趣的文章:

相关文章

  • Javascript BOM学习小结(六)

    Javascript BOM学习小结(六)

    BOM：BrowserObjectModel,浏览器对象模型，提供JS中对浏览器的各种操作的对象，是JS应用中唯一没有相关标准的部分，这事BOM经常出现问题的所在，主要用于处理浏览器窗口与框架，浏览器特有的JS扩展也被默认为BOM的一部分，而各浏览器之间的公有对象就成了默认的标准
    2015-11-11
  • bootstrapvalidator之API学习教程

    bootstrapvalidator之API学习教程

    这篇文章为大家分享了bootstrapvalidator之API学习教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 基于JS递归函数细化认识及实用实例(推荐)

    基于JS递归函数细化认识及实用实例(推荐)

    下面小编就为大家带来一篇基于JS递归函数细化认识及实用实例(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 不用MOUSEMOVE也能滑动啊

    不用MOUSEMOVE也能滑动啊

    不用MOUSEMOVE也能滑动啊...
    2007-05-05
  • 完美实现js选项卡切换效果(二)

    完美实现js选项卡切换效果(二)

    这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果，通过设置定时器实现延时0.5s切换选项卡，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-03-03
  • mui js控制开关状态、修改switch开关的值方法

    mui js控制开关状态、修改switch开关的值方法

    今天小编就为大家分享一篇mui js控制开关状态、修改switch开关的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript中将变量转换为字符串的三种方法

    Javascript中将变量转换为字符串的三种方法

    这篇文章主要给大家介绍了关于Javascript中将变量转换为字符串的三种方法，这三种方法分别是：value.toString()、"" + value和String(value)，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧。
    2017-09-09
  • 中国象棋js代码,仅演示,未能真下

    中国象棋js代码,仅演示,未能真下

    2008-02-02
  • javascript 构建模块化开发过程解析

    javascript 构建模块化开发过程解析

    这篇文章主要介绍了javascript 构建模块化开发过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • JS实现页面打印（整体、局部）

    JS实现页面打印（整体、局部）

    本篇文章主要介绍了JS实现页面打印（整体、局部），小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论