CSS3时钟制作教程-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43285360/article/details/120406000

实现这个案例，其实还是比较简单的，主要考察和运用的就是 Date内置对象，利用Date内置对象分别获取当前的年月日时分秒

注意点：

在设置刻度的时候这里主要利用的是css3的旋转动画来实现的，总共12个时刻，那么每个时刻在前一个时刻的基础上应该增加30deg
在获取月份的时候注意要加1并且要判断是否大于10，如果小于10则应该在前面加上0
在获取当前的天数时，要判断是否大于10，如果小于10则应在天数前面加上0
在设置时分秒时亦是同样的道理，都需判断是否大于10，如果小于10则也应该在时分秒前面分别加上0

最后直接上代码吧，相关注释代码里都有

 * {
            margin: 0;
            padding: 0;
        }
        
        ol,
        ul {
            list-style: none;
        }
        /* 轮廓 */
        
        .wrap {
            position: relative;
            width: 500px;
            height: 500px;
            border: 20px cornflowerblue solid;
            border-radius: 50%;
            margin: 40px auto;
        }
        /* 时针 */
        
        .hour {
            width: 10px;
            height: 160px;
            background: rgb(22, 22, 24);
            border-radius: 10px;
            position: absolute;
            top: 90px;
            left: 245px;
            transform-origin: center 160px;
            transform: rotate(0deg);
            z-index: 1;
        }
        /* 分针 */
        
        .min {
            width: 7px;
            height: 200px;
            background: rgb(241, 192, 213);
            border-radius: 10px;
            position: absolute;
            top: 50px;
            left: 246px;
            transform-origin: center 200px;
            transform: rotate(0deg);
            z-index: 2;
        }
        /* 秒针 */
        
        .second {
            width: 5px;
            height: 250px;
            background: rgb(230, 11, 120);
            border-radius: 20px;
            position: absolute;
            top: 20px;
            left: 247px;
            transform-origin: center 230px;
            transform: rotate(0deg);
            z-index: 3;
        }
        /* 原点 */
        
        .dot {
            width: 20px;
            height: 20px;
            background: rgba(0, 0, 0, .9);
            border-radius: 50%;
            position: absolute;
            left: 240px;
            top: 230px;
            z-index: 4;
        }
        /* 时刻点 */
        
        .scale li {
            position: absolute;
            top: 0;
            left: 242px;
            width: 18px;
            height: 18px;
            line-height: 18px;
            text-align: center;
            transform-origin: 50% 250px;
        }
        
        .scale>li:nth-child(1) {
            transform: rotate(30deg);
        }
        
        .scale>li:nth-child(2) {
            transform: rotate(60deg);
        }
        
        .scale>li:nth-child(3) {
            transform: rotate(90deg);
        }
        
        .scale>li:nth-child(4) {
            transform: rotate(120deg);
        }
        
        .scale>li:nth-child(5) {
            transform: rotate(150deg);
        }
        
        .scale>li:nth-child(6) {
            transform: rotate(180deg);
        }
        
        .scale>li:nth-child(7) {
            transform: rotate(210deg);
        }
        
        .scale>li:nth-child(8) {
            transform: rotate(240deg);
        }
        
        .scale>li:nth-child(9) {
            transform: rotate(270deg);
        }
        
        .scale>li:nth-child(10) {
            transform: rotate(300deg);
        }
        
        .scale>li:nth-child(11) {
            transform: rotate(330deg);
        }
        /* 日期 */
        
        .date_info {
            width: 190px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            top: 285px;
            left: 155px;
            z-index: 4;
            color: #555;
            font-weight: 700;
            /* border: 1px red solid; */
        }
        /* 时间 */
        
        .time_info {
            width: 110px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            position: absolute;
            top: 340px;
            left: 190px;
            z-index: 4;
            color: #555;
            background: #253e3e;
            border: 1px skyblue solid;
        }
        
        .time {
            width: 35px;
            height: 35px;
            float: left;
            color: #fff;
            font-size: 22px;
        }
        
        .minute_time {
            border-left: 1px solid #fff;
            border-right: 1px solid #fff;
        }

<div class="wrap">
        <!--刻度-->
        <ul class="scale">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>

        <!--时分秒以及原点-->
        <div class="hour"></div>
        <div class="min"></div>
        <div class="second"></div>
        <div class="dot"></div>

        <!--日期-->
        <div class="date_info"></div>

        <!--时间-->
        <div class="time_info">
            <div class="time hour_time"></div>
            <div class="time minute_time"></div>
            <div class="time second_time"></div>
        </div>
    </div>

 const h = document.querySelector(".hour");
        const m = document.querySelector(".min");
        const s = document.querySelector(".second");
        const date_info = document.querySelector(".date_info");
        const hour_time = document.querySelector(".hour_time");
        const minute_time = document.querySelector(".minute_time");
        const second_time = document.querySelector(".second_time");

        //设置动态时间
        function setTime() {
            const date = new Date();

            //获取年月日时分秒
            const year = date.getFullYear();
            const month = (date.getMonth() + 1) > 10 ? (date.getMonth + 1) : '0' + (date.getMonth() + 1);
            const day = date.getDay() > 10 ? date.getDay() : '0' + date.getDay();
            const hour = date.getHours();
            const minutes = date.getMinutes();
            const second = date.getSeconds();
            // console.log(hour, minutes, second);

            const weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];

            // 设置日期
            date_info.innerHTML = year + "年" + month + "月" + day + "日  " + weekday[date.getDay()];

            // 设置时分秒
            hour_time.innerHTML = hour >= 10 ? hour : '0' + hour;
            minute_time.innerHTML = minutes >= 10 ? minutes : '0' + minutes;
            second_time.innerHTML = second >= 10 ? second : '0' + second;

            var hdeg = (hour * 60 + minutes) / (12 * 60) * 360;
            var mdeg = minutes * (360 / 60);
            var sdeg = second * (360 / 60);

            //时分秒针设置
            h.style.transform = 'rotate(' + hdeg + 'deg)';
            m.style.transform = 'rotate(' + mdeg + 'deg)';
            s.style.transform = 'rotate(' + sdeg + 'deg)';
        };

        setInterval(setTime, 1000);