JavaScript通过时间对象展示时间

最新推荐文章于 2024-07-16 17:56:11 发布

洛小天@xiaotian.space

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量475

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/2201_75350750/article/details/139523007

版权

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
</head>
<style>
    @font-face {
        font-family: 'selfFont';
        src: url(DS-DIGIT.TTF);
    }

    #app, #weekday {
        font-family: selfFont, serif;
        font-size: 30px;
        color: red;
        width: 100vw;
        text-align: center;
    }

    span {
        font-size: 40px;
    }

    #time {
        margin-top: 10px;
        font-size: 45px;
    }
</style>
<body>
<div id="app">
    <div>
        <span id="year">2000</span> 年
        <span id="month">00</span> 月
        <span id="day">00</span> 日&nbsp;&nbsp;
        周<span id="weekday">一</span>
    </div>
    <div id="time">10 : 49 : 00</div>
</div>

<script>
    // 获取元素节点
    const YEAR = document.getElementById('year');
    const MONTH = document.getElementById('month');
    const DAY = document.getElementById('day');
    const WEEKDAY = document.getElementById('weekday');
    const TIME = document.getElementById('time');

    const WEEKDAYS = ['一', '二', '三', '四', '五', '六', '天']

    // 页面加载就调用一次
    getCurTime();
    // 每过1秒调用执行
    setInterval(getCurTime, 1000);

    // 获取时、分、秒
    function getCurTime() {
        // 获取内置时间对象
        const curDate = new Date();
        let year = curDate.getFullYear();
        let month = curDate.getMonth() + 1;
        let day = curDate.getDate();
        let hour = curDate.getHours();
        let minute = curDate.getMinutes();
        let second = curDate.getSeconds();
        let weekday = curDate.getDay();

        // 格式化时间
        month = month > 9 ? month : '0' + month;
        day = day > 9 ? day : '0' + day;
        hour = hour > 9 ? hour : '0' + hour;
        minute = minute > 9 ? minute : '0' + minute;
        second = second > 9 ? second : '0' + second;

        // 将时分秒添加进元素节点
        YEAR.innerHTML = year;
        MONTH.innerHTML = month;
        DAY.innerHTML = day;
        WEEKDAY.innerHTML = WEEKDAYS[weekday - 1];
        TIME.innerHTML = hour + " : " + minute + " : " + second;
    }
</script>
</body>
</html>