用javascript编写倒计时

Junju_

已于 2023-01-26 14:30:42 修改

阅读量1k

点赞数

分类专栏： javascript项目文章标签： javascript

于 2022-04-01 22:32:25 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/123909710

版权

HTML CSS JavaScript 倒计时网页设计

关键词由CSDN通过智能技术生成

javascript项目专栏收录该内容

10 篇文章 1 订阅

订阅专栏

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

<style type="text/css">
    .Mainshow{

        width: 1000px;
        margin: 0 200px;
        height: 500px;
        background-color: red;

    }
    .Mainshow div{

        float: left;
        line-height: 400%;

    }
    .Mainshow .show1{

        font-size: 7em;
        color: white;
        position: relative;
        left: 1em;


    }
    .Mainshow .show2{

        background-color: red;
        font-size: 2em;
        color:white;
        position: relative;
        top:5em;
        left: 5em;


    }

</style>


<script type="text/javascript">

    window.onload = function() {

        function shedule(){
            //现在时间
            var date1 = new Date();
            //晚上11点的时间
            var date2 = new Date(2022, 3, 1, 23, 0, 0);
            //时间差.算出的是毫秒
            var mistiming = date2 - date1
            //算出时，分，秒
            var hour = Math.floor(mistiming/1000/60/60)
            hour = hour < 10 ? "0" + hour : hour;
            var minute = Math.floor(mistiming/1000/60%60)
            minute = minute < 10 ? "0" + minute : minute;
            var second = Math.floor(mistiming/1000%60)
            second = second < 10 ? "0" + second : second;

            if( mistiming > 0 ){

                show.innerHTML = "距睡觉还有:" + hour+ ":" + minute+ ":" + second

            }
            else{

                show.innerHTML = "睡着了"

            }
        }
        shedule();
        setInterval(
            function(){
                shedule()
            },1000
        )

    }

</script>

<body>

    <div class="Mainshow">
        <div class="show1">
            23:00
        </div>

        <div class="show2" id="show">

        </div>
    </div>

</body>
</html>