JavaScript实现动态时间_js 混动时间-优快云博客

动态时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态时间</title>
    <style>
        .bigDiv{
            margin: 50px auto;
            width: 400px;
            height: 100px;
            background-color: lightskyblue;
            border-radius: 10px;
        }
        .clockDiv{
            background-color: orange;
            border: solid olivedrab 2px;
            width: 250px;
            height: 30px;
            text-align: center;
            margin: 20px auto;
        }
    </style>
</head>
<div class="bigDiv">
    <h2 align="center">当前时间</h2>
    <div class="clockDiv" id="timeDiv">
    </div>
</div>
<body onload="time()">
<script>
    function time() {
        showTime();
        //定时器
        //每隔参数二毫秒执行一次参数一
        setInterval(showTime,1000);
    }
    /**
     * 显示时间的函数
     */
    function showTime() {
        //这里默认显示Tue Jun 15 2021 18:24:20 GMT+0800 (中国标准时间)格式
        let date = new Date();
        //所以转化成我们想要显示成的格式
        let year = date.getFullYear();//获得年
        let month = appendZero(date.getMonth()+1);//获得月(默认从0开始，所以要+1)
        let day = appendZero(date.getDate());//获得日
        let hour = appendZero(date.getHours());//获得小时
        let min = appendZero(date.getMinutes());//获得分钟
        let second = appendZero(date.getSeconds());//获得秒数
        let week = date.getDay();//获得星期
        //为了规范，当月日时分秒小于10的时候，前面拼接一个0
        function appendZero(num){
            if (num<10){
                return "0"+num;
            }
            return num;
        }
        //拼接
        let curtime=year+"-"+month+"-"+day+"  "+hour+":"+min+":"+second+" 星期"+week;
        //将时间显示到界面
        document.getElementById("timeDiv").innerHTML=curtime;
    }

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