【构思】

　　因为只需要的是两小时，所以时间直接写死，然后通过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. oracle 记录被另一个用户锁住

    第一步:查询处用户,被锁表名,sessionID select b.owner,b.object_name,l.session_id,l.locked_modefrom v$locked_object ...

  2. Codeforces round 1098

    Div1 530 感受到被Div1支配的恐惧了.jpg 真·一个题都不会.jpg(虽然T1是我智障 感受到被构造题支配的恐惧了.jpg A 直接树上贪心就行,是我写错了.jpg B 这个构造超级神仙有 ...

  3. BZOJ3676 APIO2014 回文串 Manacher、SA

    传送门 首先一个结论:串\(S\)中本质不同的回文串个数最多有\(|S|\)个 证明考虑以点\(i\)结尾的所有回文串,假设为\(S[l_1,i],S[l_2,i],...,S[l_k,i]\),其中 ...

  4. 在属性property做一些简单的验证

    开发C#的程序,写到属性property时,我们可以在Set方法中做一些简单的规则验证: 如下面,Insus.NET写一个Age属性,只允许用户输入10以内的数字: class AA { privat ...

  5. 同一个解决方案或有依赖关系的两个项目引用同名但不同版本的DLL

    问题描述 我们最近在使用Redis作Session的集中化,中间碰到了一个如下问题:我们有一些项目比较老,引用了NewtonJson的4.0.3.0版本的DLL,但是Redis提供的C#集成DLL引用 ...

  6. Luogu P1494 [国家集训队]小Z的袜子

    比较简单的莫队题,主要是为了熟练板子. 先考虑固定区间时我们怎么计算,假设区间\([l,r]\)内颜色为\(i\)的袜子有\(cnt_i\)只,那么对于颜色\(i\)来说,凑齐一双的情况个数为: \( ...

  7. KMeans算法分析以及实现

    KMeans KMeans是一种无监督学习聚类方法, 目的是发现数据中数据对象之间的关系,将数据进行分组,组内的相似性越大,组间的差别越大,则聚类效果越好. 无监督学习,也就是没有对应的标签,只有数据 ...

  8. 基于uFUN开发板的心率计（二）动态阈值算法获取心率值

    前言 上一篇文章:基于uFUN开发板的心率计(一)DMA方式获取传感器数据,介绍了如何获取PulseSensor心率传感器的电压值,并对硬件电路进行了计算分析.心率计,重要的是要获取到心率值,本篇文章 ...

  9. 使用 cron 定时任务实现 war 自动化发布

    autoRelease.sh #!/bin/sh /home/tomcat/bin/shutdown.sh echo "tomcat stoped" cd /home/tomcat ...

  10. CrackMe005-下篇 | 逆向破解分析 | 160个CrackMe（视频+图文）深度解析系列

    作者:逆向驿站微信公众号:逆向驿站知乎:逆向驿站 CrackMe005,上篇说了具体方法,下篇来发逆向分析过程,看看老夫是如何得到上篇的具体方法的! 准备 [环境和工具] win7/xp虚拟机环境 C ...