一、题目要求
阅读下列说明、效果图和代码,进行静态网页开发,填写(1)至(12)代码。
二、说明
用html+css+js制作了一个简易时钟效果图如5-1,可以通过获取当前时间实时更新时钟的刻度及时间显示。
项目名称为clock,包含首页clock.html、css文件夹、js文件夹,其中,css文件夹包含style.css文件; js文件夹包含script.js。
三、效果图
四、代码填空
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>clock</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="clock">
<div id="date" class="date box"></div>
<div class="clock-face">
<div class="marker twelve"></div>
<div class="marker three"></div>
<div class="marker six"></div>
<div class="marker nine"></div>
<div id="minute-hand" class="hand minute-hand"></div>
<div id="hour-hand" class="hand hour-hand"></div>
<div id="second-hand" class="hand second-hand"></div>
<div id="centre" class="centre"></div>
<div id="digital-time" class="digital-time box"></div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
script.js
__(1)__
days[0]= '星期日';
days[1]= '星期一';
days[2]= '星期二';
days[3]= '星期三';
days[4]= '星期四';
days[5]= '星期五';
__(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');
var clock = 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.__(7)__= format(hours)+":"+format(minutes)+":"+format(seconds);
}
function format(num) {
return __(8)__;
}
(function run() {
__(9)__;
__(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
|