计数时：

结束时：

示例：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome">

     <title>活动倒计时示例</title>

 </head>

 <body>

     <div class="time">

         <span id="day">00</span>

         <span id="hour">00</span>

         <span id="month">00</span>

         <span id="second">00</span>

     </div>

     <script type="text/javascript">

         (function () {

             // 页面加载完

             window.onload = function () {

                 countTime();

             }

             // 小于9则添加前缀：01\02....

             function checkTime(_zero) {

                 return _zero > 9 ? _zero : '0' + _zero;

             }

             function countTime() {

                 // 截止时间. 年、月、日 时、分、秒 - 设置结束时间后 - 自动关闭计时器.

                 var dateStr = "2018/8/14 08:00:00";

                 //获取当前时间

                 var date = new Date();

                 var now = date.getTime();

                 //设置截止时间

                 var endDate = new Date(dateStr);

                 var end = endDate.getTime();

                 //时间差

                 var leftTime = end - now;

                 //定义变量 d,h,m,s保存倒计时的时间

                 var d, h, m, s;

                 if (leftTime >= 0) {

                     // 计天、时、分、秒

                     d = Math.floor(leftTime / 1000 / 60 / 60 / 24);

                     h = Math.floor(leftTime / 1000 / 60 / 60 % 24);

                     m = Math.floor(leftTime / 1000 / 60 % 60);

                     s = Math.floor(leftTime / 1000 % 60);

                     //将倒计时赋值到div中

                     document.getElementById("day").innerHTML = d > 9 ? d + '天' : checkTime(d) + "天";

                     document.getElementById("hour").innerHTML = h > 9 ? h + '时' : checkTime(h) + "时";

                     document.getElementById("month").innerHTML = m > 9 ? m + '分' : checkTime(m) + "分";

                     document.getElementById("second").innerHTML = s > 9 ? s + '秒' : checkTime(s) + "秒";

                     //递归每秒调用countTime方法，显示动态时间效果

                     setTimeout(countTime, 1000);

                 } else {

                     document.getElementById("day").innerHTML = "00天";

                     document.getElementById("hour").innerHTML = "00时";

                     document.getElementById("month").innerHTML = "00分";

                     document.getElementById("second").innerHTML = "00秒";

                 }

             }

         })();

     </script>

 </body>

 </html>

javascript - 活动倒计时(天、时、分、秒)的更多相关文章

  1. JS实现倒计时(天数,时,分,秒)

    <!DOCTYPE html> <html> <head>   <meta charset="utf-8" >   <titl ...

  2. jQuery UI Datepicker&Datetimepicker添加 时-分-秒 并且,判断

    jQuery UI Datepicker时间(年-月-日) 相关代码: <input type="text" value="" name="ad ...

  3. js倒计时demo 天/时/分/秒

    <html><head> <meta charset="UTF-8"> <title>js简单时分秒倒计时</title> ...

  4. 网页倒计时，动态显示"××年还剩××天××时××分××秒"

    var target = document.getElementById('target'); function getTimeString(){ // 要计算任意两个日期的时间差只要修改curren ...

  5. JavaScript/js把秒或者毫秒换算成xx-xx-xx 时-分-秒的形式

    function MillisecondToDate(msd) { // var time = parseFloat(msd) / 1000; var time=msd; if (null != ti ...

  6. 【转】使用DateFormat把时间长度格式化为"时:分:秒"格式--不错

    原文网址:http://ssd910.blog.163.com/blog/static/238767972010112214114201/ 经常在系统中显示时间长度,基本上每次都是显示秒数,客户觉得按 ...

  7. Java 获取年 月 日 时 分 秒

    /** * 英文简写(默认)如:2010-12-01 */ public static String FORMAT_SHORT = "yyyy-MM-dd"; /** * 英文全称 ...

  8. oracle截取时间的年/月/日/时/分/秒

    修改日期格式为年月日时分秒: alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss';select to_char(sysdate,'yyy ...

  9. ASP.NET C# 日期 时间 年 月 日 时 分 秒 格式及转换（转自happymagic的专栏）

    在平时编码中,经常要把日期转换成各种各样的形式输出或保持,今天专门做了个测试,发现DateTime的ToString()方法居然有这么多的表现形式,和大家一起分享. DateTime time=Dat ...

随机推荐

  1. C/C++ 运算符 & | 运算

    C/C++中的“按位或 规则: 1|1=1 1|0=1 0|1=1 0|0=0 按位或运算 按位或运算符“|”是双目运算符.其功能是参与运算的两数各对应的二进位(也就是最后一位)相或.只要对应的二个二 ...

  2. jsp的九大内置对象及EL表达式的隐含对象

    九大内置对象: request         request对象具有请求域,即完成客户端的请求之前,该对象一直有效. response       response对象具有页面作用域,即访问一个页面 ...

  3. bzoj 4765 普通计算姬 dfs序 + 分块

    题目链接 Description "奋战三星期,造台计算机".小G响应号召,花了三小时造了台普通计算姬.普通计算姬比普通计算机要厉害一些.普通计算机能计算数列区间和,而普通计算姬能 ...

  4. 150.Evaluate Reverse Polish Notation---逆波兰式求值

    题目链接 题目大意:计算逆波兰表达式的值. 法一:stack,用stack存数,遇到操作符,则运算.代码如下(耗时12ms): public int evalRPN(String[] tokens) ...

  5. 8.OpenStack网络组件

    添加网络组件 安装和配置控制器节点 创建数据库 mysql -uroot -ptoyo123 CREATE DATABASE neutron; GRANT ALL PRIVILEGES ON neut ...

  6. Centos 6.3Yum安装NodeJS

    1. 添加epel源: (1)查看机器位数 file /sbin/init 或者 file /bin/ls (2)X64: rpm -ivh http://download.fedoraproject ...

  7. 在C#中调用格式工厂进行任意视频格式到FLV的转换

    1.下载安装格式工厂和完美解码器 2.运行格式工厂,转换一个RMVB到FLV,注意找个大点的,使时间长一些.防止在未执行步骤3时就结束了 3.在进程中查看某个进程的命令行参数是什么? wmic pro ...

  8. [BZOJ2738]矩阵乘法 整体二分+二维树状数组

    2738: 矩阵乘法 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 1643  Solved: 715[Submit][Status][Discuss ...

  9. 牛客网练习赛18 A 【数论/整数划分得到乘积最大/快速乘】

    链接:https://www.nowcoder.com/acm/contest/110/A 来源:牛客网 题目描述 这题要你回答T个询问,给你一个正整数S,若有若干个正整数的和为S,则这若干的数的乘积 ...

  10. Codeforces 1029 E. Tree with Small Distances（树上dp）

    题目直通车:http://codeforces.com/problemset/problem/1029/E 思路大意:在树上做dp,依次更新ar数组,ar[i]表示以i为根节点的子树对答案的最小贡献值 ...