Html部分
<span id="date"></span>
Js部分
var date = document.getElementById('date');//首先獲取到HTML里需要插入的節點 var time = new Date;//獲取中國標准時間 var Year = time.getFullYear();//獲取當前年份 var Month = time.getMonth() + 1;//獲取當前月份(＋1是因為js中月份是從0開始的) var Day = time.getDate();//獲取當前幾號 var W = time.getDay();//獲取當前星期幾 var week = ['零', "一", "二", "三", "四", "五", "六", "日"];//一般星期幾都是用漢字寫的,這里轉換一下漢字 var hour = time.getHours(); //獲取系統時 var minute = time.getMinutes(); //獲取系統分 var second = time.getSeconds(); //獲取系統秒 //字符串拼接,拼接到一起 date.innerHTML = '今天是' + "\xa0\xa0" + Year + '年' + "\xa0\xa0" + Month + '月' + "\xa0\xa0" + Day + '日' + "\xa0\xa0" + '星期' + week[W] + hour + ':' + minute + ':' + second
效果如圖:
月/日/時/分/秒如果是單數就很難看,接下來,我們把這些如果是單數的情況下前面加上零
首先把它們轉換為字符串
var Month = (time.getMonth() + 1).toString(); var Day = time.getDate().toString(); var hour = time.getHours().toString(); var minute = time.getMinutes().toString(); var second = time.getSeconds().toString();
如果只有個位的話增加零的方法:
function timeAddzero(str) { if (str.length <= 1) { str = '0' + str; } return str }
最后執行函數:
Month = timeAddzero(Month); Day = timeAddzero(Day); hour = timeAddzero(hour); minute = timeAddzero(minute); second = timeAddzero(second);
效果如下:我只等秒
接下來我們讓時間動起來:
使用定時器每秒向頁面寫入一次時間
setInterval("clock()", 1000);
效果嘛!不會錄屏你們自己看吧
下面是完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Time</title>
</head>
<body>
<span id="date"></span>
</body>
</html>
<script>
function clock() {
var date = document.getElementById('date');//首先獲取到HTML里需要插入的節點
var time = new Date;//獲取中國標准時間
var Year = time.getFullYear();//獲取當前年份
var Month = (time.getMonth() + 1).toString();//獲取當前月份(＋1是因為js中月份是從0開始的)
var Day = time.getDate().toString();//獲取當前幾號
var W = time.getDay();//獲取當前星期幾
var week = ['零', "一", "二", "三", "四", "五", "六", "日"];//一般星期幾都是用漢字寫的,這里轉換一下漢字
var hour = time.getHours().toString(); //獲取系統時
var minute = time.getMinutes().toString(); //獲取系統分
var second = time.getSeconds().toString(); //獲取系統秒
function timeAddzero(str) {
if (str.length <= 1) {
str = '0' + str;
}
return str
}
Month = timeAddzero(Month);
Day = timeAddzero(Day);
hour = timeAddzero(hour);
minute = timeAddzero(minute);
second = timeAddzero(second);
//字符串拼接,拼接到一起
date.innerHTML = '今天是' + "\xa0\xa0" + Year + '年' + "\xa0\xa0" + Month + '月' + "\xa0\xa0" + Day + '日' + "\xa0\xa0" + '星期' + week[W] + hour + ':' + minute + ':' + second
}
//使用定時器每秒想頁面寫入一次時間
setInterval("clock()", 1000);
</script>
注: \xa0 這個是字符串拼接的空格,需要地方自行添加
完結,撒花!!!
