倒计时界面

最新推荐文章于 2024-06-20 09:44:46 发布

Stobadiouth

最新推荐文章于 2024-06-20 09:44:46 发布

阅读量312

点赞数

分类专栏：案例

本文链接：https://blog.csdn.net/qq_42650983/article/details/81006425

版权

案例专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>date</title>
</head>
<body>

<div id="show_time"></div>
<div id="now_time"></div>
<script type="text/javascript">
    var str_date='2018-8-1';

    var show=document.querySelector('#show_time');
    var now_time=document.querySelector('#now_time');

    now_time.innerHTML=dateFormat(new Date())

    setInterval(function () {
        show.innerHTML=timeFormat(new Date(),str_date);
    },1000);




    function timeFormat(start_time,end_time) {
        var time=(new Date(end_time)-new Date(start_time))/1000;

        var days=parseInt(time/(24*60*60));
        var hours=parseInt(time%(24*60*60)/(60*60));
        var minutes=parseInt(time%(60*60)/60);
        var seconds=parseInt(time%60);
        return `剩余时间：${days}天:${hours}小时:${minutes}分钟:${seconds}秒`
    }


    function dateFormat(date) {
        var year=date.getFullYear();
        var month=date.getMonth()+1>9 ? date.getMonth()+1:'0'+(date.getMonth()+1);
        var day=date.getDate();
        var hour=date.getHours();
        var minute=date.getMinutes();
        var second=date.getSeconds();

        return year+'/'+month+'/'+day+' '+hour+':'+minute+':'+second;
    }


    var a=10;
    a= a>9 ? a:'0'+a;
</script>
</body>
</html>