一、题目要求
阅读下列说明、效果图和代码，进行静态网页开发，填写（1）至（12）代码。
二、说明
用html+css+js制作了一个简易时钟效果图如5-1，可以通过获取当前时间实时更新时钟的刻度及时间显示。
项目名称为clock，包含首页clock.html、css文件夹、js文件夹，其中，css文件夹包含style.css文件； js文件夹包含script.js。
三、效果图
四、代码填空
index.html
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>clock</title><linkrel="stylesheet"href="css/style.css"type="text/css"/></head><body><divclass="container"><divclass="clock"><divid="date"class="date box"></div><divclass="clock-face"><divclass="marker twelve"></div><divclass="marker three"></div><divclass="marker six"></div><divclass="marker nine"></div><divid="minute-hand"class="hand minute-hand"></div><divid="hour-hand"class="hand hour-hand"></div><divid="second-hand"class="hand second-hand"></div><divid="centre"class="centre"></div><divid="digital-time"class="digital-time box"></div></div></div></div><scriptsrc="js/script.js"></script></body></html>
script.js
//声明一个7个长度的数组days__(1)__
days[0]='星期日';
days[1]='星期一';
days[2]='星期二';
days[3]='星期三';
days[4]='星期四';
days[5]='星期五';//往数组days后面添加一个元素，值为星期六;__(2)__
var dateDisplay = document.getElementById('date');var hourHand = document.getElementById('hour-hand');var minuteHand = document.getElementById('minute-hand');var secondHand = document.getElementById('second-hand');var digitalTime = document.getElementById('digital-time');varclock=function(){//获取当前时间var timeNow =__(3)__;var day = timeNow.getDay();
dateDisplay.innerHTML = days[day];//获取当前时间的秒var seconds =__(4)__;var sRot = seconds *6-90;//获取当前时间的分钟var minutes =__(5)__;var mRot =(minutes *6)+(seconds /10)-90;//获取当前时间的小时var hours =__(6)__;var hRot =(hours %12*30)+(minutes /2)-90;
hourHand.style.transform ="rotate("+hRot+"deg)";
minuteHand.style.transform ="rotate("+mRot+"deg)";
secondHand.style.transform ="rotate("+sRot+"deg)";//给digitalTime的内容赋值
digitalTime.__(7)__=format(hours)+":"+format(minutes)+":"+format(seconds);}functionformat(num){//三元运算符，如果小于10则在num前面加个0，否则返回numreturn__(8)__;}(functionrun(){//调用clock方法__(9)__;//定义定时器1秒后执行调用自己__(10)__(function(){__(11)__();},__(12)__);})();
五、参考答案
（1）var days=new Array(7);
（2）days.push(‘星期六’);
（3）new Date()
（4）timeNow.getSeconds()
（5）timeNow.getMinutes()
（6）timeNow.getHours()
（7）innerHTML
（8）num<10?(“0”+num):num
（9）clock()
（10）setTimeout
（11）run
（12）1000
标签：
前端
javascript
本文转载自: https://blog.csdn.net/fujian87232/article/details/124949718
版权归原作者 弹了个球 所有， 如有侵权，请联系我们删除。
版权归原作者 弹了个球 所有， 如有侵权，请联系我们删除。