我们经常会需要在页面中添加一个日期时间，时间是需要它以动态来显示出来的。

首先需要把样式先确定好，我定的样式是这样的：


javascript动态时钟 js怎么显示动态时间_控件

分成三块，文字、日期和时间、星期。因为我的样式是要在一行里面全部显示的，所以三块都是用行级标签span标签。日期时间还有星期是需要用js来获取到实时时间，所以分别给他们一个id。


<body>
	<span>当前时间：</span>
	<span id="time"></span>
	<span id="xq"></span>
</body>

我们需要实现的是动态显示的时间，1秒更新一次数据，所以页面需要1秒刷新一次，用setInterval()方法可以实现。

setInterval(code,millisec)按照指定的周期（以毫秒计）来调用函数或计算表达式。

code是要调用的函数或要执行的代码串，必须写的。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计，也是必须的。1000毫秒=1秒。

document.getElementById(id)通过id获得html中的控件，也是将事件和响应行为绑定起来

getFullYear() 获得年份

getMonth() 获得月份（返回的是0~11，需要在后面+1变成1~12）

getDate() 获得一月中的日（返回的是1~31）

getHours()  获得小时

getMinutes() 获得分钟

getSeconds() 获得秒数

 

Object.innerHTML=HTML向某对象插入内容

Object.innerTEXT=TEXT

innerHTML可以插入包含html语法的内容，它是可以对html代码进行识别并转换。

innerTEXT可以向某对象插入内容，但它并不对html代码进行识别，会把html代码当做字符串插入，就是输入的是什么就是什么。

所以一般建议使用innerHTML。

 

下面是实现获取实时时间的js代码：


<script type="text/javascript">
	//页面加载成功后运行
	window.οnlοad=function(){
		//1s加载一次
		setInterval("clock()",1000);
	}
		
	function clock () {
		//全局变量d，创建Date对象
		d = new Date();
		//获得日期时间控件
		var spt = document.getElementById("time");
		//格式：2018/2/5  19:19:33
		spt.innerHTML=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
			
		//获得星期控件
		var spweek = document.getElementById("weekday");
		spweek.innerHTML=week();
			
	}

现在我们剩下星期还没有获得。

getDay() 获得一周中的某一天（返回的是0~6）

而我们需要的是星期一、星期二这种形式，所以我们需要用别的方式来转换一下。


方式一：

0~6可以作为一个数组的下标，星期几可以作为数组具体的值。getDay()返回的是0~6，就可以用array[obj.getDay()]来获得数组的值，也就是可以获得星期几了。

function week () {
		var weekday = new Array(7)
		weekday[0] = "星期天"
		weekday[1] = "星期一"
		weekday[2] = "星期二"
		weekday[3] = "星期三"
		weekday[4] = "星期四"
		weekday[5] = "星期五"
		weekday[6] = "星期六"
			
		return weekday[d.getDay()];
	}

方式二：


一个星期一共有七天，七天中获得一天，我们可以把它看作是七个事件选其中一个来执行，而switch 语句是用来选择要执行的多个代码块之一。 


function week(){
		var weekday = d.getDay();
		switch (weekday){
			case 0:
				return "星期天";
				break;
			case 1:
				return "星期一";
				break;
			case 2:
				return "星期二";
				break;
			case 3:
				return "星期三";
				break;
			case 4:
				return "星期四";
				break;
			case 5:
				return "星期五";
				break;
			case 6:
				return "星期六";
				break;
			default:
				return false;
				break;
		}
	}


日期时间动态显示，最主要的就是星期的显示，getday()获得的0~6要想办法把它转换为星期几的格式。

js我还是在初学阶段，所以会有比较多的注释，还有前面一些内容也是比较啰嗦的，有错的一定要提醒我喔。谢谢看到这里的你们，希望没有浪费你们的可爱又宝贵的时间。

这是我第一次写博客，有好多不足的地方，比如解释代码的时候不会用一些专业的词汇来描述，又不会流畅的表达。写博客我会当作是一些方法还有错误来记录。这个比较简单的，我还写了那么久，时间还是有的，希望我会一直写下去。