一、題目要求
閱讀下列說明、效果圖和代碼，進(jìn)行靜態(tài)網(wǎng)頁開發(fā)，填寫（1）至（12）代碼。
二、說明
用html+css+js制作了一個(gè)簡易時(shí)鐘效果圖如5-1，可以通過獲取當(dāng)前時(shí)間實(shí)時(shí)更新時(shí)鐘的刻度及時(shí)間顯示。
項(xiàng)目名稱為clock，包含首頁clock.html、css文件夾、js文件夾，其中，css文件夾包含style.css文件； js文件夾包含script.js。
三、效果圖
文章來源：http://www.zghlxwxcb.cn/news/detail-490459.html
四、代碼填空
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
//聲明一個(gè)7個(gè)長度的數(shù)組days
__(1)__
days[0]= '星期日';
days[1]= '星期一';
days[2]= '星期二';
days[3]= '星期三';
days[4]= '星期四';
days[5]= '星期五';
//往數(shù)組days后面添加一個(gè)元素，值為星期六;
__(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() {
//獲取當(dāng)前時(shí)間
var timeNow = __(3)__;
var day = timeNow.getDay();
dateDisplay.innerHTML = days[day];
//獲取當(dāng)前時(shí)間的秒
var seconds =__(4)__;
var sRot = seconds * 6 - 90;
//獲取當(dāng)前時(shí)間的分鐘
var minutes = __(5)__;
var mRot = (minutes * 6) + (seconds / 10) - 90;
//獲取當(dāng)前時(shí)間的小時(shí)
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的內(nèi)容賦值
digitalTime.__(7)__= format(hours)+":"+format(minutes)+":"+format(seconds);
}
function format(num) {
//三元運(yùn)算符，如果小于10則在num前面加個(gè)0，否則返回num
return __(8)__;
}
(function run() {
//調(diào)用clock方法
__(9)__;
//定義定時(shí)器1秒后執(zhí)行調(diào)用自己
__(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文章來源地址http://www.zghlxwxcb.cn/news/detail-490459.html
到了這里，關(guān)于1+X Web前端（初級）實(shí)操題考試樣題（含答案）01的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
