HTML实现数字跳动时钟

小小九天
已于 2024-10-05 20:02:58 修改
阅读量149
点赞数 5
文章标签： html css3 css
于 2024-10-05 19:50:23 首次发布
本文链接：https://blog.csdn.net/as1278/article/details/142718149
版权
数字跳动时钟
实现原理主要包括：
使用CSS的transform属性将数字排列成圆形。
利用JavaScript的setInterval函数每秒获取当前时间。
通过添加和移除CSS类来高亮显示当前时间对应的数字。
使用CSS过渡效果使数字的变化更加平滑。
<!DOCTYPE html>
<html lang="en">

<head>

    <style>
        body {
            background: black;
            color: white;
            font-family: Helvetica Neue, Helvetica, Arial, Verdana;
            font-weight: 100;
        }

        body .clock-round {
            margin: 0 auto;
            position: relative;
            width: 840px;
            height: 840px;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }

        body .clock-round .hours {
            font-size: 40px;
        }

        body .clock-round .hours span {
            display: block;
            position: absolute;
            left: 400px;
            text-align: center;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-transform-origin: center 400px;
            -ms-transform-origin: center 400px;
            -webkit-transform-origin: center 400px;
            transform-origin: center 400px;
            -moz-transition: all 1s;
            -o-transition: all 1s;
            -webkit-transition: all 1s;
            transition: all 1s;
        }

        body .clock-round .hours span.active {
            color: yellow;
            -moz-transform-origin: center 0;
            -ms-transform-origin: center 0;
            -webkit-transform-origin: center 0;
            transform-origin: center 0;
            -moz-transform: rotate(0) !important;
            -ms-transform: rotate(0) !important;
            -webkit-transform: rotate(0) !important;
            transform: rotate(0) !important;
            text-shadow: yellow 0px 0px 5px;
            font-size: 50px;
            top: 300px;
            left: 320px;
        }

        body .clock-round .hours span:nth-child(1) {
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        body .clock-round .hours span:nth-child(2) {
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        body .clock-round .hours span:nth-child(3) {
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        body .clock-round .hours span:nth-child(4) {
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        body .clock-round .hours span:nth-child(5) {
            -moz-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
        }

        body .clock-round .hours span:nth-child(6) {
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        body .clock-round .hours span:nth-child(7) {
            -moz-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
        }

        body .clock-round .hours span:nth-child(8) {
            -moz-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        body .clock-round .hours span:nth-child(9) {
            -moz-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        body .clock-round .hours span:nth-child(10) {
            -moz-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
        }

        body .clock-round .hours span:nth-child(11) {
            -moz-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
        }

        body .clock-round .hours span:nth-child(12) {
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }

        body .clock-round .minutes {
            font-size: 20px;
        }

        body .clock-round .minutes span {
            display: block;
            position: absolute;
            left: 400px;
            top: 100px;
            width: 50px;
            text-align: center;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
            -moz-transform-origin: center 300px;
            -ms-transform-origin: center 300px;
            -webkit-transform-origin: center 300px;
            transform-origin: center 300px;
            -moz-transition: all 1s;
            -o-transition: all 1s;
            -webkit-transition: all 1s;
            transition: all 1s;
        }

        body .clock-round .minutes span.active-minute {
            color: orange;
            font-size: 50px;
            top: 300px;
            left: 400px;
            -moz-transform-origin: center 0;
            -ms-transform-origin: center 0;
            -webkit-transform-origin: center 0;
            transform-origin: center 0;
            -moz-transform: rotate(0) !important;
            -ms-transform: rotate(0) !important;
            -webkit-transform: rotate(0) !important;
            transform: rotate(0) !important;
            text-shadow: orange 0px 0px 5px;
        }

        body .clock-round .minutes span.active-second {
            color: red;
            font-size: 50px;
            -moz-transform-origin: center 0;
            -ms-transform-origin: center 0;
            -webkit-transform-origin: center 0;
            transform-origin: center 0;
            -moz-transform: rotate(0) !important;
            -ms-transform: rotate(0) !important;
            -webkit-transform: rotate(0) !important;
            transform: rotate(0) !important;
            text-shadow: red 0px 0px 5px;
            top: 300px;
            left: 480px;
        }

        body .clock-round .minutes span:nth-child(1) {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        body .clock-round .minutes span:nth-child(1).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(1).active-minute.active-second:after {
            content: "0";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(2) {
            -moz-transform: rotate(6deg);
            -ms-transform: rotate(6deg);
            -webkit-transform: rotate(6deg);
            transform: rotate(6deg);
        }

        body .clock-round .minutes span:nth-child(2).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(2).active-minute.active-second:after {
            content: "1";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(3) {
            -moz-transform: rotate(12deg);
            -ms-transform: rotate(12deg);
            -webkit-transform: rotate(12deg);
            transform: rotate(12deg);
        }

        body .clock-round .minutes span:nth-child(3).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(3).active-minute.active-second:after {
            content: "2";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(4) {
            -moz-transform: rotate(18deg);
            -ms-transform: rotate(18deg);
            -webkit-transform: rotate(18deg);
            transform: rotate(18deg);
        }

        body .clock-round .minutes span:nth-child(4).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(4).active-minute.active-second:after {
            content: "3";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(5) {
            -moz-transform: rotate(24deg);
            -ms-transform: rotate(24deg);
            -webkit-transform: rotate(24deg);
            transform: rotate(24deg);
        }

        body .clock-round .minutes span:nth-child(5).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(5).active-minute.active-second:after {
            content: "4";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(6) {
            -moz-transform: rotate(30deg);
            -ms-transform: rotate(30deg);
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
        }

        body .clock-round .minutes span:nth-child(6).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(6).active-minute.active-second:after {
            content: "5";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(7) {
            -moz-transform: rotate(36deg);
            -ms-transform: rotate(36deg);
            -webkit-transform: rotate(36deg);
            transform: rotate(36deg);
        }

        body .clock-round .minutes span:nth-child(7).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(7).active-minute.active-second:after {
            content: "6";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(8) {
            -moz-transform: rotate(42deg);
            -ms-transform: rotate(42deg);
            -webkit-transform: rotate(42deg);
            transform: rotate(42deg);
        }

        body .clock-round .minutes span:nth-child(8).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(8).active-minute.active-second:after {
            content: "7";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(9) {
            -moz-transform: rotate(48deg);
            -ms-transform: rotate(48deg);
            -webkit-transform: rotate(48deg);
            transform: rotate(48deg);
        }

        body .clock-round .minutes span:nth-child(9).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(9).active-minute.active-second:after {
            content: "8";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(10) {
            -moz-transform: rotate(54deg);
            -ms-transform: rotate(54deg);
            -webkit-transform: rotate(54deg);
            transform: rotate(54deg);
        }

        body .clock-round .minutes span:nth-child(10).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(10).active-minute.active-second:after {
            content: "9";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(11) {
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -webkit-transform: rotate(60deg);
            transform: rotate(60deg);
        }

        body .clock-round .minutes span:nth-child(11).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(11).active-minute.active-second:after {
            content: "10";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(12) {
            -moz-transform: rotate(66deg);
            -ms-transform: rotate(66deg);
            -webkit-transform: rotate(66deg);
            transform: rotate(66deg);
        }

        body .clock-round .minutes span:nth-child(12).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(12).active-minute.active-second:after {
            content: "11";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(13) {
            -moz-transform: rotate(72deg);
            -ms-transform: rotate(72deg);
            -webkit-transform: rotate(72deg);
            transform: rotate(72deg);
        }

        body .clock-round .minutes span:nth-child(13).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(13).active-minute.active-second:after {
            content: "12";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(14) {
            -moz-transform: rotate(78deg);
            -ms-transform: rotate(78deg);
            -webkit-transform: rotate(78deg);
            transform: rotate(78deg);
        }

        body .clock-round .minutes span:nth-child(14).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(14).active-minute.active-second:after {
            content: "13";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(15) {
            -moz-transform: rotate(84deg);
            -ms-transform: rotate(84deg);
            -webkit-transform: rotate(84deg);
            transform: rotate(84deg);
        }

        body .clock-round .minutes span:nth-child(15).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(15).active-minute.active-second:after {
            content: "14";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(16) {
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
        }

        body .clock-round .minutes span:nth-child(16).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(16).active-minute.active-second:after {
            content: "15";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(17) {
            -moz-transform: rotate(96deg);
            -ms-transform: rotate(96deg);
            -webkit-transform: rotate(96deg);
            transform: rotate(96deg);
        }

        body .clock-round .minutes span:nth-child(17).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(17).active-minute.active-second:after {
            content: "16";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(18) {
            -moz-transform: rotate(102deg);
            -ms-transform: rotate(102deg);
            -webkit-transform: rotate(102deg);
            transform: rotate(102deg);
        }

        body .clock-round .minutes span:nth-child(18).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(18).active-minute.active-second:after {
            content: "17";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(19) {
            -moz-transform: rotate(108deg);
            -ms-transform: rotate(108deg);
            -webkit-transform: rotate(108deg);
            transform: rotate(108deg);
        }

        body .clock-round .minutes span:nth-child(19).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(19).active-minute.active-second:after {
            content: "18";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(20) {
            -moz-transform: rotate(114deg);
            -ms-transform: rotate(114deg);
            -webkit-transform: rotate(114deg);
            transform: rotate(114deg);
        }

        body .clock-round .minutes span:nth-child(20).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(20).active-minute.active-second:after {
            content: "19";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(21) {
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
            transform: rotate(120deg);
        }

        body .clock-round .minutes span:nth-child(21).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(21).active-minute.active-second:after {
            content: "20";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(22) {
            -moz-transform: rotate(126deg);
            -ms-transform: rotate(126deg);
            -webkit-transform: rotate(126deg);
            transform: rotate(126deg);
        }

        body .clock-round .minutes span:nth-child(22).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(22).active-minute.active-second:after {
            content: "21";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(23) {
            -moz-transform: rotate(132deg);
            -ms-transform: rotate(132deg);
            -webkit-transform: rotate(132deg);
            transform: rotate(132deg);
        }

        body .clock-round .minutes span:nth-child(23).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(23).active-minute.active-second:after {
            content: "22";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(24) {
            -moz-transform: rotate(138deg);
            -ms-transform: rotate(138deg);
            -webkit-transform: rotate(138deg);
            transform: rotate(138deg);
        }

        body .clock-round .minutes span:nth-child(24).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(24).active-minute.active-second:after {
            content: "23";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(25) {
            -moz-transform: rotate(144deg);
            -ms-transform: rotate(144deg);
            -webkit-transform: rotate(144deg);
            transform: rotate(144deg);
        }

        body .clock-round .minutes span:nth-child(25).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(25).active-minute.active-second:after {
            content: "24";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(26) {
            -moz-transform: rotate(150deg);
            -ms-transform: rotate(150deg);
            -webkit-transform: rotate(150deg);
            transform: rotate(150deg);
        }

        body .clock-round .minutes span:nth-child(26).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(26).active-minute.active-second:after {
            content: "25";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(27) {
            -moz-transform: rotate(156deg);
            -ms-transform: rotate(156deg);
            -webkit-transform: rotate(156deg);
            transform: rotate(156deg);
        }

        body .clock-round .minutes span:nth-child(27).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(27).active-minute.active-second:after {
            content: "26";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(28) {
            -moz-transform: rotate(162deg);
            -ms-transform: rotate(162deg);
            -webkit-transform: rotate(162deg);
            transform: rotate(162deg);
        }

        body .clock-round .minutes span:nth-child(28).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(28).active-minute.active-second:after {
            content: "27";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(29) {
            -moz-transform: rotate(168deg);
            -ms-transform: rotate(168deg);
            -webkit-transform: rotate(168deg);
            transform: rotate(168deg);
        }

        body .clock-round .minutes span:nth-child(29).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(29).active-minute.active-second:after {
            content: "28";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(30) {
            -moz-transform: rotate(174deg);
            -ms-transform: rotate(174deg);
            -webkit-transform: rotate(174deg);
            transform: rotate(174deg);
        }

        body .clock-round .minutes span:nth-child(30).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(30).active-minute.active-second:after {
            content: "29";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(31) {
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
        }

        body .clock-round .minutes span:nth-child(31).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(31).active-minute.active-second:after {
            content: "30";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(32) {
            -moz-transform: rotate(186deg);
            -ms-transform: rotate(186deg);
            -webkit-transform: rotate(186deg);
            transform: rotate(186deg);
        }

        body .clock-round .minutes span:nth-child(32).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(32).active-minute.active-second:after {
            content: "31";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(33) {
            -moz-transform: rotate(192deg);
            -ms-transform: rotate(192deg);
            -webkit-transform: rotate(192deg);
            transform: rotate(192deg);
        }

        body .clock-round .minutes span:nth-child(33).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(33).active-minute.active-second:after {
            content: "32";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(34) {
            -moz-transform: rotate(198deg);
            -ms-transform: rotate(198deg);
            -webkit-transform: rotate(198deg);
            transform: rotate(198deg);
        }

        body .clock-round .minutes span:nth-child(34).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(34).active-minute.active-second:after {
            content: "33";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(35) {
            -moz-transform: rotate(204deg);
            -ms-transform: rotate(204deg);
            -webkit-transform: rotate(204deg);
            transform: rotate(204deg);
        }

        body .clock-round .minutes span:nth-child(35).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(35).active-minute.active-second:after {
            content: "34";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(36) {
            -moz-transform: rotate(210deg);
            -ms-transform: rotate(210deg);
            -webkit-transform: rotate(210deg);
            transform: rotate(210deg);
        }

        body .clock-round .minutes span:nth-child(36).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(36).active-minute.active-second:after {
            content: "35";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(37) {
            -moz-transform: rotate(216deg);
            -ms-transform: rotate(216deg);
            -webkit-transform: rotate(216deg);
            transform: rotate(216deg);
        }

        body .clock-round .minutes span:nth-child(37).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(37).active-minute.active-second:after {
            content: "36";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(38) {
            -moz-transform: rotate(222deg);
            -ms-transform: rotate(222deg);
            -webkit-transform: rotate(222deg);
            transform: rotate(222deg);
        }

        body .clock-round .minutes span:nth-child(38).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(38).active-minute.active-second:after {
            content: "37";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(39) {
            -moz-transform: rotate(228deg);
            -ms-transform: rotate(228deg);
            -webkit-transform: rotate(228deg);
            transform: rotate(228deg);
        }

        body .clock-round .minutes span:nth-child(39).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(39).active-minute.active-second:after {
            content: "38";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(40) {
            -moz-transform: rotate(234deg);
            -ms-transform: rotate(234deg);
            -webkit-transform: rotate(234deg);
            transform: rotate(234deg);
        }

        body .clock-round .minutes span:nth-child(40).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(40).active-minute.active-second:after {
            content: "39";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(41) {
            -moz-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            -webkit-transform: rotate(240deg);
            transform: rotate(240deg);
        }

        body .clock-round .minutes span:nth-child(41).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(41).active-minute.active-second:after {
            content: "40";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(42) {
            -moz-transform: rotate(246deg);
            -ms-transform: rotate(246deg);
            -webkit-transform: rotate(246deg);
            transform: rotate(246deg);
        }

        body .clock-round .minutes span:nth-child(42).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(42).active-minute.active-second:after {
            content: "41";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(43) {
            -moz-transform: rotate(252deg);
            -ms-transform: rotate(252deg);
            -webkit-transform: rotate(252deg);
            transform: rotate(252deg);
        }

        body .clock-round .minutes span:nth-child(43).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(43).active-minute.active-second:after {
            content: "42";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(44) {
            -moz-transform: rotate(258deg);
            -ms-transform: rotate(258deg);
            -webkit-transform: rotate(258deg);
            transform: rotate(258deg);
        }

        body .clock-round .minutes span:nth-child(44).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(44).active-minute.active-second:after {
            content: "43";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(45) {
            -moz-transform: rotate(264deg);
            -ms-transform: rotate(264deg);
            -webkit-transform: rotate(264deg);
            transform: rotate(264deg);
        }

        body .clock-round .minutes span:nth-child(45).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(45).active-minute.active-second:after {
            content: "44";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(46) {
            -moz-transform: rotate(270deg);
            -ms-transform: rotate(270deg);
            -webkit-transform: rotate(270deg);
            transform: rotate(270deg);
        }

        body .clock-round .minutes span:nth-child(46).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(46).active-minute.active-second:after {
            content: "45";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(47) {
            -moz-transform: rotate(276deg);
            -ms-transform: rotate(276deg);
            -webkit-transform: rotate(276deg);
            transform: rotate(276deg);
        }

        body .clock-round .minutes span:nth-child(47).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(47).active-minute.active-second:after {
            content: "46";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(48) {
            -moz-transform: rotate(282deg);
            -ms-transform: rotate(282deg);
            -webkit-transform: rotate(282deg);
            transform: rotate(282deg);
        }

        body .clock-round .minutes span:nth-child(48).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(48).active-minute.active-second:after {
            content: "47";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(49) {
            -moz-transform: rotate(288deg);
            -ms-transform: rotate(288deg);
            -webkit-transform: rotate(288deg);
            transform: rotate(288deg);
        }

        body .clock-round .minutes span:nth-child(49).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(49).active-minute.active-second:after {
            content: "48";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(50) {
            -moz-transform: rotate(294deg);
            -ms-transform: rotate(294deg);
            -webkit-transform: rotate(294deg);
            transform: rotate(294deg);
        }

        body .clock-round .minutes span:nth-child(50).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(50).active-minute.active-second:after {
            content: "49";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(51) {
            -moz-transform: rotate(300deg);
            -ms-transform: rotate(300deg);
            -webkit-transform: rotate(300deg);
            transform: rotate(300deg);
        }

        body .clock-round .minutes span:nth-child(51).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(51).active-minute.active-second:after {
            content: "50";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(52) {
            -moz-transform: rotate(306deg);
            -ms-transform: rotate(306deg);
            -webkit-transform: rotate(306deg);
            transform: rotate(306deg);
        }

        body .clock-round .minutes span:nth-child(52).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(52).active-minute.active-second:after {
            content: "51";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(53) {
            -moz-transform: rotate(312deg);
            -ms-transform: rotate(312deg);
            -webkit-transform: rotate(312deg);
            transform: rotate(312deg);
        }

        body .clock-round .minutes span:nth-child(53).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(53).active-minute.active-second:after {
            content: "52";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(54) {
            -moz-transform: rotate(318deg);
            -ms-transform: rotate(318deg);
            -webkit-transform: rotate(318deg);
            transform: rotate(318deg);
        }

        body .clock-round .minutes span:nth-child(54).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(54).active-minute.active-second:after {
            content: "53";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(55) {
            -moz-transform: rotate(324deg);
            -ms-transform: rotate(324deg);
            -webkit-transform: rotate(324deg);
            transform: rotate(324deg);
        }

        body .clock-round .minutes span:nth-child(55).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(55).active-minute.active-second:after {
            content: "54";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(56) {
            -moz-transform: rotate(330deg);
            -ms-transform: rotate(330deg);
            -webkit-transform: rotate(330deg);
            transform: rotate(330deg);
        }

        body .clock-round .minutes span:nth-child(56).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(56).active-minute.active-second:after {
            content: "55";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(57) {
            -moz-transform: rotate(336deg);
            -ms-transform: rotate(336deg);
            -webkit-transform: rotate(336deg);
            transform: rotate(336deg);
        }

        body .clock-round .minutes span:nth-child(57).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(57).active-minute.active-second:after {
            content: "56";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(58) {
            -moz-transform: rotate(342deg);
            -ms-transform: rotate(342deg);
            -webkit-transform: rotate(342deg);
            transform: rotate(342deg);
        }

        body .clock-round .minutes span:nth-child(58).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(58).active-minute.active-second:after {
            content: "57";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(59) {
            -moz-transform: rotate(348deg);
            -ms-transform: rotate(348deg);
            -webkit-transform: rotate(348deg);
            transform: rotate(348deg);
        }

        body .clock-round .minutes span:nth-child(59).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(59).active-minute.active-second:after {
            content: "58";
            margin-left: 20px;
        }

        body .clock-round .minutes span:nth-child(60) {
            -moz-transform: rotate(354deg);
            -ms-transform: rotate(354deg);
            -webkit-transform: rotate(354deg);
            transform: rotate(354deg);
        }

        body .clock-round .minutes span:nth-child(60).active-minute.active-second {
            left: 400px !important;
        }

        body .clock-round .minutes span:nth-child(60).active-minute.active-second:after {
            content: "59";
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class='clock-round clock'>
        <div class='hours'>
            <span>1</span>
            <span>2</span>
            <span>3</span>
            <span>4</span>
            <span>5</span>
            <span>6</span>
            <span>7</span>
            <span>8</span>
            <span>9</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
        </div>
        <div class='minutes'>
            <span>00</span>
            <span>01</span>
            <span>02</span>
            <span>03</span>
            <span>04</span>
            <span>05</span>
            <span>06</span>
            <span>07</span>
            <span>08</span>
            <span>09</span>
            <span>10</span>
            <span>11</span>
            <span>12</span>
            <span>13</span>
            <span>14</span>
            <span>15</span>
            <span>16</span>
            <span>17</span>
            <span>18</span>
            <span>19</span>
            <span>20</span>
            <span>21</span>
            <span>22</span>
            <span>23</span>
            <span>24</span>
            <span>25</span>
            <span>26</span>
            <span>27</span>
            <span>28</span>
            <span>29</span>
            <span>30</span>
            <span>31</span>
            <span>32</span>
            <span>33</span>
            <span>34</span>
            <span>35</span>
            <span>36</span>
            <span>37</span>
            <span>38</span>
            <span>39</span>
            <span>40</span>
            <span>41</span>
            <span>42</span>
            <span>43</span>
            <span>44</span>
            <span>45</span>
            <span>46</span>
            <span>47</span>
            <span>48</span>
            <span>49</span>
            <span>50</span>
            <span>51</span>
            <span>52</span>
            <span>53</span>
            <span>54</span>
            <span>55</span>
            <span>56</span>
            <span>57</span>
            <span>58</span>
            <span>59</span>
        </div>
    </div>
</body>
<script>
    var t = setInterval(function () {
        var date = new Date();
        var hours = date.getHours() % 12 || 12;
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();

        //var minutes = 42;
        //var seconds = 42;

        document.querySelectorAll('.clock').forEach(function (clock) {
            // 移除所有活跃类
            clock.querySelectorAll('span').forEach(function (span) {
                span.classList.remove('active', 'active-minute', 'active-second');
            });

            // 添加活跃类到小时
            var hourSpans = clock.querySelectorAll('.hours span');
            if (hourSpans[hours - 1]) {
                hourSpans[hours - 1].classList.add('active');
            }

            // 添加活跃类到分钟
            var minuteSpans = clock.querySelectorAll('.minutes span');
            if (minuteSpans[minutes]) {
                minuteSpans[minutes].classList.add('active-minute');
            }

            // 添加活跃类到秒
            if (minuteSpans[seconds]) {
                minuteSpans[seconds].classList.add('active-second');
            }
        });
    }, 1000);
</script>

</html>
预览 | 下载
数字跳动时钟下载
感谢各位的阅读，更多文章请前往九天小窝。