**
js學習中的小實操
**
實現類似於鐘錶功能的一個頁面，包括年月日時分秒，和系統時間一致，秒數每一秒都會改變，背景顏色爲黑色，字體顏色爲白色。
那麼下面寫一下代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
//設置背景顏色爲黑色
body{
background: #000000;
}
//設置時間以及點的顏色爲白色，還有大小
#hour,#minute,#second,#a,#year,#month,#day{
color: #FFFFFF;
font-size: 100px;
}
</style>
</head>
<body>
//這裏是我們的盒子分別裝着我們的年月日還有時間
<span >00</span>
<span id="year">0</span>
<span id="a">年</span>
<span id="month">0</span>
<span id="a">月</span>
<span id="day">0</span>
<span id="a">日</span>
<span id="hour">00</span>
<span id="a">:</span>
<span id="minute">00</span>
<span id="a">:</span>
<span id="second">00</span>
<script>
//用document.getEIementById來獲取這個控件對象
var year=document.getElementById("year");
month=document.getElementById("month");
day=document.getElementById("day");
hour=document.getElementById("hour");
minute=document.getElementById("minute");
second=document.getElementById("second");
//創建函數，改變盒子裏的數據
function fn(){
var date=new Date();
year.innerHTML=date.getFullYear();
month.innerHTML=date.getMonth();
day.innerHTML=date.getDate();
hour.innerHTML=sw(date.getHours());
minute.innerHTML=sw(date.getMinutes());
second.innerHTML=sw(date.getSeconds());
}
fn();
//添加一個定時器，每隔1000毫秒執行一次上面我們創建的函數，也就是秒針每一秒都會動
setInterval(
function(){
fn();
},1000)
//因爲當時分秒爲個位數的時候要顯示爲01、02這樣，所以我們再創建一個函數 用if來做判斷。
//爲單個數的時候就在前面加上一個0
function sw(time){
if(time<10){
return "0"+time;
}else{
return time;
}
}
/*因爲我們的定時器是每隔一秒除法一次，意味着當我們執行成功之後，要等一秒之後，該效果時間纔會出現
所以我們應該直接先執行一次上面的fn（）函數*/
fn();
</script>
</body>
</html>
執行結果：
那麼這便是成功了。
**