【构思】

　　因为只需要的是两小时，所以时间直接写死，然后通过setInterval每1000ms对时间进行减1操作

　　前期未考虑到当时分秒小于10的状态，所以后面又加上了一个checkTime（）来进行限制，小时则直接在变量中加了。

【步骤】

　　

<html>

    <head>

        <title>2小时倒计时</title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            .cutDown{

                width: 100%;

                height: 100%;

                background: url(2.jpg) no-repeat;

                background-size: 100%;

                text-align: center;

                color: #fff;

                font-size: 80px;

                font-weight: 100;

                font-family: monospace;

                position: absolute;

                bottom: 0px;

            }

        </style>

    </head>

    <body >

        <div id="time" class="cutDown"></div>

        <script>

        window.onload = function(){

            var time = {

                init: function() {

                    var oTime=document.getElementById("time");

                    var h='0' + 1;

                    var m=59;

                    var s=59;

                    oTime.innerHTML="02 : 00 : 00";

                    //进行倒计时显示

                    var time = setInterval(function(){

                        --s;

                        if(s<0){

                            --m;

                            s=59;

                        }

                        if(m<0){

                            --h;

                            m=59

                        }

                        if(h<0){

                            s=0;

                            m=0;

                        }

                    // 判断当时分秒小于10时补0

                        function checkTime(i){

                            if (i < 10) {

                                i = '0' + i

                            }

                            return i;

                        }

                        s = checkTime(s);

                        m = checkTime(m);

                        oTime.innerHTML=h+" : "+m+" : "+s;

                    },1000);

                }

            }

            time.init();

        }

        </script>

    </body>

</html>

　　

　　

JavaScript实现两小时倒计时的更多相关文章

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

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

  2. VS Code - Debugger for Chrome调试JavaScript的两种方式

    VS Code - Debugger for Chrome调试JavaScript的两种方式 最近由于出差的缘故,博客写的不是很多,一直想写一篇VS Code - Debugger for Chrom ...

  3. javascript使用两个逻辑非运算符(!!)的原因

    javascript使用两个逻辑非运算符(!!)的原因: 在有些代码中可能大家可能会注意到有些地方使用了两个逻辑非运算符,第一感觉就是没有必要,比如操作数是true的话,使用两个逻辑非的返回值还是tr ...

  4. javascript保留两位小数

      原文地址http://blog.csdn.net/he20101020/article/details/8503308   <script type="text/javascrip ...

  5. JavaScript获取两个时间的时间差

    <html><head><title>JavaScript计算两个时间差</title><meta http-equiv="conten ...

  6. Uber选拔专车司机:五年以上驾驶经验 两小时视频培训

    摘要:说起当时下流行打车软件Uber的司机,还得从春节前在上海一次打车说起.那几天,记者在上海某商场逛到打烊时间,大包小包拎着袋子根本腾不出手拦出租车,而商场门口的出租车临时停靠点更是挤满“血拼”而归 ...

  7. javascript保留两位

    原文:javascript保留两位 //保留两位小数 //功能:将浮点数四舍五入,取小数点后2位 function toDecimal(x) { var f = parseFloat(x); if ( ...

  8. JavaScript比较两个对象的值是否相等

    JavaScript比较两个对象的值是否相等 function isObjectValueEqual(a, b) { var aProps = Object.getOwnPropertyNames(a ...

  9. 怎样在两小时内搞定 OpenStack 部署？（转）

    怎样在两小时内搞定 OpenStack 部署? OpenStack的安装是一个难题,组件众多,非常麻烦.如果手工部署OpenStack,可能需要好几天,使用RDO,就是几个命令,再加一两个小时的等待. ...

随机推荐

  1. [05] 动态SQL

    MyBatis的强大特性之一就是它的动态SQL,它可以根据不同的条件动态地组成SQL语句进行执行.为此,MyBatis提供了一系列强大的表达式,本章将就此进行学习,主要内容直接参考的是官方文档< ...

  2. SQL Server 索引中include的魅力（具有包含性列的索引）（转载）

    开文之前首先要讲讲几个概念 [覆盖查询] 当索引包含查询引用的所有列时,它通常称为“覆盖查询”.  [索引覆盖] 如果返回的数据列就包含于索引的键值中,或者包含于索引的键值+聚集索引的键值中,那么就不 ...

  3. VMware Ubuntu蓝屏问题解决

    解决方法: 问题分析启动 Ubuntu 可以进入登录界面,说明系统是可以运行起来的.没有发生大块的核心数据损坏,linux 系统一般都可以修复,一定要淡定.于是开始放狗(google)搜索.“VMwa ...

  4. Luogu P1546 最短网络 Agri-Net

    其实这道题根本没必要写,但为了测试vector+堆优化的Prim试一发. 再次觉得Prim和Dijkstra很像,堆优化版本也差不多. 和Dijkstra一样,Prim也是在之前的dis点中选取一个最 ...

  5. VS2015 搭建 Asp.net core 开发环境

    1.首先你得装个vs2015 并且保证已经升级至 update3及以上(此处附上一个vs2015带up3的下载链接: ed2k://|file|cn_visual_studio_enterprise_ ...

  6. @Pointcut的用法

    在Spring 2.0中,Pointcut的定义包括两个部分:Pointcut表示式(expression)和Pointcut签名(signature).让我们先看看execution表示式的格式: ...

  7. Ceph分布式存储-原理介绍及简单部署

    1)Ceph简单概述Ceph是一个分布式存储系统,诞生于2004年,最早致力于开发下一代高性能分布式文件系统的项目.Ceph源码下载:http://ceph.com/download/.随着云计算的发 ...

  8. Nginx中防盗链（下载防盗链和图片防盗链）及图片访问地址操作记录

    日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...

  9. Wannafly挑战赛25 B.面积并

    链接 [https://www.nowcoder.com/acm/contest/197/B] 分析 特殊优先考虑 首先考虑r>=l这种情况就是圆的面积了 第二就是r<=内切圆的半径,这个 ...

  10. linux及安全第五周总结

    给MenuOS增加time和time-asm命令 中间过程已省略了,我们所做的只是将menu更新 具体命令如下 rm menu -rf 强制删除 git clone http://github.com ...