<html>
<head>
    <meta charset="UTF-8">
    <title>js简单时分秒倒计时</title>
</head>
<body onload="countTime()">
<div>
    <span id="_d">00</span>
    <span id="_h">00</span>
    <span id="_m">00</span>
    <span id="_s">00</span>
</div>
<script type="text/javascript">
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var str="2030/8/21 18:00:00";
        var endDate = new Date(str);
        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("_d").innerHTML = d+"天";
        document.getElementById("_h").innerHTML = h+"时";
        document.getElementById("_m").innerHTML = m+"分";
        document.getElementById("_s").innerHTML = s+"秒";
        //递归每秒调用countTime方法，显示动态时间效果
        setTimeout(countTime,1000);
    }
</script>
</body>
</html>

js倒计时demo 天/时/分/秒的更多相关文章

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

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

  2. js倒计时 手机休眠时 时间不进行减少

    http://www.111cn.net/wy/js-ajax/94218.htm 手机版网页js倒计时存在的问题与解决的方法 www.111cn.net 更新:2015-09-16 编辑:kp123 ...

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

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

  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. js计算两个时间差 天 时 分 秒 毫秒

    // 计算两个时间差 dateBegin 开始时间 function timeFn(dateBegin) { //如果时间格式是正确的,那下面这一步转化时间格式就可以不用了 var dateEnd = ...

  7. JS将秒转换为 天-时-分-秒

    记录一下,备忘.. function SecondToDate(msd) { var time =msd if (null != time && "" != tim ...

  8. js将当前时间格式化为年-月-日 时:分:秒

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

  9. Js 日期字符串分别截取 年 月 日 时 分 秒

    function shijiantime(times){ var timearr = times.replace(" ", ":").replace(/\:/g ...

随机推荐

  1. MNIST机器学习数据集

    介绍 在学习机器学习的时候,首当其冲的就是准备一份通用的数据集,方便与其他的算法进行比较.在这里,我写了一个用于加载MNIST数据集的方法,并将其进行封装,主要用于将MNIST数据集转换成numpy. ...

  2. mybatis入门截图四（订单商品数据模型-懒加载-缓存）

    <!-- 延迟加载的resultMap --> <resultMap type="cn.itcast.mybatis.po.Orders" id="Or ...

  3. plsql里面执行正常，java运行报ORA-01722: 无效数字

    贴代码: <select id="getInfo" parameterClass="java.util.HashMap" resultClass=&quo ...

  4. Linux常用命令last的使用方法详解

    http://www.jb51.net/article/120140.htm 最近在学习linux命令,学习到了last命令,发现很多同学对last命令不是很熟悉,last命令的功能列出目前与过去登入 ...

  5. nodejs-基础大杂烩（待整理）

    优点:安装简易,能自动配置环境变量 缺点:更新和更换版本需重新安装(这个可以用包管理器解决,不是问题) 高手推荐使用开源的NVM包管理器来更新和安装node,可能这个包在linux平台上比较好用吧 g ...

  6. tableView计算动态行高的总结

    研究tableView怎么计算动态行高研究了两天一直还不太会,今天最终做出来了想要的效果. 首先.我在网上搜集了非常多资料,各种大神的总结,然后開始看.研究.试验,基本思路都是一样的. 1.一定要将l ...

  7. Eclipse开发C/C++程序的MinGw配置

    环境变量设置: a.鼠标右击桌面"计算机"(WindowsXp是"我的电脑")->"属性" b.WindowsXP时,在新弹出的属性窗 ...

  8. 探索Android调用系统的分享功能

    非常多的应用为了应用的推广和传播都会使用"分享"的功能,点击分享button.就能将想要分享的内容或者图片分享至QQ空间.微博.微信朋友圈等实现了分享功能的应用.这篇文章主要是为了 ...

  9. Educational Codeforces Round 12 E. Beautiful Subarrays trie求两异或值大于等于k对数

    E. Beautiful Subarrays   One day, ZS the Coder wrote down an array of integers a with elements a1,   ...

  10. JSTL中的常用EL函数（fn:contains(str,subStr)）

    转自:https://blog.csdn.net/u012843873/article/details/53289238 ① fn:toLowerCase ④fn:length fn:length函数 ...