在线演示
JS代码
<script type="text/javascript">
function getDou(number) {
if(number < 10) {
return '0' + number;
}
else {
return number;
}
}
function getWeek(week) {
var sWeek = null;
switch(week) {
case 0:
sWeek = '星期日'
break;
case 1:
sWeek = '星期一'
break;
case 2:
sWeek = '星期二'
break;
case 3:
sWeek = '星期三'
break;
case 4:
sWeek = '星期四'
break;
case 5:
sWeek = '星期五'
break;
case 6:
sWeek = '星期六'
break;
default:
break;
}
return ' ' + sWeek;
}
window.onload = function() {
//var oDate = document.getElementsByTagName("p")[0];
//var oTime = document.getElementsByTagName("p")[1];
var oDate = document.getElementById("tickDate");
var oTime = document.getElementById("tickTime");
function timeBox() {
var date = new Date();
var sDate = null;
var sTime = null;
var hours = date.getHours();
if(hours > 12) {
hours %= 12;
sTime = '下午 ';
}
else {
sTime = '上午 ';
}
sTime += getDou(hours) + ':' + getDou(date.getMinutes()) + ':' + getDou(date.getSeconds());
sTime += getWeek(date.getUTCDay());
oTime.innerHTML = sTime;
sDate = '';
//年份
sDate = date.getUTCFullYear() + "年";
//月份
if(date.getUTCMonth() < 9) {
sDate += '0' + (date.getUTCMonth() + 1) + "月";
}
else {
sDate += (date.getUTCMonth() + 1) + "月";
}
//日期
sDate += date.getUTCDate() + "日";
oDate.innerHTML = sDate;
}
setInterval(timeBox, 1000);
timeBox();
}
</script>
<style type="text/css">
.tickDate{text-align:center; color:#000; font-size:50px;}
.tickTime{text-align:center; color:#000; font-size:40px;}
</style>
<div>
<p class="tickDate" id="tickDate">日期</p>
<p class="tickTime" id="tickTime">时间</p>
</div>