zoukankan      html  css  js  c++  java
  • 用JS实现倒计时(日期字符串作为参数)

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>JS实现倒计时</title>
        <style>
            *{ margin:0; padding:0; list-style:none;}
            body{ font-size:18px; text-align:center;}
            .time{ height:30px; padding:200px;}
        </style>
    </head>
    <body>
    <div class="time">
        <span id="showInterval"></span>
    </div>
    <script>
    
        function getDistanceTime(time,showInterval){
            var endTime= new Date(Date.parse(time.replace(/-/g, "/")));/*replace将时间字符串中所有的'-'替换成'/',parse将时间格式的字符串转换成毫秒*/
            var nowTime = new Date();
            var distance =endTime.getTime() - nowTime.getTime();/*getTime把一个date对象转换成毫秒*/
    
            var day = 0;
            var hour = 0;
            var minute = 0;
            var second = 0;
    
            if(distance >= 0){
                day = Math.floor(distance/1000/60/60/24);
                hour = Math.floor(distance/1000/60/60%24);
                minute = Math.floor(distance/1000/60%60);
                second = Math.floor(distance/1000%60);
            }else{
                alert("目标日期小于当前日期!")
            }
    
            document.getElementById(showInterval).innerHTML = day + "" +  hour + "" + minute + "" + second + "";
        }
    //    setInterval(function(){getDistanceTime('2016/05/19 12:00:00','showInterval');},0);
        setInterval(function(){getDistanceTime('2017-05-19 12:00:00','showInterval');},0);
    </script>
    
    </body>
    </html>

    传入的日期参数格式,也可以是'2017/05/19 12:00:00'

    效果如下:

  • 相关阅读:
    H3c实验室-(OSPF,Nat,STP,Dhcp,Acl)v.1)
    武科WUST-CTF2020“Tiki组 ”
    MRCTF 2020-“TiKi小组”
    mybatis-sqlite日期类型对应关系
    docker安装postgresql
    docker常用命令
    java sqlite docker,sqlite出错
    jenkins之SSH Publishers环境变量
    线程池(6)-submit与execute区别
    线程池(5)-停止线程池里的任务
  • 原文地址:https://www.cnblogs.com/sapho/p/5504502.html
Copyright © 2011-2022 走看看