用JS做一个简易的时间显示动态效果

陈##

已于 2022-07-20 11:20:59 修改

阅读量1.2k

点赞数 2

分类专栏：学习笔记文章标签： javascript 前端开发语言

于 2022-07-04 19:41:46 首次发布

本文链接：https://blog.csdn.net/weixin_46095138/article/details/125607292

版权

学习同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

笔记

3 篇文章 0 订阅

订阅专栏

用JS做一个简易的时间显示动态效果

运行效果

代码

<!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>time</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
            color: gray;
            transition: 0.5s;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
        }

        .wrap {
            position: relative;
            width: 100%;
        }

        body::-webkit-scrollbar {
            display: none;
        }

        .bwbtn {
            position: absolute;
            top: 20px;
            right: 20px;
            height: 50px;
            width: 50px;
            border-radius: 50%;
            border: 1px solid gray;
        }

        .timebox,
        .datebox {
            user-select: none;
        }

        .timebox {
            font-size: 120px;
            text-align: center;
            line-height: 95vh;
            height: 80vh;
        }

        .datebox {
            font-size: 36px;
            height: 20vh;
            line-height: 10vh;
            text-align: right;
            padding: 30px;
        }

        @media screen and (max-width:940px) {
            .timebox {
                font-size: 50px;
            }

            .datebox {
                font-size: 20px;
                padding: 20px;
            }

            .bwbtn {
                height: 30px;
                width: 30px;
            }
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="bwbtn" onclick="bwchange()"></div>
        <div class="timebox"></div>
        <div class="datebox"></div>
    </div>
    <script>
        var timebox = document.querySelector('.timebox')
        var datebox = document.querySelector('.datebox')

        setInterval(() => {
            var time = new Date();
            // 显示当前年
            var year = time.getFullYear();
            // 显示当前月
            var month = time.getMonth() + 1;
            switch (month) {
                case 1:
                    month = "January"
                    break;
                case 2:
                    month = "February"
                    break;
                case 3:
                    month = "March"
                    break;
                case 4:
                    month = "April"
                    break;
                case 5:
                    month = "May"
                    break;
                case 6:
                    month = "June"
                    break;
                case 7:
                    month = "July"
                    break;
                case 8:
                    month = "August"
                    break;
                case 9:
                    month = "September"
                    break;
                case 10:
                    month = "October"
                    break;
                case 11:
                    month = "November"
                    break;
                default:
                    month = "December"
                    break;
            }
            // 显示当前日
            var day = time.getDate();
            // 显示当前时
            var hour = time.getHours();
            if (hour < 10) {
                hour = "0" + hour
            }
            // 显示当前分
            var minute = time.getMinutes();
            if (minute < 10) {
                minute = "0" + minute
            }
            // 显示当前秒
            var second = time.getSeconds();
            if (second < 10) {
                second = "0" + second
            }
            // 显示当前星期
            var week = time.getDay();
            switch (week) {
                case 1:
                    week = "Monday"
                    break;
                case 2:
                    week = "Tuesday"
                    break;
                case 3:
                    week = "Wednesday"
                    break;
                case 4:
                    week = "Thursday"
                    break;
                case 5:
                    week = "Friday"
                    break;
                case 6:
                    week = "Saturday"
                    break;
                default:
                    week = "Sunday"
                    break;
            }
            // day转换为字符串
            var daystr = day + ""
            //获取day字符串的最后一位字符
            var daychar = daystr.charAt(daystr.length - 1)
            if (daychar == "1") {
                if (daystr == "11") {
                    day = day + "th"
                } else {
                    day = day + "st"
                }
            } else if (daychar == "2") {
                if (daystr == "12") {
                    day = day + "th"
                } else {
                    day = day + "nd"
                }
            } else if (daychar == "3") {
                if (daystr == "13") {
                    day = day + "th"
                } else {
                    day = day + "rd"
                }
            } else {
                day = day + "th"
            }

            timebox.innerHTML = hour + ' : ' + minute + ' : ' + second;
            datebox.innerHTML = month + ' ' + day + ' ' + year + ' ' + week;
        }, 1000);
        // 设置初始开关的值
        var isSwitch = false;
        // 黑白切换按钮
        function bwchange() {
            var bwbtnx = document.querySelector('.bwbtn')
            var mainx = document.querySelector('body')
            isSwitch = !isSwitch;
            if (isSwitch == true) {
                mainx.style.backgroundColor = 'black'
            } else {
                mainx.style.backgroundColor = 'white'
            }
        }
    </script>
</body>

</html>