用JS 制作一个简易的时间网页

最新推荐文章于 2023-07-07 17:46:09 发布

Tell℡

最新推荐文章于 2023-07-07 17:46:09 发布

阅读量854

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_66288388/article/details/125278344

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 清除上下边距 */
    * {
        margin: 0;
        padding: 0;
    }

    /* 设置样式 */
    div {
        color: white;
        height: 283px;
        text-align: center;
        line-height: 280px;
        font-size: 200px;
        font-family: 华文行楷;
    }
 /* 可以根据自己的爱好设置样式 */
    div:nth-child(1) {
        background-color: hotpink;
    }

    div:nth-child(2) {
        background-color: greenyellow;
    }

    div:nth-child(3) {
        background-color: skyblue;
    }
</style>

<body>
    <div>2022年11月3日</div>
    <div>星期三</div>
    <div>23:07:00</div>
    <script>
        // 获取元素
        var div = document.getElementsByTagName('div')
        time()
        setInterval(time, 1000)

        function time() {
            // 创建一个新的日期
            var nowDate = new Date()
            // 获取年、月、日、星期、小时、分钟、秒
            var year = nowDate.getFullYear()
            var month = nowDate.getMonth() + 1
            var week = nowDate.getDay()
            var day = nowDate.getDate()
            var hour = nowDate.getHours()
            var min = nowDate.getMinutes()
            var sec = nowDate.getSeconds()
            // 让数字小于10的时候补一个0
            day < 10 ? day = '0' + day : day
            hour < 10 ? hour = '0' + hour : hour
            month < 10 ? month = '0' + month : month
            min < 10 ? min = '0' + min : min
            sec < 10 ? sec = '0' + sec : sec
            // 星期需要单独设置下，上边获取week出来的是一个数字
            var weeks = "今天是星期" + "日一二三四五六".charAt(week);
            // 再进行字符串拼接
            div[0].innerHTML = year + '年' + month + '月' + day + '日'
            div[1].innerHTML = weeks
            div[2].innerHTML = hour + ':' + min + ':' + sec
        }
    </script>
</body>

</html>

小白学习中，请大佬多多指教！