倒计时是web开发中比较常用的，以下列出常用的几个倒计时方法，仅供参考：

一 ：页面倒计时 原理一般都是通过 setTimeout 或 setInterval 函数实现，下面是一个最简单的倒计时

<script type="text/javascript">
var second=10;
var timer;
function change()
{
  second--;
 
 if(second>-1)
 {
  document.getElementById("second").innerHTML=second;
  timer = setTimeout('change()',1000);//调用自身实现
 }
 else
 {
   clearTimeout(timer);
 }
}
timer = setTimeout('change()',1000);
</script>

二：用于页面显示服务器时间，或本地时间(每秒钟读取当前时间再以指定的格式显示)

<script type=text/javascript>
var now = new Date();
function CurentTime(){
    var mm = now.getMinutes();  
    var ss = now.getTime() % 60000;
    ss = (ss - (ss % 1000)) / 1000;  
    var clock = now.getHours() +':';  
    if (mm < 10) clock += '0'; 
    clock += mm+':';  
    if (ss < 10) clock += '0';  
    return(clock + ss); 
}  
function showTime(){  
    document.getElementById("clock").innerHTML = now.getYear()+"."+(now.getMonth()+1)+"."+now.getDate()+"    "+ CurentTime();now.setSeconds(now.getSeconds()+1);} 
    
 window.onload=start;
 function start(){
    setInterval(showTime,1000);   
}

</script>
现在时间：<body><span id="clock"></span></body>

三:由玩家提交数据的倒计时，或者是服务器返回一个剩余的秒数，比如玩家升级了某个建筑，需要2个小时，
前台从2*3600开始计时，同时保存当前数据，玩家下次刷新页面时便读取剩余的秒数。下面这个倒计时是 从 游戏<中国故事>中改写的，
这个游戏中有大量的倒计时，函数event_timer 实际有2个参数，他将每个建筑或单位标志一个唯一的id来计时的 
<html>
  <script type="text/javascript">
  function start_event_timer(){
    document.getElementById('showTime').style.display = '';    
    var val =document.getElementById('val_text').value;
    event_timer(val);
   }
  //开始计时
  function event_timer(time_remain) {  
     //由页面提交的时间与服务器时间一般都有2~4秒的差值
     rt = parseInt(time_remain) + 4;s
        var eventid=document.getElementById('event_time_remain');
    var senond_remain=document.getElementById('senond_remain');
    if (rt == 0) {  
       alert("timeover");
       window.location.reload();
    }else {   
       eventid.innerHTML = time_format(rt);
       senond_remain.innerHTML = rt;
       time_remain = time_remain - 1;
       setTimeout("event_timer('" + time_remain + "')",1000); 
    }
}

// 以hh:mm:ss格式化时间，可以根据需要 定义格式 
function time_format(s) {
var t;
if(s > -1){
    hour = Math.floor(s/3600);
    min = Math.floor(s/60) % 60;
    sec = s % 60;
    day = parseInt(hour / 24);
    if (day > 0) {
        hour = hour - 24 * day;
        t = day + "天," + hour + ":";
        }
    else t = hour + ":";
    
    if(min < 10){t += "0";}
        t += min + ":";
    if(sec < 10){t += "0";}
        t += sec;}
else
    {t = "0:00:0x";}
return t;
}
  </script>
  <body>
   <center>
   输入计时的秒数：<input type="text" id="val_text" size="5"/>
<input type ="button" onclick="start_event_timer();" value ="start"/>
<div style="display:none" id="showTime">
   <p class="event_class" style="color: blue;">倒计时: <span id="event_time_remain"></span>
  &nbsp; 剩余<span id="senond_remain"></span>秒
</div>
</center>
  </body>
</html>

四，网上的一个无刷新的倒计时，这个所谓的'无刷新'，就是将剩余的秒数保存到 浏览器对象
 window.name中，只要窗口未关闭，值就在。个人感觉没有实际的用途，刷新就是要重新读服务器数据，实时更新的
不是在做静态页面...

<SCRIPT LANGUAGE="JavaScript">
<!--
var maxtime;
alert(window.name);
if(window.name==''){
maxtime = 60*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;
--maxtime;
window.name = maxtime;
}
else{
clearInterval(timer);
alert("time over");
}
}
timer = setInterval("CountDown()",1000);
//-->
</SCRIPT>
<div id="timer" style="color:red"> </div>

[JavaScript]常用的页面倒计时的更多相关文章

  1. Javascript之实现页面倒计时效果

    本文将从需求实现的角度,逐步讲解如何在页面上实现倒计时效果,其中部分涉及到的知识会做拓展讲解,最后将所有代码封装,适用于不同情况下倒计时功能的实现. 效果图 一.分析需求 要实现倒计时效果,可拆解为以 ...

  2. javascript 常用获取页面宽高信息 API

    在页面的构建中 常常会需要获取页面的一些宽高信息,例如实现 惰性加载图片 需要获取页面的可见区域高度 和 已滚动区域的高度,以判断图片所在位置是否可见来决定加载图片的时间, 花点时间整理了一下,获取页 ...

  3. 第二篇、JavaScript常用的API

    下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...

  4. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  5. Javascript 常用函数【3】

    jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() { if ($(t ...

  6. 【javascript】javascript常用函数大全

    javascript函数一共可分为五类:   •常规函数   •数组函数   •日期函数   •数学函数   •字符串函数   1.常规函数   javascript常规函数包括以下9个函数:   ( ...

  7. 页面倒计时跳转页面效果，js倒计时效果

    页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...

  8. 【前端】javaScript 常用技巧总结

    javaScript 常用技巧总结 1.  彻底屏蔽鼠标右键  oncontextmenu="window.event.returnValue=false" <table b ...

  9. javascript 常用手势 分析

    javascript 常用手势, 个人觉得有3个 tap,swipe(swipeLeft,swipeRight,swipeTop,swipeRight),hold tap 是轻击 判断的原则是,在to ...

随机推荐

  1. grub的三种安装方式

    1.install命令 install: install [--stage2=STAGE2_FILE] [--force-lba] STAGE1 [d] DEVICE STAGE2 [ADDR] [p ...

  2. cf #363 a

    A. Launch of C time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...

  3. 使用Hyper-V安装Ubuntu16.04 Server 网络配置

    由于最近在研究Docker, 于是需要用到虚拟机,安装Ubuntu 16.04到Hyper-V并部署Docker.这个过程中填平了几个小坑,为了大家以后遇到类似情况节省时间,我将这几个小坑的问题和解决 ...

  4. Linux Linux程序练习三

    /* index1 = 45 index2 = 36 index3 = 231 index4 = 43 index5 = 100 index6 = 123 index7 = 51 * * 通过读取读取 ...

  5. Spring MVC属性方法名称解析器

    以下示例显示如何使用Spring Web MVC框架来实现多动作控制器的属性方法名称解析器. MultiActionController类可在单个控制器中分别映射多个URL到对应的方法. 所下所示配置 ...

  6. onload 和 onunload 事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发. onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本. onload 和 onunl ...

  7. SourceInsight 不断无响应的有关问题

    SourceInsight 不断无响应的问题 sourceinsight3使用过程中,如果是大工程,总是出现抽筋的现象,CPU使用.内存占用都很高,阅读android源码不断出现无响应.后发现主要是因 ...

  8. window linux IPC ftok BY_HANDLE_FILE_INFORMATION

    看这题目就很乱,心情当然也是不怎么美好了.前一段时间做了一个项目,AIX(Unix的一种)中的一个系统向WINDOWS移植,开发环境由IBM的C/C++(叫什么忘记了,好像是xlC)变为VC++. 这 ...

  9. Python简单分布式爬虫

    分布式爬虫采用主从模式.主从模式是指由一台主机作为控制节点,负责管理所有运行网络爬虫的主机(url管理器,数据存储器,控制调度器),爬虫只需要从控制节点哪里接收任务,并把新生成任务提交给控制节点.此次 ...

  10. IndiaHacks 2016 - Online Edition (CF) . D

    这题思路很简单,二分m,求最大流是否大于等于x. 但是比赛过程中大部分的代码都被hack了... 精度问题,和流量可能超int 关于精度问题,这题真是提醒的到位,如果是先用二分将精度控制在10^-8左 ...