该文本展示了一个使用HTML、CSS和JavaScript（Vue.js）构建的创意时钟。时钟通过动态更新显示当前的年、月、日、时、分、秒，并使用CSS动画实现时钟指针的旋转效果。代码中包含了对时间的计算和格式化，确保时钟的准确性和美观性。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
<title>创意时钟</title>
<style>
body{padding:0;margin:0;}[v-cloak]{display:none!important;}.clock-box{background:#05070a;}.flex,.flex-o{flex:1;-webkit-flex:1;box-flex:1;-webkit-box-flex:1;display:inline;}.flex-o{overflow:hidden;}.df{display:-webkit-box;display:box;display:-webkit-flex;display:flex;}.wao{-webkit-box-pack:center;box-pack:center;-webkit-justify-content:center;justify-content:center;}.wal{-webkit-box-pack:start;box-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}.war{-webkit-box-pack:end;box-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}.hao{-webkit-box-align:center;box-align:center;-webkit-align-items:center;align-items:center;}.hal{-webkit-box-align:start;box-align:start;-webkit-align-items:flex-start;align-items:flex-start;}.har{-webkit-box-align:end;box-align:end;-webkit-align-items:flex-end;align-items:flex-end;}.bob{box-sizing:border-box;}.cf{-webkit-box-orient:vertical;box-orient:vertical;-webkit-flex-direction:column;flex-direction:column;}.jcb{-webkit-box-pack:justify;-webkit-justify-content:space-between;box-pack:justify;justify-content:space-between;}.clock-box{overflow:hidden;position:fixed;left:0;top:0;bottom:0;right:0;color:#fff;font-family:'微软雅黑';}.clock-area{width:800px;height:800px;position:relative;}.clock-year{width:100px;height:30px;position:absolute;font-size:14px;line-height:16px;left:50%;top:50%;margin-left:-50px;margin-top:-15px;}.clock-month{width:160px;height:160px;position:absolute;left:50%;top:50%;margin-left:-80px;margin-top:-80px;}.clock-month-li{font-size:14px;line-height:16px;position:absolute;left:0;top:50%;margin-top:-10px;width:100%;height:20px;transform-origin:center;}.clock-month-li span{min-width:20px;text-align:center;}.clock-day{width:280px;height:280px;position:absolute;left:50%;top:50%;margin-left:-140px;margin-top:-140px;}.clock-day-li{font-size:14px;line-height:16px;position:absolute;left:0;top:50%;margin-top:-10px;width:100%;height:20px;transform-origin:center;}.clock-day-li span{min-width:20px;text-align:center;}.clock-hour{width:400px;height:400px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-200px;}.clock-hour-li{font-size:14px;line-height:16px;position:absolute;left:0;top:50%;margin-top:-10px;width:100%;height:20px;transform-origin:center;}.clock-hour-li span{min-width:20px;text-align:center;}.clock-minute{width:520px;height:520px;position:absolute;left:50%;top:50%;margin-left:-260px;margin-top:-260px;}.clock-minute-li{font-size:14px;line-height:16px;position:absolute;left:0;top:50%;margin-top:-10px;width:100%;height:20px;transform-origin:center;}.clock-minute-li span{min-width:20px;text-align:center;}.clock-second{width:640px;height:640px;position:absolute;left:50%;top:50%;margin-left:-320px;margin-top:-320px;}.clock-second-li{font-size:14px;line-height:16px;position:absolute;left:0;top:50%;margin-top:-10px;width:100%;height:20px;transform-origin:center;}.clock-second-li span{min-width:20px;text-align:center;}.clock-month,.clock-day,.clock-hour,.clock-minute,.clock-second{-webkit-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out;transform:rotate(0deg);}.clock-result{position:fixed;left:50%;top:50%;right:0;height:20px;height:30px;margin-top:-15px;margin-left:-30px;box-shadow:0 0 1000px 1000px rgba(0,0,0,0.7);}.clock-result i{font-size:12px;color:#ccc;line-height:14px;font-style:normal;text-align:center;}.clock-result i:nth-child(1){width:42px;margin-left:50px;}.clock-result i:nth-child(2){width:40px;margin-left:16px;}.clock-result i:nth-child(3){width:40px;margin-left:22px;}.clock-result i:nth-child(4){width:40px;margin-left:20px;}.clock-result i:nth-child(5){width:40px;margin-left:20px;}.clock-result i:nth-child(6){width:40px;margin-left:20px;}.clock-month-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-month-li:nth-child(2){-webkit-transform:rotate(30deg);transform:rotate(30deg);}.clock-month-li:nth-child(3){-webkit-transform:rotate(60deg);transform:rotate(60deg);}.clock-month-li:nth-child(4){-webkit-transform:rotate(90deg);transform:rotate(90deg);}.clock-month-li:nth-child(5){-webkit-transform:rotate(120deg);transform:rotate(120deg);}.clock-month-li:nth-child(6){-webkit-transform:rotate(150deg);transform:rotate(150deg);}.clock-month-li:nth-child(7){-webkit-transform:rotate(180deg);transform:rotate(180deg);}.clock-month-li:nth-child(8){-webkit-transform:rotate(210deg);transform:rotate(210deg);}.clock-month-li:nth-child(9){-webkit-transform:rotate(240deg);transform:rotate(240deg);}.clock-month-li:nth-child(10){-webkit-transform:rotate(270deg);transform:rotate(270deg);}.clock-month-li:nth-child(11){-webkit-transform:rotate(300deg);transform:rotate(300deg);}.clock-month-li:nth-child(12){-webkit-transform:rotate(330deg);transform:rotate(330deg);}.clock-day.day28 .clock-day-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-day.day28 .clock-day-li:nth-child(2){-webkit-transform:rotate(12.857deg);transform:rotate(12.857deg);}.clock-day.day28 .clock-day-li:nth-child(3){-webkit-transform:rotate(25.714deg);transform:rotate(25.714deg);}.clock-day.day28 .clock-day-li:nth-child(4){-webkit-transform:rotate(38.571deg);transform:rotate(38.571deg);}.clock-day.day28 .clock-day-li:nth-child(5){-webkit-transform:rotate(51.428deg);transform:rotate(51.428deg);}.clock-day.day28 .clock-day-li:nth-child(6){-webkit-transform:rotate(64.285deg);transform:rotate(64.285deg);}.clock-day.day28 .clock-day-li:nth-child(7){-webkit-transform:rotate(77.142deg);transform:rotate(77.142deg);}.clock-day.day28 .clock-day-li:nth-child(8){-webkit-transform:rotate(89.999deg);transform:rotate(89.999deg);}.clock-day.day28 .clock-day-li:nth-child(9){-webkit-transform:rotate(102.856deg);transform:rotate(102.856deg);}.clock-day.day28 .clock-day-li:nth-child(10){-webkit-transform:rotate(115.713deg);transform:rotate(115.713deg);}.clock-day.day28 .clock-day-li:nth-child(11){-webkit-transform:rotate(128.57deg);transform:rotate(128.57deg);}.clock-day.day28 .clock-day-li:nth-child(12){-webkit-transform:rotate(141.427deg);transform:rotate(141.427deg);}.clock-day.day28 .clock-day-li:nth-child(13){-webkit-transform:rotate(154.284deg);transform:rotate(154.284deg);}.clock-day.day28 .clock-day-li:nth-child(14){-webkit-transform:rotate(167.141deg);transform:rotate(167.141deg);}.clock-day.day28 .clock-day-li:nth-child(15){-webkit-transform:rotate(179.998deg);transform:rotate(179.998deg);}.clock-day.day28 .clock-day-li:nth-child(16){-webkit-transform:rotate(192.855deg);transform:rotate(192.855deg);}.clock-day.day28 .clock-day-li:nth-child(17){-webkit-transform:rotate(205.712deg);transform:rotate(205.712deg);}.clock-day.day28 .clock-day-li:nth-child(18){-webkit-transform:rotate(218.569deg);transform:rotate(218.569deg);}.clock-day.day28 .clock-day-li:nth-child(19){-webkit-transform:rotate(231.426deg);transform:rotate(231.426deg);}.clock-day.day28 .clock-day-li:nth-child(20){-webkit-transform:rotate(244.283deg);transform:rotate(244.283deg);}.clock-day.day28 .clock-day-li:nth-child(21){-webkit-transform:rotate(257.14deg);transform:rotate(257.14deg);}.clock-day.day28 .clock-day-li:nth-child(22){-webkit-transform:rotate(269.997deg);transform:rotate(269.997deg);}.clock-day.day28 .clock-day-li:nth-child(23){-webkit-transform:rotate(282.854deg);transform:rotate(282.854deg);}.clock-day.day28 .clock-day-li:nth-child(24){-webkit-transform:rotate(295.711deg);transform:rotate(295.711deg);}.clock-day.day28 .clock-day-li:nth-child(25){-webkit-transform:rotate(308.568deg);transform:rotate(308.568deg);}.clock-day.day28 .clock-day-li:nth-child(26){-webkit-transform:rotate(321.425deg);transform:rotate(321.425deg);}.clock-day.day28 .clock-day-li:nth-child(27){-webkit-transform:rotate(334.282deg);transform:rotate(334.282deg);}.clock-day.day28 .clock-day-li:nth-child(28){-webkit-transform:rotate(347.139deg);transform:rotate(347.139deg);}.clock-day.day29 .clock-day-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-day.day29 .clock-day-li:nth-child(2){-webkit-transform:rotate(12.413deg);transform:rotate(12.413deg);}.clock-day.day29 .clock-day-li:nth-child(3){-webkit-transform:rotate(24.826deg);transform:rotate(24.826deg);}.clock-day.day29 .clock-day-li:nth-child(4){-webkit-transform:rotate(37.239deg);transform:rotate(37.239deg);}.clock-day.day29 .clock-day-li:nth-child(5){-webkit-transform:rotate(49.652deg);transform:rotate(49.652deg);}.clock-day.day29 .clock-day-li:nth-child(6){-webkit-transform:rotate(62.065deg);transform:rotate(62.065deg);}.clock-day.day29 .clock-day-li:nth-child(7){-webkit-transform:rotate(74.478deg);transform:rotate(74.478deg);}.clock-day.day29 .clock-day-li:nth-child(8){-webkit-transform:rotate(86.891deg);transform:rotate(86.891deg);}.clock-day.day29 .clock-day-li:nth-child(9){-webkit-transform:rotate(99.304deg);transform:rotate(99.304deg);}.clock-day.day29 .clock-day-li:nth-child(10){-webkit-transform:rotate(111.717deg);transform:rotate(111.717deg);}.clock-day.day29 .clock-day-li:nth-child(11){-webkit-transform:rotate(124.13deg);transform:rotate(124.13deg);}.clock-day.day29 .clock-day-li:nth-child(12){-webkit-transform:rotate(136.543deg);transform:rotate(136.543deg);}.clock-day.day29 .clock-day-li:nth-child(13){-webkit-transform:rotate(148.956deg);transform:rotate(148.956deg);}.clock-day.day29 .clock-day-li:nth-child(14){-webkit-transform:rotate(161.369deg);transform:rotate(161.369deg);}.clock-day.day29 .clock-day-li:nth-child(15){-webkit-transform:rotate(173.782deg);transform:rotate(173.782deg);}.clock-day.day29 .clock-day-li:nth-child(16){-webkit-transform:rotate(186.195deg);transform:rotate(186.195deg);}.clock-day.day29 .clock-day-li:nth-child(17){-webkit-transform:rotate(198.608deg);transform:rotate(198.608deg);}.clock-day.day29 .clock-day-li:nth-child(18){-webkit-transform:rotate(211.021deg);transform:rotate(211.021deg);}.clock-day.day29 .clock-day-li:nth-child(19){-webkit-transform:rotate(223.434deg);transform:rotate(223.434deg);}.clock-day.day29 .clock-day-li:nth-child(20){-webkit-transform:rotate(235.847deg);transform:rotate(235.847deg);}.clock-day.day29 .clock-day-li:nth-child(21){-webkit-transform:rotate(248.26deg);transform:rotate(248.26deg);}.clock-day.day29 .clock-day-li:nth-child(22){-webkit-transform:rotate(260.673deg);transform:rotate(260.673deg);}.clock-day.day29 .clock-day-li:nth-child(23){-webkit-transform:rotate(273.086deg);transform:rotate(273.086deg);}.clock-day.day29 .clock-day-li:nth-child(24){-webkit-transform:rotate(285.499deg);transform:rotate(285.499deg);}.clock-day.day29 .clock-day-li:nth-child(25){-webkit-transform:rotate(297.912deg);transform:rotate(297.912deg);}.clock-day.day29 .clock-day-li:nth-child(26){-webkit-transform:rotate(310.325deg);transform:rotate(310.325deg);}.clock-day.day29 .clock-day-li:nth-child(27){-webkit-transform:rotate(322.738deg);transform:rotate(322.738deg);}.clock-day.day29 .clock-day-li:nth-child(28){-webkit-transform:rotate(335.151deg);transform:rotate(335.151deg);}.clock-day.day29 .clock-day-li:nth-child(29){-webkit-transform:rotate(347.564deg);transform:rotate(347.564deg);}.clock-day.day30 .clock-day-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-day.day30 .clock-day-li:nth-child(2){-webkit-transform:rotate(12deg);transform:rotate(12deg);}.clock-day.day30 .clock-day-li:nth-child(3){-webkit-transform:rotate(24deg);transform:rotate(24deg);}.clock-day.day30 .clock-day-li:nth-child(4){-webkit-transform:rotate(36deg);transform:rotate(36deg);}.clock-day.day30 .clock-day-li:nth-child(5){-webkit-transform:rotate(48deg);transform:rotate(48deg);}.clock-day.day30 .clock-day-li:nth-child(6){-webkit-transform:rotate(60deg);transform:rotate(60deg);}.clock-day.day30 .clock-day-li:nth-child(7){-webkit-transform:rotate(72deg);transform:rotate(72deg);}.clock-day.day30 .clock-day-li:nth-child(8){-webkit-transform:rotate(84deg);transform:rotate(84deg);}.clock-day.day30 .clock-day-li:nth-child(9){-webkit-transform:rotate(96deg);transform:rotate(96deg);}.clock-day.day30 .clock-day-li:nth-child(10){-webkit-transform:rotate(108deg);transform:rotate(108deg);}.clock-day.day30 .clock-day-li:nth-child(11){-webkit-transform:rotate(120deg);transform:rotate(120deg);}.clock-day.day30 .clock-day-li:nth-child(12){-webkit-transform:rotate(132deg);transform:rotate(132deg);}.clock-day.day30 .clock-day-li:nth-child(13){-webkit-transform:rotate(144deg);transform:rotate(144deg);}.clock-day.day30 .clock-day-li:nth-child(14){-webkit-transform:rotate(156deg);transform:rotate(156deg);}.clock-day.day30 .clock-day-li:nth-child(15){-webkit-transform:rotate(168deg);transform:rotate(168deg);}.clock-day.day30 .clock-day-li:nth-child(16){-webkit-transform:rotate(180deg);transform:rotate(180deg);}.clock-day.day30 .clock-day-li:nth-child(17){-webkit-transform:rotate(192deg);transform:rotate(192deg);}.clock-day.day30 .clock-day-li:nth-child(18){-webkit-transform:rotate(204deg);transform:rotate(204deg);}.clock-day.day30 .clock-day-li:nth-child(19){-webkit-transform:rotate(216deg);transform:rotate(216deg);}.clock-day.day30 .clock-day-li:nth-child(20){-webkit-transform:rotate(228deg);transform:rotate(228deg);}.clock-day.day30 .clock-day-li:nth-child(21){-webkit-transform:rotate(240deg);transform:rotate(240deg);}.clock-day.day30 .clock-day-li:nth-child(22){-webkit-transform:rotate(252deg);transform:rotate(252deg);}.clock-day.day30 .clock-day-li:nth-child(23){-webkit-transform:rotate(264deg);transform:rotate(264deg);}.clock-day.day30 .clock-day-li:nth-child(24){-webkit-transform:rotate(276deg);transform:rotate(276deg);}.clock-day.day30 .clock-day-li:nth-child(25){-webkit-transform:rotate(288deg);transform:rotate(288deg);}.clock-day.day30 .clock-day-li:nth-child(26){-webkit-transform:rotate(300deg);transform:rotate(300deg);}.clock-day.day30 .clock-day-li:nth-child(27){-webkit-transform:rotate(312deg);transform:rotate(312deg);}.clock-day.day30 .clock-day-li:nth-child(28){-webkit-transform:rotate(324deg);transform:rotate(324deg);}.clock-day.day30 .clock-day-li:nth-child(29){-webkit-transform:rotate(336deg);transform:rotate(336deg);}.clock-day.day30 .clock-day-li:nth-child(30){-webkit-transform:rotate(348deg);transform:rotate(348deg);}.clock-day.day31 .clock-day-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-day.day31 .clock-day-li:nth-child(2){-webkit-transform:rotate(11.612deg);transform:rotate(11.612deg);}.clock-day.day31 .clock-day-li:nth-child(3){-webkit-transform:rotate(23.224deg);transform:rotate(23.224deg);}.clock-day.day31 .clock-day-li:nth-child(4){-webkit-transform:rotate(34.836deg);transform:rotate(34.836deg);}.clock-day.day31 .clock-day-li:nth-child(5){-webkit-transform:rotate(46.448deg);transform:rotate(46.448deg);}.clock-day.day31 .clock-day-li:nth-child(6){-webkit-transform:rotate(58.06deg);transform:rotate(58.06deg);}.clock-day.day31 .clock-day-li:nth-child(7){-webkit-transform:rotate(69.672deg);transform:rotate(69.672deg);}.clock-day.day31 .clock-day-li:nth-child(8){-webkit-transform:rotate(81.284deg);transform:rotate(81.284deg);}.clock-day.day31 .clock-day-li:nth-child(9){-webkit-transform:rotate(92.896deg);transform:rotate(92.896deg);}.clock-day.day31 .clock-day-li:nth-child(10){-webkit-transform:rotate(104.508deg);transform:rotate(104.508deg);}.clock-day.day31 .clock-day-li:nth-child(11){-webkit-transform:rotate(116.12deg);transform:rotate(116.12deg);}.clock-day.day31 .clock-day-li:nth-child(12){-webkit-transform:rotate(127.732deg);transform:rotate(127.732deg);}.clock-day.day31 .clock-day-li:nth-child(13){-webkit-transform:rotate(139.344deg);transform:rotate(139.344deg);}.clock-day.day31 .clock-day-li:nth-child(14){-webkit-transform:rotate(150.956deg);transform:rotate(150.956deg);}.clock-day.day31 .clock-day-li:nth-child(15){-webkit-transform:rotate(162.568deg);transform:rotate(162.568deg);}.clock-day.day31 .clock-day-li:nth-child(16){-webkit-transform:rotate(174.18deg);transform:rotate(174.18deg);}.clock-day.day31 .clock-day-li:nth-child(17){-webkit-transform:rotate(185.792deg);transform:rotate(185.792deg);}.clock-day.day31 .clock-day-li:nth-child(18){-webkit-transform:rotate(197.404deg);transform:rotate(197.404deg);}.clock-day.day31 .clock-day-li:nth-child(19){-webkit-transform:rotate(209.016deg);transform:rotate(209.016deg);}.clock-day.day31 .clock-day-li:nth-child(20){-webkit-transform:rotate(220.628deg);transform:rotate(220.628deg);}.clock-day.day31 .clock-day-li:nth-child(21){-webkit-transform:rotate(232.24deg);transform:rotate(232.24deg);}.clock-day.day31 .clock-day-li:nth-child(22){-webkit-transform:rotate(243.852deg);transform:rotate(243.852deg);}.clock-day.day31 .clock-day-li:nth-child(23){-webkit-transform:rotate(255.464deg);transform:rotate(255.464deg);}.clock-day.day31 .clock-day-li:nth-child(24){-webkit-transform:rotate(267.076deg);transform:rotate(267.076deg);}.clock-day.day31 .clock-day-li:nth-child(25){-webkit-transform:rotate(278.688deg);transform:rotate(278.688deg);}.clock-day.day31 .clock-day-li:nth-child(26){-webkit-transform:rotate(290.3deg);transform:rotate(290.3deg);}.clock-day.day31 .clock-day-li:nth-child(27){-webkit-transform:rotate(301.912deg);transform:rotate(301.912deg);}.clock-day.day31 .clock-day-li:nth-child(28){-webkit-transform:rotate(313.524deg);transform:rotate(313.524deg);}.clock-day.day31 .clock-day-li:nth-child(29){-webkit-transform:rotate(325.136deg);transform:rotate(325.136deg);}.clock-day.day31 .clock-day-li:nth-child(30){-webkit-transform:rotate(336.748deg);transform:rotate(336.748deg);}.clock-day.day31 .clock-day-li:nth-child(31){-webkit-transform:rotate(348.36deg);transform:rotate(348.36deg);}.clock-hour-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-hour-li:nth-child(2){-webkit-transform:rotate(15deg);transform:rotate(15deg);}.clock-hour-li:nth-child(3){-webkit-transform:rotate(30deg);transform:rotate(30deg);}.clock-hour-li:nth-child(4){-webkit-transform:rotate(45deg);transform:rotate(45deg);}.clock-hour-li:nth-child(5){-webkit-transform:rotate(60deg);transform:rotate(60deg);}.clock-hour-li:nth-child(6){-webkit-transform:rotate(75deg);transform:rotate(75deg);}.clock-hour-li:nth-child(7){-webkit-transform:rotate(90deg);transform:rotate(90deg);}.clock-hour-li:nth-child(8){-webkit-transform:rotate(105deg);transform:rotate(105deg);}.clock-hour-li:nth-child(9){-webkit-transform:rotate(120deg);transform:rotate(120deg);}.clock-hour-li:nth-child(10){-webkit-transform:rotate(135deg);transform:rotate(135deg);}.clock-hour-li:nth-child(11){-webkit-transform:rotate(150deg);transform:rotate(150deg);}.clock-hour-li:nth-child(12){-webkit-transform:rotate(165deg);transform:rotate(165deg);}.clock-hour-li:nth-child(13){-webkit-transform:rotate(180deg);transform:rotate(180deg);}.clock-hour-li:nth-child(14){-webkit-transform:rotate(195deg);transform:rotate(195deg);}.clock-hour-li:nth-child(15){-webkit-transform:rotate(210deg);transform:rotate(210deg);}.clock-hour-li:nth-child(16){-webkit-transform:rotate(225deg);transform:rotate(225deg);}.clock-hour-li:nth-child(17){-webkit-transform:rotate(240deg);transform:rotate(240deg);}.clock-hour-li:nth-child(18){-webkit-transform:rotate(255deg);transform:rotate(255deg);}.clock-hour-li:nth-child(19){-webkit-transform:rotate(270deg);transform:rotate(270deg);}.clock-hour-li:nth-child(20){-webkit-transform:rotate(285deg);transform:rotate(285deg);}.clock-hour-li:nth-child(21){-webkit-transform:rotate(300deg);transform:rotate(300deg);}.clock-hour-li:nth-child(22){-webkit-transform:rotate(315deg);transform:rotate(315deg);}.clock-hour-li:nth-child(23){-webkit-transform:rotate(330deg);transform:rotate(330deg);}.clock-hour-li:nth-child(24){-webkit-transform:rotate(345deg);transform:rotate(345deg);}.clock-minute-li:nth-child(1),.clock-second-li:nth-child(1){-webkit-transform:rotate(0deg);transform:rotate(0deg);}.clock-minute-li:nth-child(2),.clock-second-li:nth-child(2){-webkit-transform:rotate(6deg);transform:rotate(6deg);}.clock-minute-li:nth-child(3),.clock-second-li:nth-child(3){-webkit-transform:rotate(12deg);transform:rotate(12deg);}.clock-minute-li:nth-child(4),.clock-second-li:nth-child(4){-webkit-transform:rotate(18deg);transform:rotate(18deg);}.clock-minute-li:nth-child(5),.clock-second-li:nth-child(5){-webkit-transform:rotate(24deg);transform:rotate(24deg);}.clock-minute-li:nth-child(6),.clock-second-li:nth-child(6){-webkit-transform:rotate(30deg);transform:rotate(30deg);}.clock-minute-li:nth-child(7),.clock-second-li:nth-child(7){-webkit-transform:rotate(36deg);transform:rotate(36deg);}.clock-minute-li:nth-child(8),.clock-second-li:nth-child(8){-webkit-transform:rotate(42deg);transform:rotate(42deg);}.clock-minute-li:nth-child(9),.clock-second-li:nth-child(9){-webkit-transform:rotate(48deg);transform:rotate(48deg);}.clock-minute-li:nth-child(10),.clock-second-li:nth-child(10){-webkit-transform:rotate(54deg);transform:rotate(54deg);}.clock-minute-li:nth-child(11),.clock-second-li:nth-child(11){-webkit-transform:rotate(60deg);transform:rotate(60deg);}.clock-minute-li:nth-child(12),.clock-second-li:nth-child(12){-webkit-transform:rotate(66deg);transform:rotate(66deg);}.clock-minute-li:nth-child(13),.clock-second-li:nth-child(13){-webkit-transform:rotate(72deg);transform:rotate(72deg);}.clock-minute-li:nth-child(14),.clock-second-li:nth-child(14){-webkit-transform:rotate(78deg);transform:rotate(78deg);}.clock-minute-li:nth-child(15),.clock-second-li:nth-child(15){-webkit-transform:rotate(84deg);transform:rotate(84deg);}.clock-minute-li:nth-child(16),.clock-second-li:nth-child(16){-webkit-transform:rotate(90deg);transform:rotate(90deg);}.clock-minute-li:nth-child(17),.clock-second-li:nth-child(17){-webkit-transform:rotate(96deg);transform:rotate(96deg);}.clock-minute-li:nth-child(18),.clock-second-li:nth-child(18){-webkit-transform:rotate(102deg);transform:rotate(102deg);}.clock-minute-li:nth-child(19),.clock-second-li:nth-child(19){-webkit-transform:rotate(108deg);transform:rotate(108deg);}.clock-minute-li:nth-child(20),.clock-second-li:nth-child(20){-webkit-transform:rotate(114deg);transform:rotate(114deg);}.clock-minute-li:nth-child(21),.clock-second-li:nth-child(21){-webkit-transform:rotate(120deg);transform:rotate(120deg);}.clock-minute-li:nth-child(22),.clock-second-li:nth-child(22){-webkit-transform:rotate(126deg);transform:rotate(126deg);}.clock-minute-li:nth-child(23),.clock-second-li:nth-child(23){-webkit-transform:rotate(132deg);transform:rotate(132deg);}.clock-minute-li:nth-child(24),.clock-second-li:nth-child(24){-webkit-transform:rotate(138deg);transform:rotate(138deg);}.clock-minute-li:nth-child(25),.clock-second-li:nth-child(25){-webkit-transform:rotate(144deg);transform:rotate(144deg);}.clock-minute-li:nth-child(26),.clock-second-li:nth-child(26){-webkit-transform:rotate(150deg);transform:rotate(150deg);}.clock-minute-li:nth-child(27),.clock-second-li:nth-child(27){-webkit-transform:rotate(156deg);transform:rotate(156deg);}.clock-minute-li:nth-child(28),.clock-second-li:nth-child(28){-webkit-transform:rotate(162deg);transform:rotate(162deg);}.clock-minute-li:nth-child(29),.clock-second-li:nth-child(29){-webkit-transform:rotate(168deg);transform:rotate(168deg);}.clock-minute-li:nth-child(30),.clock-second-li:nth-child(30){-webkit-transform:rotate(174deg);transform:rotate(174deg);}.clock-minute-li:nth-child(31),.clock-second-li:nth-child(31){-webkit-transform:rotate(180deg);transform:rotate(180deg);}.clock-minute-li:nth-child(32),.clock-second-li:nth-child(32){-webkit-transform:rotate(186deg);transform:rotate(186deg);}.clock-minute-li:nth-child(33),.clock-second-li:nth-child(33){-webkit-transform:rotate(192deg);transform:rotate(192deg);}.clock-minute-li:nth-child(34),.clock-second-li:nth-child(34){-webkit-transform:rotate(198deg);transform:rotate(198deg);}.clock-minute-li:nth-child(35),.clock-second-li:nth-child(35){-webkit-transform:rotate(204deg);transform:rotate(204deg);}.clock-minute-li:nth-child(36),.clock-second-li:nth-child(36){-webkit-transform:rotate(210deg);transform:rotate(210deg);}.clock-minute-li:nth-child(37),.clock-second-li:nth-child(37){-webkit-transform:rotate(216deg);transform:rotate(216deg);}.clock-minute-li:nth-child(38),.clock-second-li:nth-child(38){-webkit-transform:rotate(222deg);transform:rotate(222deg);}.clock-minute-li:nth-child(39),.clock-second-li:nth-child(39){-webkit-transform:rotate(228deg);transform:rotate(228deg);}.clock-minute-li:nth-child(40),.clock-second-li:nth-child(40){-webkit-transform:rotate(234deg);transform:rotate(234deg);}.clock-minute-li:nth-child(41),.clock-second-li:nth-child(41){-webkit-transform:rotate(240deg);transform:rotate(240deg);}.clock-minute-li:nth-child(42),.clock-second-li:nth-child(42){-webkit-transform:rotate(246deg);transform:rotate(246deg);}.clock-minute-li:nth-child(43),.clock-second-li:nth-child(43){-webkit-transform:rotate(252deg);transform:rotate(252deg);}.clock-minute-li:nth-child(44),.clock-second-li:nth-child(44){-webkit-transform:rotate(258deg);transform:rotate(258deg);}.clock-minute-li:nth-child(45),.clock-second-li:nth-child(45){-webkit-transform:rotate(264deg);transform:rotate(264deg);}.clock-minute-li:nth-child(46),.clock-second-li:nth-child(46){-webkit-transform:rotate(270deg);transform:rotate(270deg);}.clock-minute-li:nth-child(47),.clock-second-li:nth-child(47){-webkit-transform:rotate(276deg);transform:rotate(276deg);}.clock-minute-li:nth-child(48),.clock-second-li:nth-child(48){-webkit-transform:rotate(282deg);transform:rotate(282deg);}.clock-minute-li:nth-child(49),.clock-second-li:nth-child(49){-webkit-transform:rotate(288deg);transform:rotate(288deg);}.clock-minute-li:nth-child(50),.clock-second-li:nth-child(50){-webkit-transform:rotate(294deg);transform:rotate(294deg);}.clock-minute-li:nth-child(51),.clock-second-li:nth-child(51){-webkit-transform:rotate(300deg);transform:rotate(300deg);}.clock-minute-li:nth-child(52),.clock-second-li:nth-child(52){-webkit-transform:rotate(306deg);transform:rotate(306deg);}.clock-minute-li:nth-child(53),.clock-second-li:nth-child(53){-webkit-transform:rotate(312deg);transform:rotate(312deg);}.clock-minute-li:nth-child(54),.clock-second-li:nth-child(54){-webkit-transform:rotate(318deg);transform:rotate(318deg);}.clock-minute-li:nth-child(55),.clock-second-li:nth-child(55){-webkit-transform:rotate(324deg);transform:rotate(324deg);}.clock-minute-li:nth-child(56),.clock-second-li:nth-child(56){-webkit-transform:rotate(330deg);transform:rotate(330deg);}.clock-minute-li:nth-child(57),.clock-second-li:nth-child(57){-webkit-transform:rotate(336deg);transform:rotate(336deg);}.clock-minute-li:nth-child(58),.clock-second-li:nth-child(58){-webkit-transform:rotate(342deg);transform:rotate(342deg);}.clock-minute-li:nth-child(59),.clock-second-li:nth-child(59){-webkit-transform:rotate(348deg);transform:rotate(348deg);}.clock-minute-li:nth-child(60),.clock-second-li:nth-child(60){-webkit-transform:rotate(354deg);transform:rotate(354deg);}
</style>
</head>
<body>
<div id="app">
<div class="clock-box df wao hao">
<div class="clock-area">
<div class="clock-year df wao hao"></div>
<div class="clock-month"></div>
<div class="clock-day"></div>
<div class="clock-hour"></div>
<div class="clock-minute"></div>
<div class="clock-second"></div>
<div class="clock-result df hao"><i>年</i><i>月</i><i>日</i><i>时</i><i>分</i><i>秒</i></div>
</div>
</div>
</div>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.3/vue.min.js"></script>
<script type="text/javascript">
var Num={a:function(t,r){var n,e,a;try{n=t.toString().split(".")[1].length}catch(t){n=0}try{e=r.toString().split(".")[1].length}catch(t){e=0}return(t*(a=Math.pow(10,Math.max(n,e)))+r*a)/a},s:function(t,r){var n,e,a;try{n=t.toString().split(".")[1].length}catch(t){n=0}try{e=r.toString().split(".")[1].length}catch(t){e=0}return(t*(a=Math.pow(10,Math.max(n,e)))-r*a)/a},c:function(arg1,arg2){var t1=0,t2=0,r1,r2;try{t1=arg1.toString().split(".")[1].length}catch(t){}try{t2=arg2.toString().split(".")[1].length}catch(t){}with(Math)return r1=Number(arg1.toString().replace(".","")),r2=Number(arg2.toString().replace(".","")),r1/r2*pow(10,t2-t1)},m:function(t,r){var n=0,e=t.toString(),a=r.toString();try{n+=e.split(".")[1].length}catch(t){}try{n+=a.split(".")[1].length}catch(t){}return Number(e.replace(".",""))*Number(a.replace(".",""))/Math.pow(10,n)}};Number.prototype.c=function(t){return Num.c(this,t)},Number.prototype.s=function(t){return Num.s(this,t)},Number.prototype.m=function(t){return Num.m(t,this)},Number.prototype.a=function(t){return Num.a(t,this)};
var appVue = new Vue({
el: '#app',
data: {
now: {
year: '',
month: '',
day: '',
hour: '',
minute: '',
second: '',
},
month_group: [],
day_group: [],
hour_group: [],
minute_group: [],
second_group: [],
month_angle: (360).c(12),
day_angle: 0,
hour_angle: (360).c(24),
minute_angle: (360).c(60),
second_angle: (360).c(60),
month_rotate: 0,
day_rotate: 0,
hour_rotate: 0,
minute_rotate: 0,
second_rotate: 0,
},
methods: {
getDateTime: function() {
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
this.now = {
year: year,
month: month,
day: day,
hour: hour,
minute: minute,
second: second,
};
document.querySelector('.clock-year').innerHTML = year
var dayNum = new Date(year, month, 0).getDate();
var day_group = [];
for (var i = 1; i <= dayNum; i++) {
day_group.push(i);
document.querySelector('.clock-day').innerHTML += `<div class="clock-day-li df hao war"><span>${i < 10 ? '0' + i : i}</span></div>`
document.querySelector('.clock-day').classList.add(`day${dayNum}`)
}
for (var i = 1; i <= 12; i++) {
document.querySelector('.clock-month').innerHTML += `<div class="clock-month-li df hao war"><span>${i < 10 ? '0' + i : i}</span></div>`
}
for (var i = 0; i <= 23; i++) {
document.querySelector('.clock-hour').innerHTML += `<div class="clock-hour-li df hao war"><span>${i < 10 ? '0' + i : i}</span></div>`
}
for (var i = 0; i <= 59; i++) {
document.querySelector('.clock-minute').innerHTML += `<div class="clock-minute-li df hao war"><span>${i < 10 ? '0' + i : i}</span></div>`
document.querySelector('.clock-second').innerHTML += `<div class="clock-second-li df hao war"><span>${i < 10 ? '0' + i : i}</span></div>`
}
this.day_angle = (360).c(day_group.length);
this.month_rotate = -this.month_angle.m(month - 1);
this.day_rotate = -this.day_angle.m(day - 1);
this.hour_rotate = -this.hour_angle.m(hour);
this.minute_rotate = -this.minute_angle.m(minute);
this.second_rotate = -this.second_angle.m(second);
setInterval(this.clockMove, 1000);
},
clockMove: function() {
var year = this.now.year;
var month = this.now.month;
var day = this.now.day;
var hour = this.now.hour;
var minute = this.now.minute;
var second = this.now.second;
second++;
this.second_rotate -= this.second_angle;
if (second > 59) {
second = 0;
minute++;
this.minute_rotate -= this.minute_angle;
if (minute > 59) {
minute = 0;
hour++;
this.hour_rotate -= this.hour_angle;
if (hour > 23) {
hour = 0;
day++;
this.day_rotate -= this.day_angle;
if (day > this.day_group.length) {
day = 1;
month++;
this.month_rotate -= this.month_angle;
if (month > 12) {
month = 1;
year++;
}
var dayNum = new Date(year, month, 0).getDate();
var day_group = [];
for (var i = 1; i <= dayNum; i++) {
day_group.push(i);
}
this.day_group = day_group;
this.day_angle = (360).c(day_group.length);
}
}
}
}
this.now.year = year;
this.now.month = month;
this.now.day = day;
this.now.hour = hour;
this.now.minute = minute;
this.now.second = second;
document.querySelector('.clock-month').style.transform = `rotate(${this.month_rotate}deg)`
document.querySelector('.clock-day').style.transform = `rotate(${this.day_rotate}deg)`
document.querySelector('.clock-hour').style.transform = `rotate(${this.hour_rotate}deg)`
document.querySelector('.clock-minute').style.transform = `rotate(${this.minute_rotate}deg)`
document.querySelector('.clock-second').style.transform = `rotate(${this.second_rotate}deg)`
},
},
})
setTimeout(appVue.getDateTime, 100);
</script>
</body>
</html>