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

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





评论 2 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

Vicki_

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值