效果：

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. 通过get_FOO_display 查找模型中的choice值

    在django的models.py 中,我们定义了一些choices的元组,类似一些字典值,一般都是下拉框或者单多选框,例如 0对应男 1对应女等. class Area(models.Model): ...

  2. 【BZOJ4800】[CEOI2015 Day2]世界冰球锦标赛 （折半搜索）

    [CEOI2015 Day2]世界冰球锦标赛 题目描述 译自 CEOI2015 Day2 T1「Ice Hockey World Championship」 今年的世界冰球锦标赛在捷克举行.\(Bob ...

  3. Cboard 实现看板里面图表仪表盘之间的联动

    首先要了解Cboard的概念, 1.看板 2.图表 看Cborad的菜单知道了,首先先设计图表,可以展现未柱状图或者其它图片形式或者数据表格式.然后看板可以由多个图表组合而成. 需求如下: 看板包含两 ...

  4. 【MySQL】20个经典面试题

    转自:https://blog.csdn.net/suifenglie/article/details/78919045 Part1:经典题目 1.MySQL的复制原理以及流程 基本原理流程,3个线程 ...

  5. 包括ES6在内的数组操作（待更）

    下面是我对ES6和古老的JS(ES3)一些数组操作的总结,附带了一些我曾经用上的. map处有待更内容. 贴一下有借鉴的网站:https://segmentfault.com/a/1190000002 ...

  6. npm 修改源 pip 修改源

    npm修改源由于不可说原因,npm install时,速度总是不尽如人意,解决办法是修改npm的数据源npm config set registry https://registry.npm.taob ...

  7. Idea 软件使用快捷键归纳

    <1>CTRL+P   方法参数提示 <2>ctrl+/ 单行注释 <3>Ctrl+Alt+M  IDEA 重复代码快速重构(抽取重复代码快捷键) <4> ...

  8. window平台 php 安装 redis 扩展

    1.使用phpinfo() 函数查看PHP的版本信息 <?php phpinfo(); ?> 查看扩展文件版本(特别注意以php版本的 architecture 是x86还是64为准,不能 ...

  9. HDU - 4763 找出特殊规律的串

    在一个Text串中找出Pattern串E以满足EAEBE,A B可以是任意串 看一眼觉得woc好难,后来看一下样例AB为空也可以 找观察一下E既是前缀也是后缀,很容易联想到next 最优情况EEE,那 ...

  10. Unix或Linux中&、jobs、fg、bg等命令的使用方法

    [From] http://blog.sina.com.cn/nenutechnology fg.bg.jobs.&.ctrl + z都是跟系统任务有关的,虽然现在基本上不怎么需要用到这些命令 ...