1.目的
製作一個時鐘
2.示例代碼
圖片及源碼的github鏈接
014.時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>014.時鐘</title>
<script type="text/javascript">
window.onload = function () {
var oDiv = document.getElementById('div1');
function fnClock() {
var sNow = new Date();
// 獲取年份
var iYear = sNow.getFullYear();
// 獲取月份，月份 0 - 11
var iMonth = sNow.getMonth() + 1;
// iDate = s
var iDate = sNow.getDate();
// 獲取周，0 - 6
var iWeek = sNow.getDay();
// 獲取小時
var iHour = sNow.getHours();
// 獲取分鐘
var iMinute = sNow.getMinutes();
// 獲取秒
var iSecond = sNow.getSeconds();
oDiv.innerHTML = '當前時間是：' + iYear + '年' + iMonth + '月' + iDate + '日' + fnWeekTransform(iWeek) + ' ' + iHour + ':' + iMinute + ':' + fnTodate(iSecond);
}
fnClock(); // 開始調用一次，解決初始時空白
setInterval(fnClock, 1000);
function fnWeekTransform(n) {
if (n === 0){
return '星期一';
}
else if(n === 1){
return '星期二';
}
else if(n === 2){
return '星期三';
}
else if(n === 3){
return '星期四';
}
else if(n === 4){
return '星期五';
}
else if(n === 5){
return '星期六';
}
else if(n === 6){
return '星期日';
}
}
function fnTodate(n) {
if(n < 10){
return '0' + n;
}
else{
return n;
}
}
}
</script>
<style type="text/css">
div{
text-align: center;
font-size: 30px;
color: gold;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>