zoukankan      html  css  js  c++  java
  • js 倒计时Demo

    作者:李力
    链接:http://www.zhihu.com/question/28896402/answer/42517147
    来源:知乎
    著作权归作者所有,转载请联系作者获得授权。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <style>
    body{
    text-align: center;
    }
    div.wrapper{
    display: inline-block;
    }
    </style>
    </head>
    <body>
    <div class="wrapper">
    <h1>距离2016年9月28日中午12点还有:</h1>
    <span id="less_day"></span>天
    <span id="less_hour"></span>时
    <span id="less_minutes"></span>分
    <span id="less_seconds"></span>秒
    </div>
    <script>
    setInterval("timer()",1000); // 每隔1S执行一次
    function timer(){
    var ts = (new Date(2016, 8, 28, 12, 0, 0)) - (new Date()); //设置目标时间,并计算剩余的毫秒数

    var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10); //计算剩余天数
    var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10); //计算剩余小时
    var mm = parseInt(ts / 1000 / 60 % 60, 10); //计算剩余分钟
    var ss = parseInt((ts / 1000 ) % 60 , 10); //秒数

    //为了美观,在剩余时间的数字小于10时转换为0X
    dd = checkTime(dd);
    hh = checkTime(hh);
    mm = checkTime(mm);
    ss = checkTime(ss);

    //重写数字
    $("#less_day").html(dd);
    $("#less_hour").html(hh);
    $("#less_minutes").html(mm);
    $("#less_seconds").html(ss);
    }

    ////为了美观,在剩余时间的数字小于10时转换为0X
    function checkTime(i){
    if (i < 10) {
    i = "0" + i;
    }
    return i;
    }

    </script>
    </body>
    </html>

  • 相关阅读:
    一个ball例程带你进入 Halcon 世界
    新公民读本
    open_window()到底做了什么?
    duilib学习领悟(4)
    duilib学习领悟(3)
    duilib学习领悟(2)
    通过Vue路由传参的两种方式及Vue组件中接收参数的方式
    彻底研透javascript中的对象及面向对象编程
    thinkphp5中使用phpmailer实现发送邮件功能
    小程序和ThinkPHP5结合实现登录状态(含代码)
  • 原文地址:https://www.cnblogs.com/zhongshenggen/p/5915879.html
Copyright © 2011-2022 走看看