【构思】

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

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

【步骤】

　　

  1. <html>
  2.     <head>
  3.         <title>2小时倒计时</title>
  4.         <style>
  5.             *{
  6.                 margin: 0;
  7.                 padding: 0;
  8.             }
  9.             .cutDown{
  10.                 width: 100%;
  11.                 height: 100%;
  12.                 background: url(2.jpg) no-repeat;
  13.                 background-size: 100%;
  14.                 text-align: center;
  15.                 color: #fff;
  16.                 font-size: 80px;
  17.                 font-weight: 100;
  18.                 font-family: monospace;
  19.                 position: absolute;
  20.                 bottom: 0px;
  21.             }
  22.         </style>
  23.     </head>
  24.     <body >
  25.         <div id="time" class="cutDown"></div>
  26.         <script>
  27.         window.onload = function(){
  28.             var time = {
  29.                 init: function() {
  30.                     var oTime=document.getElementById("time");
  31.                     var h='0' + 1;
  32.                     var m=59;
  33.                     var s=59;
  34.                     oTime.innerHTML="02 : 00 : 00";
  35.  
  36.                     //进行倒计时显示
  37.                     var time = setInterval(function(){
  38.                         --s;
  39.                         if(s<0){
  40.                             --m;
  41.                             s=59;
  42.                         }
  43.                         if(m<0){
  44.                             --h;
  45.                             m=59
  46.                         }
  47.                         if(h<0){
  48.                             s=0;
  49.                             m=0;
  50.                         }
  51.                     // 判断当时分秒小于10时补0
  52.                         function checkTime(i){
  53.                             if (i < 10) {
  54.                                 i = '0' + i
  55.                             }
  56.                             return i;
  57.                         }
  58.                         s = checkTime(s);
  59.                         m = checkTime(m);
  60.                         oTime.innerHTML=h+" : "+m+" : "+s;
  61.                     },1000);
  62.                 }
  63.             }
  64.             time.init();
  65.         }
  66.         </script>
  67.     </body>
  68. </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. nginx-haproxy-lvs功能和性能对比 nginx - max-fail + 调度算法

    优点(性能和功能两方面分析) 缺点 lvs 工作在4层,可以对http,MySQL等服务负载均衡.负责流量的分发,对io,cpu,mem的消耗少 功能比较少,没有正则匹配的功能 nginx 工作在7层 ...

  2. WPF 任务栏背景闪烁提醒

    原文:WPF 任务栏图标闪烁提醒   public static class FlashWindow { [DllImport("user32.dll")] [return: Ma ...

  3. 破解Zip加密文件常用的几种方法

    前言 在互联网的浪潮中,大家也许碰到过这种情况: 从网络上下载了一个zip文件,最后却发现它是用密码保护的,或者自己用密码加密了一个很重要zip文件,但是一段时间后忘记了密码,无法打开.这个时候,我们 ...

  4. Linux下针对服务器网卡流量和磁盘的监控脚本

    1)实时监控网卡流量的通用脚本: [root@ceph-node1 ~]# cat /root/net_monit.sh #!/bin/bash PATH=/bin:/usr/bin:/sbin:/u ...

  5. vue项目环境搭建

    安装node.js $ npm install -g vue-cli $ vue init webpack my-project ?Project name ?Project description ...

  6. B. Diagonal Walking v.2

    链接 [https://i.cnblogs.com/EditPosts.aspx?opt=1] 题意 二维平面从原点出发k步,要到达的点(x,y),每个位置可以往8个方位移动,问到达目的地最多可以走多 ...

  7. 回溯法解n皇后问题

    #include<bits/stdc++.h> using namespace std; int n,sum; int c[100]; void search(int cur){ if(c ...

  8. HanderBar

    对于java开发,涉及到页面展示时,比较主流的有两种解决方案: 1. struts2+vo+el表达式. 这种方式,重点不在于struts2,而是vo和el表达式,其基本思想是:根据页面需要的信息,构 ...

  9. Github以及推广

    非常抱歉,我忘记在这个博客上发一遍了,之前是我同学代发,而我忘记把链接给发过来... Github: http://www.cnblogs.com/case1/p/5060015.html 推广: h ...

  10. “数学口袋精灵”App的第三个Sprint计划----开发日记(第一天12.7~第十天12.16)

    “数学口袋精灵”第三个Sprint计划----第一天 项目进度: 基本完成一个小游戏,游戏具有:随机产生算式,判断对错功能.通过轻快的背景音乐,音效,给玩家提供一个良好的氛围.  任务分配: 冯美欣: ...