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 = '今天是' + "xa0xa0" + Year + '年' + "xa0xa0" + Month + '月' + "xa0xa0" + Day + '日' + "xa0xa0" + '星期' + 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 = '今天是' + "xa0xa0" + Year + '年' + "xa0xa0" + Month + '月' + "xa0xa0" + Day + '日' + "xa0xa0" + '星期' + week[W] + hour + ':' + minute + ':' + second
}
//使用定时器每秒想页面写入一次时间
setInterval("clock()", 1000);
</script>
注: xa0 这个是字符串拼接的空格,需要地方自行添加
完结,撒花!!!
