效果：

javascript：

    <script type="text/javascript">

        function countTime() {

            //获取当前时间

            var date = new Date();

            var now = date.getTime();

            //设置截止时间

            var endDate = new Date("2018-10-25 00:00:00");

            var end = endDate.getTime();

            //时间差

            var differTime = end - now;

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

            var h, m, s;

            if (differTime >= 0) {

                h = Math.floor(differTime / 1000 / 60 / 60);

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

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

                h = h < 10 ? ("0" + h) : h;

                m = m < 10 ? ("0" + m) : m;

                s = s < 10 ? ("0" + s) : s;

                document.getElementById("_h").innerHTML = h + "时";

                document.getElementById("_m").innerHTML = m + "分";

                document.getElementById("_s").innerHTML = s + "秒";

                setTimeout(countTime, 1000);

            } else {

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

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

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

            }

        }

    </script>

HTML:　

<body onload="countTime()">

    <div class="timer">

        <span id="_h"></span>

        <span id="_m"></span>

        <span id="_s"></span>

    </div>

</body>

　　

js简单时分秒倒计时的更多相关文章

  1. 时分秒倒计时的js实现

    示例: 剩余天数:08天02事02分02秒 html代码: <div id="timer" data-timer="20160628140203" sty ...

  2. 时间格式的转化 vue与js 年月日 时分秒

    首先使用原生转化的方法 第一种 //时间转换 dateStr(d, sign) { //如果没有传递符号,给一个默认的符号 if (!sign) { sign = '-' } //获取d里面年月日时分 ...

  3. js实现时分秒毫秒计时器

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. android 利用CountDownTimer实现时分秒倒计时效果

    https://blog.csdn.net/mrzhao_perfectcode/article/details/81289578

  5. js 倒计时功能，获取当前时间的年月日，时分秒

    一.实现当前时间到指定截止时间的倒计时功能 <html> <head> <title>TEST</title> </head> <bo ...

  6. (转)js实现倒计时效果(年月日时分秒)

    原文链接:http://mengqing.org/archives/js-countdown.html 之前做的活动页面很多都用到了倒计时功能,所以整理下下次直接用.(用的是张鑫旭写的一个倒计时,稍作 ...

  7. JS简单的倒计时(代码优化)

    倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ funct ...

  8. JS获取年月日时分秒

    var d = new Date(); ) + "-" + d.getDate() + " " + d.getHours() + ":" + ...

  9. JS日历控件优化(增加时分秒)

    JS日历控件优化      在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时只支持 年月日 的日历控件,现在优化如下:      1. 在原基础上 支持 yyyy ...

随机推荐

  1. 再谈VS2010编译更高平台vs2012（v110），vs2015（v140）的objectARX程序

    前段时间我贴了一篇vs2010批量编译vc6~vs2008的ARX版本,实际上那一篇是我在研究vs2010编译v110,v140平台的附带收获,正应了那句话,有心栽花花不开,无心插柳柳成荫,因为vs2 ...

  2. Flink学习笔记：Operators之Process Function

    本文为<Flink大数据项目实战>学习笔记,想通过视频系统学习Flink这个最火爆的大数据计算框架的同学,推荐学习课程: Flink大数据项目实战:http://t.cn/EJtKhaz ...

  3. Navicat Premium 12.1.12.0破解版激活

    声明:本文所提供的所有软件均来自于互联网,个人存放在此作为备用,以备将来不时之需,同时作为大家的分享和学习成果,仅供个人研究和学习使用,请勿用于商业用途,下载后请于24小时内删除,请支持正版! 附:二 ...

  4. What Goes Up UVA - 481 LIS+打印路径 【模板】

    打印严格上升子序列: #include<iostream> #include<cstdio> #include<algorithm> #include<cst ...

  5. Kibana6.x.x---编译源码，在执行优化任务时，报警告

    wangxuan@tryman:/home/kibana_git/kibana6.2.2$ yarn release yarn run v1.5.1 $ grunt release Running & ...

  6. POJ_3090 Visible Lattice Points 【欧拉函数 + 递推】

    一.题目 A lattice point (x, y) in the first quadrant (x and y are integers greater than or equal to 0), ...

  7. 格子刷油漆（dp）-----------蓝桥备战系列

    标题:格子刷油漆 X国的一段古城墙的顶端可以看成 2*N个格子组成的矩形(如图1所示),现需要把这些格子刷上保护漆. 你可以从任意一个格子刷起,刷完一格,可以移动到和它相邻的格子(对角相邻也算数),但 ...

  8. 2018南京icpc现场赛心得

    第一次参加icpc的比赛,也是第一块奖牌,虽然只是铜,但其实打的已经很好了,稍微差一点就可以摸银了. 之前参加省赛,成为那次比赛我校唯一一个没拿奖的队伍,其实还是一直都有一些心结的,而这段时间和新的队 ...

  9. 青蛙的约会----POJ1061

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 133905   Accepted: 29707 Descript ...

  10. gitlab 日常运维命令

    2018-10-24 gitlab查看版本 cat /opt/gitlab/embedded/service/gitlab-rails/VERSION 查看gitlab服务状态命令 gitlab-ct ...