2021-03-13

最新推荐文章于 2024-07-21 19:13:42 发布

星辰jm

最新推荐文章于 2024-07-21 19:13:42 发布

阅读量55

点赞数

分类专栏：前端文章标签： js css javascript

本文链接：https://blog.csdn.net/jm5454986/article/details/114763208

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原生css、js实现时钟

效果图
在这里插入图片描述代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: aqua;
        }
        main{
            width: 600px;
            height: 600px;
            border: 5px solid brown;
            border-radius: 50% ;
            margin: 50px auto;
            background-color: palevioletred;
        }
        div{
            width: 560px;
            height: 200px;
            border: 2px solid gold;
            margin: 200px auto;
        }
        #date{
            font-size: 20px;
            color: darkred;
            border: 1px solid gold;
            text-align: right;
        }
        #time{
            height: 173px;
            border: 1px solid gold;
            font-size: 100px;
            text-align: center;
            line-height: 173px;
        }
    </style>
</head>
<body>
    <main>
        <div>
            <section id="date">
            </section>
            <section id="time">
            </section>
        </div>
    </main>
    <script>
        function showTime(){
            var now  =new Date();
            var year =now.getFullYear();
            // 获取到的月份是从0开始的  0表示1月
            var month =now.getMonth()+1;
            var day  =now.getDate();
            var hour =now.getHours();
            var minute = now.getUTCMinutes();
            var second =now.getSeconds();
            // 获取到今天是本周的第几天  0表示星期日
            var week =now.getDay()
            switch(week){
                case 0:
                    week="星期日";
                    break;

                case 1:
                    week="星期一";
                    break;
                case 2:
                    week="星期二";
                    break;

                case 3:
                    week="星期三";
                    break;

                case 4:
                    week="星期四";
                break;

                case 5:
                    week="星期五";
                    break;

                case 6:
                    week="星期六";
                break;
                default:
                    break;
            }
            // 三目运算符  当？ 前面的布尔表达式为真的时候 执行：前面的代码  执行：后面的代码
            // year = year<10 ? "0" +year : year;
            month = month<10 ? "0" +month : month;
            day = day<10 ? "0" + day : day;
            hour = hour<10 ? "0" +hour : hour;
            minute = minute<10 ? "0" +minute : minute;
            second = second<10 ? "0" +second : second;
            var date =document.getElementById("date");
            date.innerHTML=year+"年"+month+"月"+day+"日"+week;
            var time =document.getElementById("time");
            time.innerHTML=hour+":"+minute+":"+second;
        }
        showTime();
        // 定时器可以写两个参数 第一个参数是要重复执行的函数  第二个参数是执行一次的时间  单位是毫秒
        setInterval(showTime,1000);
    </script>
</body>
</html>

星辰jm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-03-13

原生css、js实现时钟效果图代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
复制链接

扫一扫