通过补充代码，实现时钟实时显示当前时间：年、月、日、时、分、秒、日期。
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>超酷时钟的制作</title> <style> .container { text-align: center; font-size: 28px; color: #ccc; background-color: #ccc; text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } .container span{ text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> </head> <body> <div class="container"> <p>超酷时钟</p> <p><span class=‘year‘>2012</span>年<span class=‘month‘>09</span>月<span class=‘date‘>02</span>日</p> <p><span class=‘hours‘>08</span>：<span class=‘minutes‘>08</span>：<span class=‘seconds‘>08</span>星期<span class=‘day‘>日</span></p> </div> <script type="text/javascript"> //补充代码 </script> </body> </html>
参考答案：
<!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <title>数码时钟</title> <style> .container { text-align: center; font-size: 28px; color: #ccc; background-color: #ccc; text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff; } .container span { text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff; } </style> </head> <body> <div class="container"> <p>超酷时钟</p> <p><span class=‘year‘>2012</span>年<span class=‘month‘>09</span>月<span class=‘date‘>02</span>日</p> <p><span class=‘hours‘>08</span>：<span class=‘minutes‘>08</span>：<span class=‘seconds‘>08</span>星期<span class=‘day‘>日</span></p> </div> <script type="text/javascript"> window.onload = function () { function byClass(arg) { return typeof (arg) === ‘string‘ ? document.getElementsByClassName(arg)[0] : arg; } var oYear = byClass(‘year‘); var oMonth = byClass(‘month‘); var oDate = byClass(‘date‘); var oHour = byClass(‘hours‘); var oMinute = byClass(‘minutes‘); var oSecond = byClass(‘seconds‘); var oDay = byClass(‘day‘); function toDuble(n) { if (n < 10) { return ‘0‘ + n; } else { return n; } } function getTime(arg) { var time = null; var oDate = new Date(); switch (arg) { case ‘year‘: time = oDate.getFullYear(); break; case ‘month‘: time = toDuble(oDate.getMonth() + 1); break; case ‘date‘: time = toDuble(oDate.getDate()); break; case ‘hours‘: time = toDuble(oDate.getHours()); break; case ‘minutes‘: time = toDuble(oDate.getMinutes()); break; case ‘seconds‘: time = toDuble(oDate.getSeconds()); break; case ‘day‘: time = daySwith(oDate.getDay()); break; } return time; } function daySwith(arg) { var day = null; switch (arg) { case 0: day = ‘日‘; break; case 1: day = ‘一‘; break; case 2: day = ‘二‘; break; case 3: day = ‘三‘; break; case 4: day = ‘四‘; break; case 5: day = ‘五‘; break; case 6: day = ‘六‘; break; default: day = "出现bug"; } return day; } function switchContent() { oYear.innerHTML = getTime(‘year‘); oMonth.innerHTML = getTime(‘month‘); oDate.innerHTML = getTime(‘date‘); oHour.innerHTML = getTime(‘hours‘); oMinute.innerHTML = getTime(‘minutes‘); oSecond.innerHTML = getTime(‘seconds‘); oDay.innerHTML = getTime(‘day‘); } setInterval(switchContent, 1000); switchContent(); } </script> </body> </html>
原文：https://www.cnblogs.com/f6056/p/11096349.html