JavaScript01—使用javascript显示当前本地时间，每秒更新

Mlr03

已于 2022-05-19 20:48:38 修改

阅读量526

点赞数

分类专栏： JavaScript 文章标签： javascript

于 2022-05-19 20:47:59 首次发布

本文链接：https://blog.youkuaiyun.com/yong1875332184/article/details/124871062

版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

这段代码实现了一个动态网页，实时显示当前时间，并根据时间更改背景颜色。同时，它能在特定节假日显示节日信息，如端午节、国庆节等。此外，根据一天中的不同时间段，页面会展示不同的问候语并相应地改变背景颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

附加不同时段改变背景颜色，个别节假日文字改变。0519作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>
<h1 id="time">现在时间:</h1>
<h4 id="h4"></h4>
<h4></h4>
<h4></h4>
<script>
    f();
    setInterval(() => {
        f();
    }, 1000)

    function word(i) {
        if (i == 1) {
            return '一';
        } else if (i == 2) {
            return '二';
        } else if (i == 3) {
            return '三';
        } else if (i == 4) {
            return '四';
        } else if (i == 5) {
            return '五';
        } else if (i == 6) {
            return '六';
        } else if (i == 7) {
            return '七';
        } else if (i == 8) {
            return '八';
        } else if (i == 9) {
            return '九';
        } else if (i == 10) {
            return '十';
        } else if (i == 11) {
            return '十一';
        } else {
            return '十二';
        }
    }

    function f() {
        let date = new Date();
        let yy = date.getFullYear();
        let mm = date.getMonth() + 1;
        let dd = date.getDate();
        let da = date.getDay() + 1;
        let hh = date.getHours();
        let min = date.getMinutes();
        let ss = date.getSeconds();
        let mon = word(mm);
        let week = word(da);
        if (week == '七') {
            week = '日'
        }

        document.getElementById('time').innerText = `现在时间:${yy}年${mon}月${dd.toString().padStart(2, '0')}日，星期${week}，${hh.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}:${ss.toString().padStart(2, '0')}`;



        let a= (Math.random()*999999).toFixed(0).toString().padStart(6,'0');

        if (yy == 2022 && mm == 6 && dd == 3) {
            document.getElementsByTagName('h4')[1].innerText = '今天是端午节，要记得吃粽子哦'
        } else if (mm == 10 && dd == 1) {
            document.getElementsByTagName('h4')[1].innerText = '今天是国庆节，为祖国庆生！'
        } else if (mm == 1 && dd == 1) {
            document.getElementsByTagName('h4')[1].innerText = `今天是元旦节，${yy - 1}年过去，${yy}年到来了`
        } else if (mm == 5 && dd == 1) {
            document.getElementsByTagName('h4')[1].innerText = '今天是劳动节，劳动人民最光荣！'
        } else {
            document.getElementsByTagName('h4')[1].innerText = '今天好像没什么节日，所以快去敲代码！'
        }

        if (hh >= 0 && (hh <= 5 && mi <= 30)) {
            document.getElementsByTagName('h4')[0].innerText = '这个点还不睡，等着猝死吧'
            document.bgColor = 'black'
            document.fgColor = 'white'
        } else if (hh >= 5 && hh < 9) {
            document.getElementsByTagName('h4')[0].innerText = '早上好,见到你很高兴'
            document.bgColor = '#0099cc'
        } else if (hh >= 9 && hh < 12) {
            document.getElementsByTagName('h4')[0].innerText = '上午好，今天有写代码么'
            document.bgColor = '#ffff66'
        } else if (hh >= 12 && hh < 14) {
            document.getElementsByTagName('h4')[0].innerText = '午休时间到'

        } else if (hh >= 14 && hh < 18) {
            document.getElementsByTagName('h4')[0].innerText = '下午也要努力工作啊'
            document.bgColor = '#FFD700'
        } else {
            document.getElementsByTagName('h4')[0].innerText = '晚上了，整理整理今天的工作吧'
            document.bgColor = `#${a}`
            document.fgColor = 'white'
        }
    }

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