<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>抖音超火的罗马时钟</title> <style type="text/css"> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #000; overflow: hidden; } #clock { position: relative; width: 100%; height: 100%; background: #000; } .label { display: inline-block; color: #4d4d4d; text-align: center; padding: 0 5px; font-size: 19px; transition: left 1s,top 1s; transform-origin: 0% 0%; } </style> </head> <body> <div id="clock"></div> <script type="text/javascript"> var monthText=["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"];var dayText=["一号","二号","三号","四号","五号","六号","七号","八号","九号","十号","十一号","十二号","十三号","十四号","十五号","十六号","十七号","十八号","十九号","二十号","二十一号","二十二号","二十三号","二十四号","二十五号","二十六号","二十七号","二十八号","二十九号","三十号","三十一号"];var weekText=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var hourText=["零点","一点","两点","三点","四点","五点","六点","七点","八点","九点","十点","十一点","十二点","十三点","十四点","十五点","十六点","十七点","十八点","十九点","二十点","二十一点","二十二点","二十三点"];var minuteText=["一分","二分","三分","四分","五分","六分","七分","八分","九分","十分","十一分","十二分","十三分","十四分","十五分","十六分","十七分","十八分","十九分","二十分","二十一分","二十二分","二十三分","二十四分","二十五分","二十六分","二十七分","二十八分","二十九分","三十分","三十一分","三十二分","三十三分","三十四分","三十五分","三十六分","三十七分","三十八分","三十九分","四十分","四十一分","四十二分","四十三分","四十四分","四十五分","四十六分","四十七分","四十八分","四十九分","五十分","五十一分","五十二分","五十三分","五十四分","五十五分","五十六分","五十七分","五十八分","五十九分","六十分"];var secondsText=["一秒","二秒","三秒","四秒","五秒","六秒","七秒","八秒","九秒","十秒","十一秒","十二秒","十三秒","十四秒","十五秒","十六秒","十七秒","十八秒","十九秒","二十秒","二十一秒","二十二秒","二十三秒","二十四秒","二十五秒","二十六秒","二十七秒","二十八秒","二十九秒","三十秒","三十一秒","三十二秒","三十三秒","三十四秒","三十五秒","三十六秒","三十七秒","三十八秒","三十九秒","四十秒","四十一秒","四十二秒","四十三秒","四十四秒","四十五秒","四十六秒","四十七秒","四十八秒","四十九秒","五十秒","五十一秒","五十二秒","五十三秒","五十四秒","五十五秒","五十六秒","五十七秒","五十八秒","五十九秒","六十秒"];var clock;var monthList=[];var dayList=[];var weekList=[];var hourList=[];var minuteList=[];var secondsList=[];var isCircle=false;var textSet=[[monthText,monthList],[dayText,dayList],[weekText,weekList],[hourText,hourList],[minuteText,minuteList],[secondsText,secondsList]];window.onload=function(){init();setInterval(function(){runTime();},100);changePosition();setTimeout(function(){changeCircle();},2000);} function init(){clock=document.getElementById('clock');for(var i=0;i<textSet.length;i++){for(var j=0;j<textSet[i][0].length;j++){var temp=createLabel(textSet[i][0][j]);clock.appendChild(temp);textSet[i][1].push(temp);}}} function createLabel(text){var div=document.createElement('div');div.classList.add('label');div.innerText=text;return div;} function runTime(){var now=new Date();var month=now.getMonth();var day=now.getDate();var week=now.getDay();var hour=now.getHours();var minute=now.getMinutes();var seconds=now.getSeconds();initStyle();var nowValue=[month,day-1,week,hour,minute,seconds];for(var i=0;i<nowValue.length;i++){var num=nowValue[i];textSet[i][1][num].style.color='#fff';} if(isCircle){var widthMid=document.body.clientWidth/2;var heightMid=document.body.clientHeight/2;for(var i=0;i<textSet.length;i++){for(var j=0;j<textSet[i][0].length;j++){var r=(i+1)*35+50*i;var deg=360/textSet[i][1].length*(j-nowValue[i]);var x=r*Math.sin(deg*Math.PI/180)+widthMid;var y=heightMid-r*Math.cos(deg*Math.PI/180);var temp=textSet[i][1][j];temp.style.transform='rotate('+(-90+deg)+'deg)';temp.style.left=x+'px';temp.style.top=y+'px';}}}} function initStyle(){var label=document.getElementsByClassName('label');for(var i=0;i<label.length;i++){label[i].style.color='#4d4d4d';}} function changePosition(){for(let i=0;i<textSet.length;i++){for(let j=0;j<textSet[i][1].length;j++){let tempX=textSet[i][1][j].offsetLeft+"px";let tempY=textSet[i][1][j].offsetTop+"px";setTimeout(function(){textSet[i][1][j].style.position="absolute";textSet[i][1][j].style.left=tempX;textSet[i][1][j].style.top=tempY;},50);}}} function changeCircle(){isCircle=true;clock.style.transform="rotate(90deg)";} </script> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue时间轮盘</title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } body{ height: 100vh; width: 100%; background-color: black; overflow: hidden; } /* .thetime{ height: 25px; width: 50%; background-color: pink; position: absolute; top:calc(50% - 30px); margin:50%; } */ .home ul{ list-style-type: none; position: absolute; top:calc(50% - 30px); left: 0; right: 0; margin: auto; height: 60px; width: 60px; } .home li{ position: absolute; height: 60px; width: 60px; color: #fff; text-align: center; font-size: 14px; line-height: 60px; } #week{ height: 360px; width: 360px; position: absolute; top: calc(50% - 180px); left: calc(50% - 180px); transform: rotate(0deg); } #week ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(180px); } #week ul li:nth-child(2){ z-index: 5; transform: rotate(45deg) translateX(180px); } #week ul li:nth-child(3){ z-index: 5; transform: rotate(90deg) translateX(180px); } #week ul li:nth-child(4){ z-index: 5; transform: rotate(135deg) translateX(180px); } #week ul li:nth-child(5){ z-index: 5; transform: rotate(180deg) translateX(180px); } #week ul li:nth-child(6){ z-index: 5; transform: rotate(225deg) translateX(180px); } #week ul li:nth-child(7){ z-index: 5; transform: rotate(270deg) translateX(180px); } #week ul li:nth-child(8){ z-index: 5; transform: rotate(315deg) translateX(180px); } #month{ height: 120px; width: 120px; position: absolute; top: calc(50% - 60px); left: calc(50% - 60px); transform: rotate(0deg); } #month ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(60px); } #month ul li:nth-child(2){ z-index: 5; transform: rotate(30deg) translateX(60px); } #month ul li:nth-child(3){ z-index: 5; transform: rotate(60deg) translateX(60px); } #month ul li:nth-child(4){ z-index: 5; transform: rotate(90deg) translateX(60px); } #month ul li:nth-child(5){ z-index: 5; transform: rotate(120deg) translateX(60px); }#month ul li:nth-child(6){ z-index: 5; transform: rotate(150deg) translateX(60px); } #month ul li:nth-child(7){ z-index: 5; transform: rotate(180deg) translateX(60px); } #month ul li:nth-child(8){ z-index: 5; transform: rotate(210deg) translateX(60px); }#month ul li:nth-child(9){ z-index: 5; transform: rotate(240deg) translateX(60px); } #month ul li:nth-child(10){ z-index: 5; transform: rotate(270deg) translateX(60px); } #month ul li:nth-child(11){ z-index: 5; transform: rotate(300deg) translateX(60px); } #month ul li:nth-child(12){ z-index: 5; transform: rotate(330deg) translateX(60px); } #apm{ height: 480px; width: 480px; position: absolute; top: calc(50% - 240px); left: calc(50% - 240px); transform: rotate(0deg); } #apm ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(240px); } #apm ul li:nth-child(2){ z-index: 5; transform: rotate(180deg) translateX(240px); } #second{ height: 840px; width: 840px; position: absolute; top: calc(50% - 420px); left: calc(50% - 420px); transform: rotate(0deg); } #second ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(420px); } #second ul li:nth-child(2){ z-index: 5; transform: rotate(6deg) translateX(420px); } #second ul li:nth-child(3){ z-index: 5; transform: rotate(12deg) translateX(420px); } #second ul li:nth-child(4){ z-index: 5; transform: rotate(18deg) translateX(420px); } #second ul li:nth-child(5){ z-index: 5; transform: rotate(24deg) translateX(420px); } #second ul li:nth-child(6){ z-index: 5; transform: rotate(30deg) translateX(420px); } #second ul li:nth-child(7){ z-index: 5; transform: rotate(36deg) translateX(420px); } #second ul li:nth-child(8){ z-index: 5; transform: rotate(42deg) translateX(420px); } #second ul li:nth-child(9){ z-index: 5; transform: rotate(48deg) translateX(420px); } #second ul li:nth-child(10){ z-index: 5; transform: rotate(54deg) translateX(420px); } #second ul li:nth-child(11){ z-index: 5; transform: rotate(60deg) translateX(420px); } #second ul li:nth-child(12){ z-index: 5; transform: rotate(66deg) translateX(420px); } #second ul li:nth-child(13){ z-index: 5; transform: rotate(72deg) translateX(420px); } #second ul li:nth-child(14){ z-index: 5; transform: rotate(78deg) translateX(420px); } #second ul li:nth-child(15){ z-index: 5; transform: rotate(84deg) translateX(420px); } #second ul li:nth-child(16){ z-index: 5; transform: rotate(90deg) translateX(420px); } #second ul li:nth-child(17){ z-index: 5; transform: rotate(96deg) translateX(420px); } #second ul li:nth-child(18){ z-index: 5; transform: rotate(102deg) translateX(420px); } #second ul li:nth-child(19){ z-index: 5; transform: rotate(108deg) translateX(420px); } #second ul li:nth-child(20){ z-index: 5; transform: rotate(114deg) translateX(420px); } #second ul li:nth-child(21){ z-index: 5; transform: rotate(120deg) translateX(420px); } #second ul li:nth-child(22){ z-index: 5; transform: rotate(126deg) translateX(420px); } #second ul li:nth-child(23){ z-index: 5; transform: rotate(132deg) translateX(420px); } #second ul li:nth-child(24){ z-index: 5; transform: rotate(138deg) translateX(420px); } #second ul li:nth-child(25){ z-index: 5; transform: rotate(144deg) translateX(420px); } #second ul li:nth-child(26){ z-index: 5; transform: rotate(150deg) translateX(420px); } #second ul li:nth-child(27){ z-index: 5; transform: rotate(156deg) translateX(420px); } #second ul li:nth-child(28){ z-index: 5; transform: rotate(162deg) translateX(420px); } #second ul li:nth-child(29){ z-index: 5; transform: rotate(168deg) translateX(420px); } #second ul li:nth-child(30){ z-index: 5; transform: rotate(174deg) translateX(420px); } #second ul li:nth-child(31){ z-index: 5; transform: rotate(180deg) translateX(420px); } #second ul li:nth-child(32){ z-index: 5; transform: rotate(186deg) translateX(420px); } #second ul li:nth-child(33){ z-index: 5; transform: rotate(192deg) translateX(420px); } #second ul li:nth-child(34){ z-index: 5; transform: rotate(198deg) translateX(420px); } #second ul li:nth-child(35){ z-index: 5; transform: rotate(204deg) translateX(420px); } #second ul li:nth-child(36){ z-index: 5; transform: rotate(210deg) translateX(420px); } #second ul li:nth-child(37){ z-index: 5; transform: rotate(216deg) translateX(420px); } #second ul li:nth-child(38){ z-index: 5; transform: rotate(222deg) translateX(420px); } #second ul li:nth-child(39){ z-index: 5; transform: rotate(228deg) translateX(420px); } #second ul li:nth-child(40){ z-index: 5; transform: rotate(234deg) translateX(420px); } #second ul li:nth-child(41){ z-index: 5; transform: rotate(240deg) translateX(420px); } #second ul li:nth-child(42){ z-index: 5; transform: rotate(246deg) translateX(420px); } #second ul li:nth-child(43){ z-index: 5; transform: rotate(252deg) translateX(420px); } #second ul li:nth-child(44){ z-index: 5; transform: rotate(258deg) translateX(420px); } #second ul li:nth-child(45){ z-index: 5; transform: rotate(264deg) translateX(420px); } #second ul li:nth-child(46){ z-index: 5; transform: rotate(270deg) translateX(420px); } #second ul li:nth-child(47){ z-index: 5; transform: rotate(276deg) translateX(420px); } #second ul li:nth-child(48){ z-index: 5; transform: rotate(282deg) translateX(420px); } #second ul li:nth-child(49){ z-index: 5; transform: rotate(288deg) translateX(420px); } #second ul li:nth-child(50){ z-index: 5; transform: rotate(294deg) translateX(420px); } #second ul li:nth-child(51){ z-index: 5; transform: rotate(300deg) translateX(420px); } #second ul li:nth-child(52){ z-index: 5; transform: rotate(306deg) translateX(420px); } #second ul li:nth-child(53){ z-index: 5; transform: rotate(312deg) translateX(420px); } #second ul li:nth-child(54){ z-index: 5; transform: rotate(318deg) translateX(420px); } #second ul li:nth-child(55){ z-index: 5; transform: rotate(324deg) translateX(420px); } #second ul li:nth-child(56){ z-index: 5; transform: rotate(330deg) translateX(420px); } #second ul li:nth-child(57){ z-index: 5; transform: rotate(336deg) translateX(420px); } #second ul li:nth-child(58){ z-index: 5; transform: rotate(342deg) translateX(420px); } #second ul li:nth-child(59){ z-index: 5; transform: rotate(348deg) translateX(420px); } #second ul li:nth-child(60){ z-index: 5; transform: rotate(354deg) translateX(420px); } #hour{ height: 600px; width: 600px; position: absolute; top: calc(50% - 300px); left: calc(50% - 300px); transform: rotate(0deg); } #hour ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(300px); } #hour ul li:nth-child(2){ z-index: 5; transform: rotate(30deg) translateX(300px); } #hour ul li:nth-child(3){ z-index: 5; transform: rotate(60deg) translateX(300px); } #hour ul li:nth-child(4){ z-index: 5; transform: rotate(90deg) translateX(300px); } #hour ul li:nth-child(5){ z-index: 5; transform: rotate(120deg) translateX(300px); } #hour ul li:nth-child(6){ z-index: 5; transform: rotate(150deg) translateX(300px); } #hour ul li:nth-child(7){ z-index: 5; transform: rotate(180deg) translateX(300px); } #hour ul li:nth-child(8){ z-index: 5; transform: rotate(210deg) translateX(300px); } #hour ul li:nth-child(9){ z-index: 5; transform: rotate(240deg) translateX(300px); } #hour ul li:nth-child(10){ z-index: 5; transform: rotate(270deg) translateX(300px); } #hour ul li:nth-child(11){ z-index: 5; transform: rotate(300deg) translateX(300px); } #hour ul li:nth-child(12){ z-index: 5; transform: rotate(330deg) translateX(300px); } #minute{ height: 720px; width: 720px; position: absolute; top: calc(50% - 360px); left: calc(50% - 360px); transform: rotate(0deg); } #minute ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(360px); } #minute ul li:nth-child(2){ z-index: 5; transform: rotate(6deg) translateX(360px); } #minute ul li:nth-child(3){ z-index: 5; transform: rotate(12deg) translateX(360px); } #minute ul li:nth-child(4){ z-index: 5; transform: rotate(18deg) translateX(360px); } #minute ul li:nth-child(5){ z-index: 5; transform: rotate(24deg) translateX(360px); } #minute ul li:nth-child(6){ z-index: 5; transform: rotate(30deg) translateX(360px); } #minute ul li:nth-child(7){ z-index: 5; transform: rotate(36deg) translateX(360px); } #minute ul li:nth-child(8){ z-index: 5; transform: rotate(42deg) translateX(360px); } #minute ul li:nth-child(9){ z-index: 5; transform: rotate(48deg) translateX(360px); } #minute ul li:nth-child(10){ z-index: 5; transform: rotate(54deg) translateX(360px); } #minute ul li:nth-child(11){ z-index: 5; transform: rotate(60deg) translateX(360px); } #minute ul li:nth-child(12){ z-index: 5; transform: rotate(66deg) translateX(360px); } #minute ul li:nth-child(13){ z-index: 5; transform: rotate(72deg) translateX(360px); } #minute ul li:nth-child(14){ z-index: 5; transform: rotate(78deg) translateX(360px); } #minute ul li:nth-child(15){ z-index: 5; transform: rotate(84deg) translateX(360px); } #minute ul li:nth-child(16){ z-index: 5; transform: rotate(90deg) translateX(360px); } #minute ul li:nth-child(17){ z-index: 5; transform: rotate(96deg) translateX(360px); } #minute ul li:nth-child(18){ z-index: 5; transform: rotate(102deg) translateX(360px); } #minute ul li:nth-child(19){ z-index: 5; transform: rotate(108deg) translateX(360px); } #minute ul li:nth-child(20){ z-index: 5; transform: rotate(114deg) translateX(360px); } #minute ul li:nth-child(21){ z-index: 5; transform: rotate(120deg) translateX(360px); } #minute ul li:nth-child(22){ z-index: 5; transform: rotate(126deg) translateX(360px); } #minute ul li:nth-child(23){ z-index: 5; transform: rotate(132deg) translateX(360px); } #minute ul li:nth-child(24){ z-index: 5; transform: rotate(138deg) translateX(360px); } #minute ul li:nth-child(25){ z-index: 5; transform: rotate(144deg) translateX(360px); } #minute ul li:nth-child(26){ z-index: 5; transform: rotate(150deg) translateX(360px); } #minute ul li:nth-child(27){ z-index: 5; transform: rotate(156deg) translateX(360px); } #minute ul li:nth-child(28){ z-index: 5; transform: rotate(162deg) translateX(360px); } #minute ul li:nth-child(29){ z-index: 5; transform: rotate(168deg) translateX(360px); } #minute ul li:nth-child(30){ z-index: 5; transform: rotate(174deg) translateX(360px); } #minute ul li:nth-child(31){ z-index: 5; transform: rotate(180deg) translateX(360px); } #minute ul li:nth-child(32){ z-index: 5; transform: rotate(186deg) translateX(360px); } #minute ul li:nth-child(33){ z-index: 5; transform: rotate(192deg) translateX(360px); } #minute ul li:nth-child(34){ z-index: 5; transform: rotate(198deg) translateX(360px); } #minute ul li:nth-child(35){ z-index: 5; transform: rotate(204deg) translateX(360px); } #minute ul li:nth-child(36){ z-index: 5; transform: rotate(210deg) translateX(360px); } #minute ul li:nth-child(37){ z-index: 5; transform: rotate(216deg) translateX(360px); } #minute ul li:nth-child(38){ z-index: 5; transform: rotate(222deg) translateX(360px); } #minute ul li:nth-child(39){ z-index: 5; transform: rotate(228deg) translateX(360px); } #minute ul li:nth-child(40){ z-index: 5; transform: rotate(234deg) translateX(360px); } #minute ul li:nth-child(41){ z-index: 5; transform: rotate(240deg) translateX(360px); } #minute ul li:nth-child(42){ z-index: 5; transform: rotate(246deg) translateX(360px); } #minute ul li:nth-child(43){ z-index: 5; transform: rotate(252deg) translateX(360px); } #minute ul li:nth-child(44){ z-index: 5; transform: rotate(258deg) translateX(360px); } #minute ul li:nth-child(45){ z-index: 5; transform: rotate(264deg) translateX(360px); } #minute ul li:nth-child(46){ z-index: 5; transform: rotate(270deg) translateX(360px); } #minute ul li:nth-child(47){ z-index: 5; transform: rotate(276deg) translateX(360px); } #minute ul li:nth-child(48){ z-index: 5; transform: rotate(282deg) translateX(360px); } #minute ul li:nth-child(49){ z-index: 5; transform: rotate(288deg) translateX(360px); } #minute ul li:nth-child(50){ z-index: 5; transform: rotate(294deg) translateX(360px); } #minute ul li:nth-child(51){ z-index: 5; transform: rotate(300deg) translateX(360px); } #minute ul li:nth-child(52){ z-index: 5; transform: rotate(306deg) translateX(360px); } #minute ul li:nth-child(53){ z-index: 5; transform: rotate(312deg) translateX(360px); } #minute ul li:nth-child(54){ z-index: 5; transform: rotate(318deg) translateX(360px); } #minute ul li:nth-child(55){ z-index: 5; transform: rotate(324deg) translateX(360px); } #minute ul li:nth-child(56){ z-index: 5; transform: rotate(330deg) translateX(360px); } #minute ul li:nth-child(57){ z-index: 5; transform: rotate(336deg) translateX(360px); } #minute ul li:nth-child(58){ z-index: 5; transform: rotate(342deg) translateX(360px); } #minute ul li:nth-child(59){ z-index: 5; transform: rotate(348deg) translateX(360px); } #minute ul li:nth-child(60){ z-index: 5; transform: rotate(354deg) translateX(360px); } #day{ height: 240px; width: 240px; position: absolute; top: calc(50% - 120px); left: calc(50% - 120px); transform: rotate(0deg); } #day ul li:nth-child(1){ z-index: 5; transform: rotate(0deg) translateX(120px); } #day ul li:nth-child(2){ z-index: 5; transform: rotate(11.25deg) translateX(120px); } #day ul li:nth-child(3){ z-index: 5; transform: rotate(22.5deg) translateX(120px); } #day ul li:nth-child(4){ z-index: 5; transform: rotate(33.75deg) translateX(120px); } #day ul li:nth-child(5){ z-index: 5; transform: rotate(45deg) translateX(120px); } #day ul li:nth-child(6){ z-index: 5; transform: rotate(56.25deg) translateX(120px); } #day ul li:nth-child(7){ z-index: 5; transform: rotate(67.5deg) translateX(120px); } #day ul li:nth-child(8){ z-index: 5; transform: rotate(78.75deg) translateX(120px); } #day ul li:nth-child(9){ z-index: 5; transform: rotate(90deg) translateX(120px); } #day ul li:nth-child(10){ z-index: 5; transform: rotate(101.25deg) translateX(120px); } #day ul li:nth-child(11){ z-index: 5; transform: rotate(112.5deg) translateX(120px); } #day ul li:nth-child(12){ z-index: 5; transform: rotate(123.75deg) translateX(120px); } #day ul li:nth-child(13){ z-index: 5; transform: rotate(135deg) translateX(120px); } #day ul li:nth-child(14){ z-index: 5; transform: rotate(146.25deg) translateX(120px); } #day ul li:nth-child(15){ z-index: 5; transform: rotate(157.5deg) translateX(120px); } #day ul li:nth-child(16){ z-index: 5; transform: rotate(168.75deg) translateX(120px); } #day ul li:nth-child(17){ z-index: 5; transform: rotate(180deg) translateX(120px); } #day ul li:nth-child(18){ z-index: 5; transform: rotate(191.25deg) translateX(120px); } #day ul li:nth-child(19){ z-index: 5; transform: rotate(202.5deg) translateX(120px); } #day ul li:nth-child(20){ z-index: 5; transform: rotate(213.75deg) translateX(120px); } #day ul li:nth-child(21){ z-index: 5; transform: rotate(225deg) translateX(120px); } #day ul li:nth-child(22){ z-index: 5; transform: rotate(236.25deg) translateX(120px); } #day ul li:nth-child(23){ z-index: 5; transform: rotate(247.5deg) translateX(120px); } #day ul li:nth-child(24){ z-index: 5; transform: rotate(258.75deg) translateX(120px); } #day ul li:nth-child(25){ z-index: 5; transform: rotate(270deg) translateX(120px); } #day ul li:nth-child(26){ z-index: 5; transform: rotate(281.25deg) translateX(120px); } #day ul li:nth-child(27){ z-index: 5; transform: rotate(292.5deg) translateX(120px); } #day ul li:nth-child(28){ z-index: 5; transform: rotate(303.75deg) translateX(120px); } #day ul li:nth-child(29){ z-index: 5; transform: rotate(315deg) translateX(120px); } #day ul li:nth-child(30){ z-index: 5; transform: rotate(326.25deg) translateX(120px); } #day ul li:nth-child(31){ z-index: 5; transform: rotate(337.5deg) translateX(120px); } #day ul li:nth-child(32){ z-index: 5; transform: rotate(348.75deg) translateX(120px); } </style> </head> <body> <div class="home"> <div class="thetime"> <ul> <li class="timeting"> 2019年 </li> </ul> </div> <div id="second"> <ul> <li v-for="second in seconds"> {{ second.name }} </li> </ul> </div> <div id="minute"> <ul> <li v-for="minute in minutes"> {{ minute.name }} </li> </ul> </div> <div id="hour"> <ul> <li v-for="hour in hours"> {{ hour.name }} </li> </ul> </div> <div id="apm"> <ul> <li v-for="apm in apms"> {{apm.name}} </li> </ul> </div> <div id="week"> <ul> <li v-for="week in weeklist"> {{week.name}} </li> </ul> </div> <div id="day"> <ul> <li v-for="day in days"> {{day.name}} </li> </ul> </div> <div id="month"> <ul> <li v-for="month in months"> {{month.name}} </li> </ul> </div> </div> </body> <script> var demo = new Vue({ el:'#week', data:{ weeklist: [ { name: '星期一', active:false },{ name: '星期二', active:false },{ name: '星期三', active:false },{ name: '星期四', active:false },{ name: '星期五', active:false },{ name: '星期六', active:false },{ name: '星期日', active:false },{ name: '', active:false } ] }, }); var demo2 = new Vue({ el:'#month', data:{ months: [ { name: '一月', active:false },{ name: '二月', active:false },{ name: '三月', active:false },{ name: '四月', active:false },{ name: '五月', active:false },{ name: '六月', active:false },{ name: '七月', active:false },{ name: '八月', active:false },{ name: '九月', active:false },{ name: '十月', active:false },{ name: '十一月', active:false },{ name: '十二月', active:false } ] }, }); var demo3 = new Vue({ el:'#second', data:{ seconds: [ { name: '一秒', active:false },{ name: '二秒', active:false },{ name: '三秒', active:false },{ name: '四秒', active:false },{ name: '五秒', active:false },{ name: '六秒', active:false },{ name: '七秒', active:false },{ name: '八秒', active:false },{ name: '九秒', active:false },{ name: '十秒', active:false },{ name: '十一秒', active:false },{ name: '十二秒', active:false },{ name: '十三秒', active:false },{ name: '十四秒', active:false },{ name: '十五秒', active:false },{ name: '十六秒', active:false },{ name: '十七秒', active:false },{ name: '十八秒', active:false },{ name: '十九秒', active:false },{ name: '二十秒', active:false },{ name: '二十一秒', active:false },{ name: '二十二秒', active:false },{ name: '二十三秒', active:false },{ name: '二十四秒', active:false },{ name: '二十五秒', active:false },{ name: '二十六秒', active:false },{ name: '二十七秒', active:false },{ name: '二十八秒', active:false },{ name: '二十九秒', active:false },{ name: '三十秒', active:false },{ name: '三十一秒', active:false },{ name: '三十二秒', active:false },{ name: '三十三秒', active:false },{ name: '三十四秒', active:false },{ name: '三十五秒', active:false },{ name: '三十六秒', active:false },{ name: '三十七秒', active:false },{ name: '三十八秒', active:false },{ name: '三十九秒', active:false },{ name: '四十秒', active:false },{ name: '四十一秒', active:false },{ name: '四十二秒', active:false },{ name: '四十三秒', active:false },{ name: '四十四秒', active:false },{ name: '四十五秒', active:false },{ name: '四十六秒', active:false },{ name: '四十七秒', active:false },{ name: '四十八秒', active:false },{ name: '四十九秒', active:false },{ name: '五十秒', active:false },{ name: '五十一秒', active:false },{ name: '五十二秒', active:false },{ name: '五十三秒', active:false },{ name: '五十四秒', active:false },{ name: '五十五秒', active:false },{ name: '五十六秒', active:false },{ name: '五十七秒', active:false },{ name: '五十八秒', active:false },{ name: '五十九秒', active:false },{ name: '六十秒', active:false } ] }, }); var demo5 = new Vue({ el:'#minute', data:{ minutes: [ { name: '一分', active:false },{ name: '二分', active:false },{ name: '三分', active:false },{ name: '四分', active:false },{ name: '五分', active:false },{ name: '六分', active:false },{ name: '七分', active:false },{ name: '八分', active:false },{ name: '九分', active:false },{ name: '十分', active:false },{ name: '十一分', active:false },{ name: '十二分', active:false },{ name: '十三分', active:false },{ name: '十四分', active:false },{ name: '十五分', active:false },{ name: '十六分', active:false },{ name: '十七分', active:false },{ name: '十八分', active:false },{ name: '十九分', active:false },{ name: '二十分', active:false },{ name: '二十一分', active:false },{ name: '二十二分', active:false },{ name: '二十三分', active:false },{ name: '二十四分', active:false },{ name: '二十五分', active:false },{ name: '二十六分', active:false },{ name: '二十七分', active:false },{ name: '二十八分', active:false },{ name: '二十九分', active:false },{ name: '三十分', active:false },{ name: '三十一分', active:false },{ name: '三十二分', active:false },{ name: '三十三分', active:false },{ name: '三十四分', active:false },{ name: '三十五分', active:false },{ name: '三十六分', active:false },{ name: '三十七分', active:false },{ name: '三十八分', active:false },{ name: '三十九分', active:false },{ name: '四十分', active:false },{ name: '四十一分', active:false },{ name: '四十二分', active:false },{ name: '四十三分', active:false },{ name: '四十四分', active:false },{ name: '四十五分', active:false },{ name: '四十六分', active:false },{ name: '四十七分', active:false },{ name: '四十八分', active:false },{ name: '四十九分', active:false },{ name: '五十分', active:false },{ name: '五十一分', active:false },{ name: '五十二分', active:false },{ name: '五十三分', active:false },{ name: '五十四分', active:false },{ name: '五十五分', active:false },{ name: '五十六分', active:false },{ name: '五十七分', active:false },{ name: '五十八分', active:false },{ name: '五十九分', active:false },{ name: '六十分', active:false } ] }, }); var demo6 = new Vue({ el:'#hour', data:{ hours: [ { name: '一点', active:false },{ name: '二点', active:false },{ name: '三点', active:false },{ name: '四点', active:false },{ name: '五点', active:false },{ name: '六点', active:false },{ name: '七点', active:false },{ name: '八点', active:false },{ name: '九点', active:false },{ name: '十点', active:false },{ name: '十一点', active:false },{ name: '十二点', active:false } ] }, }); var demo5 = new Vue({ el:'#day', data:{ days: [ { name: '一号', active:false },{ name: '二号', active:false },{ name: '三号', active:false },{ name: '四号', active:false },{ name: '五号', active:false },{ name: '六号', active:false },{ name: '七号', active:false },{ name: '八号', active:false },{ name: '九号', active:false },{ name: '十号', active:false },{ name: '十一号', active:false },{ name: '十二号', active:false },{ name: '十三号', active:false },{ name: '十四号', active:false },{ name: '十五号', active:false },{ name: '十六号', active:false },{ name: '十七号', active:false },{ name: '十八号', active:false },{ name: '十九号', active:false },{ name: '二十号', active:false },{ name: '二十一号', active:false },{ name: '二十二号', active:false },{ name: '二十三号', active:false },{ name: '二十四号', active:false },{ name: '二十五号', active:false },{ name: '二十六号', active:false },{ name: '二十七号', active:false },{ name: '二十八号', active:false },{ name: '二十九号', active:false },{ name: '三十号', active:false },{ name: '三十一号', active:false } ] }, }); var demo4 = new Vue({ el:'#apm', data:{ apms: [ { name: '上午', active:false },{ name: '下午', active:false } ] }, }); var ment1 = 0; var ment2 = 0; var oldsecond = 0; function secondfun(){ var data = new Date(); var newsecond = data.getSeconds(); var m = newsecond-oldsecond; if(m<0){ m = 1; } alldeg = (m)*(-6); oldsecond = newsecond; function someAnimation(args){ ment2 = ment1 + args; document.getElementById("second").style.WebkitTransform="rotate("+ment2+"deg)"; } ment1 = ment2; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("second").style.WebkitTransform="rotate("+ment1+"deg)"; setTimeout("secondfun()",1000); } secondfun(); var ment3 = 0; var ment4 = 0; var oldminute = 0; function minutefun(){ var data = new Date(); var newminute = data.getMinutes()-1; var m = newminute-oldminute; if(m<0){ m = 1; } alldeg = (m)*(-6); oldminute = newminute; function someAnimation(args){ ment4 = ment3 + args; document.getElementById("minute").style.WebkitTransform="rotate("+ment4+"deg)"; } ment3 = ment4; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("minute").style.WebkitTransform="rotate("+ment3+"deg)"; setTimeout("minutefun()",1000); } minutefun(); var ment5 = 0; var ment6 = 0; var oldhour = 0; function hourfun(){ var data = new Date(); var newhour = data.getHours()-1; if(newhour>12){ document.getElementById("apm").style.WebkitTransform="rotate(180deg)"; } var m = newhour-oldhour; if(m<0){ m = 1; } alldeg = (m)*(-30); oldhour = newhour; function someAnimation(args){ ment6 = ment5 + args; document.getElementById("hour").style.WebkitTransform="rotate("+ment6+"deg)"; } ment5 = ment6; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("hour").style.WebkitTransform="rotate("+ment5+"deg)"; setTimeout("hourfun()",1000); } hourfun(); var ment7 = 0; var ment8 = 0; var oldmounth = 0; function mounthfun(){ var data = new Date(); var newmounth = data.getMonth(); var m = newmounth-oldmounth; if(m<0){ m = 1; } alldeg = (m)*(-30); oldmounth = newmounth; function someAnimation(args){ ment8 = ment7 + args; document.getElementById("month").style.WebkitTransform="rotate("+ment8+"deg)"; } ment7 = ment8; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("month").style.WebkitTransform="rotate("+ment7+"deg)"; setTimeout("mounthfun()",1000); } mounthfun(); var ment9 = 0; var ment10 = 0; var oldweek = 0; function weekfun(){ var data = new Date(); var newweek = data.getDay()-1; var m = newweek-oldweek; if(m<0){ m = 1; } alldeg = (m)*(-45); oldweek = newweek; function someAnimation(args){ ment10 = ment9 + args; document.getElementById("week").style.WebkitTransform="rotate("+ment10+"deg)"; } ment9 = ment10; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("week").style.WebkitTransform="rotate("+ment9+"deg)"; setTimeout("weekfun()",1000); } weekfun(); var ment11 = 0; var ment12 = 0; var oldday = 0; function dayfun(){ var data = new Date(); var newday = data.getDate()-1; var m = newday-oldday; if(m<0){ m = 1; } alldeg = (m)*(-11.25); oldday = newday; function someAnimation(args){ ment12 = ment11 + args; document.getElementById("day").style.WebkitTransform="rotate("+ment12+"deg)"; } ment11 = ment12; function donghua(){ for(var i=0;i<=10;i++){ setTimeout((function(pos){ return function(){ someAnimation(pos); } })(i*alldeg/10),i*50) } } var play = setInterval(donghua(),500); clearInterval(play); document.getElementById("day").style.WebkitTransform="rotate("+ment11+"deg)"; setTimeout("dayfun()",1000); } dayfun(); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 仿抖音罗盘时钟 喜欢 (0)or分享 (0)
