<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>时钟</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> body,div{ padding: 0; margin:0; } #clock{ margin: 0 auto; 300px; height:80px; border-radius: 50px; border: 1px solid green; text-align: center; line-height: 80px; font-weight: bold; } span{ margin: 20px; } </style> </head> <body> <div id="clock"> <span></span>时 <span></span>分 <span></span>秒 </div> <script type="text/javascript"> window.onload=function() { var qClock=document.getElementById("clock"); var qSpan=document.getElementsByTagName("span"); getTimes(); function getTimes() { var qDate=new Date(); var qDate=[qDate.getHours(),qDate.getMinutes(),qDate.getSeconds()]; for(var i in qDate) qSpan[i].innerHTML=format(qDate[i]) } function format(a) { return a.toString().replace(/^(\d)$/, "0$1") } setInterval(getTimes,1000); } </script> </body> </html>