<!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>date</title> </head> <style> .clock1{ width: 200px; height: 50px; border-radius: 5px; line-height: 50px; text-align: center; border: 1px solid #ff6700; margin: 0 auto; } .clock2{ width: 200px; height: 200px; border: 2px solid #000; border-radius: 50%; position: relative; margin: 30px auto; /* transform-origin: bottom; */ } .box:nth-child(1){ width: 2px; height: 80px; background: #000; border-radius: 6px; position: absolute; left: 0; right: 0; margin: auto; margin-top:20px; transform-origin: 1px 80px; } .box:nth-child(2){ width: 4px; height: 60px; background: #ff6700; border-radius: 6px; position: absolute; left: 0; right: 0; margin: auto; margin-top:40px; transform-origin: 2px 60px; } .box:nth-child(3){ width: 6px; height: 40px; background: blueviolet; border-radius: 6px; position: absolute; left: 0; right: 0; margin: auto; margin-top:60px; transform-origin: 3px 40px; } .yuan{ width: 10px; height: 10px; border-radius: 50%; background: red; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } </style> <body> <!-- 电子表 --> <div class="clock1"> <span></span>/ <span></span>/ <span></span> <span></span>: <span></span>: <span></span> </div> <!-- 圆盘表 --> <div class="clock2"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="yuan"></div> </div> </body> </html> <!-- 电子表 --> <script> let spans=document.querySelectorAll(".clock1 span"); setInterval(function(){ let date1=new Date(); let year=date1.getFullYear(); let month=date1.getMonth(); let day=date1.getDate(); let hours=date1.getHours(); let min=date1.getMinutes(); let sec=date1.getSeconds(); spans[0].innerHTML=year; spans[1].innerHTML=month; spans[2].innerHTML=day; spans[3].innerHTML=hours; spans[4].innerHTML=min; spans[5].innerHTML=sec; // let mm=document.getElementById("Date") // console.log(showtime) // mm.innerHTML=year+"年"+month+"月"+day+"日"+hours+":"+min+":"+sec; },1000) </script> <!-- 圆盘钟表 --> <script> let span2=document.querySelectorAll(".clock2 .box") setInterval(function(){ let date2 = new Date(); // 得到最新的时间 let s = date2.getSeconds(); // 得到秒 let sDeg=s*6; let m = date2.getMinutes(); // let mDeg=6*m; let h = date2.getHours(); let hDeg=30*h; span2[0].style.transform = `rotate(${sDeg}deg)`; span2[1].style.transform = `rotate(${mDeg}deg)`; span2[2].style.transform = `rotate(${hDeg}deg)`; },1000) </script> <script> // let date1=new Date("2019/10/1 12:00:00") // let date2=new Date() // let year=date2.getFullYear() // let month=date2.getMonth() // let todey=date2.getDate() // let hour=date2.getHours() // let min=date2.getMinutes() // let sec=date2.getSeconds() // let haomiao=date2.getMilliseconds() // let xingqi=date2.getDay() // let time=date2.getTime() //1970.1.1 计算机元年至今的时间 //月份是从0开始 // let date1=new Date(); // date1.setFullYear(2020) // console.log(date1) </script>