By supplementing the code that implements the real-time clock displays the current time: year, month, day, hour, minute, second, date.
<!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</supplementary code// > </body> </html>
Answer:
<!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; } was oYear = byClass ( ' year ' ); was oMonth = byClass ( ' month ' ); was Ōdate = byClass ( ' date ' ); was oHour = byClass ( ' hours ' ); was oMinute = byClass ( ' minutes ' ); was 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 = " appears 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>