How to use HTML to set a Super Fire Compass clock

This article mainly introduces how to use HTML to set the super fire compass clock, the article is very detailed, has a certain reference value, interested friends must read it!

Code block:

Js Shake Compass clock * {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} var monthText= ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"] Var dayText= [0 1, 0 2, 0 3, 0 4, 0 5, 0 6, 0 7, 0 8, 0 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20. "21", "22", "23", "24", "25", "26", "27", "28", "29", "31"] Var weekText= ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] Var hourText= [zero, 01:00, 02:00, 03:00, 04:00, 05:00, 06:00, 07:00, 08:00, 09:00, 00:00, 11: 00, 12: 00, 13: 00, 14: 00, 15: 00, 16: 00, 17: 00, 18: 00, 19: 00 "20:00", "21:00", "22:00", "23:00"] Var minuteText= [0 1, 0 2, 0 3, 0 4, 0 5, 0 6, 0 7, 0 8, 0 9, 0 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39" "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58" "59 points", "60 points"] Var secondsText= [0 1, 0 2, 0 3, 0 4, 0 5, 0 6, 0 7, 0 8, 0 9, 0 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20 seconds "21 seconds", "22 seconds", "23 seconds", "24 seconds", "25 seconds", "26 seconds", "27 seconds", "28 seconds", "29 seconds", "30 seconds", "31 seconds", "32 seconds", "33 seconds", "34 seconds", "35 seconds", "36 seconds", "37 seconds", "38 seconds", "39 seconds" "40 seconds", "41 seconds", "42 seconds", "43 seconds", "44 seconds", "45 seconds", "46 seconds", "47 seconds", "48 seconds", "49 seconds", "50 seconds", "51 seconds", "52 seconds", "53 seconds", "54 seconds", "55 seconds", "56 seconds", "57 seconds", "58 seconds" 59 seconds, 60 seconds] 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 item0