一年前，在网上找到的例子，现在已经找不到出处，对不住原作者，请原谅。修改了一下，在刷新页面的情况下，倒计时不重来。

没有任何样式，纯文字倒计时。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>倒计时</title>

</head>

<body>

<label id="time"></label>

<script>

    function CountDown() {

        var localtime=sessionStorage.getItem('time');

        if(localtime){

            if (localtime >= 0) {

                hours=Math.floor(localtime/3600);

                minutes = Math.floor((localtime-hours*3600)/ 60);

                seconds = Math.floor((localtime-hours*3600) % 60);

                hours = hours >= 10 ? hours : '0' + hours;

                minutes = minutes >= 10 ? minutes : '0' + minutes;

                seconds = seconds >= 10 ? seconds : '0' + seconds;

                msg = "距离结束还有"+ hours + "时" + minutes + "分" + seconds + "秒";

                document.getElementById('time').innerHTML = msg;

                if (localtime == 5*60) alert('注意，还有5分钟!');

                --localtime;

                sessionStorage.setItem('time',localtime)

            }

            else {

                document.getElementById('time').innerHTML = "时间到，结束!";

            }

        }else{

            var maxtime = 90*60; //一个半小时，按秒计算，自己调整!

            if (maxtime >= 0) {

                hours=Math.floor(maxtime/3600);

                minutes = Math.floor((maxtime-hours*3600)/ 60);

                seconds = Math.floor((maxtime-hours*3600) % 60);

                hours = hours >= 10 ? hours : '0' + hours;

                minutes = minutes >= 10 ? minutes : '0' + minutes;

                seconds = seconds >= 10 ? seconds : '0' + seconds;

                msg = "距离结束还有"+ hours + "时" + minutes + "分" + seconds + "秒";

                document.getElementById('time').innerHTML = msg;

                --maxtime;

                sessionStorage.setItem('time',maxtime)

            }

            else {

                document.getElementById('time').innerHTML = "时间到，结束!";

            }

        }

    }

    timer = setInterval("CountDown()", 1000);

</script>

</body>

</html>

JavaScript 的倒计时的更多相关文章

  1. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  2. 用Javascript 实现倒计时

    用Javascript 实现倒计时<!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  3. javascript 时间倒计时

    新加入一个项目的集中开发,遇到一个需要倒计时的需求,经过测试,有以下几种方案,分享出来: 方案一: 页面Html: <span style="font-size:18px;" ...

  4. javascript实现倒计时

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. Javascript实现倒计时和根据某时间开始计算时间

    JavaScript 代码 <script type="text/javascript"> var time_start = new Date('2018','7',' ...

  6. javascript 时间倒计时效果

    <div id="divdown1"></div> <script language="javascript" type=&quo ...

  7. javascript - 活动倒计时(天、时、分、秒)

    计数时: 结束时: 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  8. Javascript 实现倒计时效果

    代码来自于网上. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. JavaScript写倒计时

    在网页中,特别是电商网站中,倒计时的出现频率很高,接下来给大家介绍一下怎么用JavaScript写一个倒计时.代码如下: 首先我们通过Date构造函数的方法创建一个倒计时的结束的时间.并将其转换为毫秒 ...

随机推荐

  1. OpenERP ORM 对象方法列表

    OpenERP对象支持的字段类型有,基础类型:char, text, boolean, integer, float, date, time, datetime, binary:复杂类型:select ...

  2. jqgrid no url reset

    如果发现 jqgrid 在运行中出现次错误,可能是以下原因 $('#@(ViewBag.tabcid + "_grid")').jqGrid('navGrid', '#@(View ...

  3. ssh项目部署到weblogic中问题总结

    部署到weblogic还是比较费劲的 ,不过基本上问题全是由于classloader顺序的问题引起的. 首先在web-inf底下添加weblogic.xml文件如下 <?xml version= ...

  4. Twentydaysgone

    这个暑假,在学校呆了一个月,考了两次科目二,被驾校坑了五百块,四级又挂了,段位差点掉到白银 参加二十多天工作室的培训,学长直接带着做itheima的某某安全卫士,跟着视频也迷迷瞪瞪敲完了代码,一知半解 ...

  5. struts2上传图片的全过程

    struts2上传图片的过程 1.写一个上传的jsp页面upload_image.jsp,内容如下:<body><center>    <font color=" ...

  6. AnjularJS异步编程 Promise和$q

    Promise,是一种异步处理模式. js代码的函数嵌套会使得程序执行异步代码时很难调试.因为多重嵌套的函数无法确定何时触发回调. 如: funA(arg1,arg2,function(){ func ...

  7. 2016 年 50 个最佳的轻量级 JavaScript 框架和库

    作者:IT程序狮链接:https://zhuanlan.zhihu.com/p/24598210来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 回顾今年已发布的 JS ...

  8. Windows 10家庭版共享打印机

    原文地址:http://blog.csdn.net/Purpleendurer/article/details/50498788P.s. 原文太罗嗦,简化了一下~ 启用Guest账户 按Win+X,从 ...

  9. .net web 小基累

    获取当前网站的根目录:HttpContext.Current.Request.PhysicalApplicationPath+“Content”

  10. SQL CREATE TABLE 语句\SQL 约束 (Constraints)\SQL NOT NULL 约束\SQL UNIQUE 约束

    CREATE TABLE 语句 CREATE TABLE 语句用于创建数据库中的表. SQL CREATE TABLE 语法 CREATE TABLE 表名称 ( 列名称1 数据类型, 列名称2 数据 ...