JS获取当前年月日及12小时制式的时钟

来源:https://www.sucaihuo.com/js/2482.html 2017-07-20 23:20浏览(1981) 收藏

一款JS获取当前年月日及12小时进制的时钟特效,纯javascript获取了当前的时间,包括年月日、时分秒、上下午和星期,以12小时制式显示动态时间,实用性还是挺强的,喜欢的童鞋请收下吧。
JS获取当前年月日及12小时制式的时钟
分类:日期时间 > 年月时间段 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,先设置好页面元素的样式,代码如下:

接着通过javascript来获取当前时间的年月日和时分秒,代码如下:

<script type="text/javascript">
function clock_12h(){
	var today = new Date(); //获得当前时间
	//获得年、月、日,Date()函数中的月份是从0-11计算
	var year = today.getFullYear();  
	var month = today.getMonth()+1;
	var date = today.getDate();
	var hour = today.getHours();  //获得小时、分钟、秒
	var minute = today.getMinutes();
	var second = today.getSeconds();

	var apm="AM"; //默认显示上午: AM
	if (hour>12) //按12小时制显示
	{
	hour=hour-12;
	apm="PM"  ;
	}
	var weekday = 0;
	switch(today.getDay()){
	case 0:
		weekday = "星期日";
	break;
	case 1:
		weekday = "星期一";
	break;
	case 2:
		weekday = "星期二";
	break;
	case 3:
		weekday = "星期三";
	break;
	case 4:
		weekday = "星期四";
	break;
	case 5:
		weekday = "星期五";
	break;
	case 6:
		weekday = "星期六";
	break;
	}

	/*设置div的内容为当前时间*/
	document.getElementById("myclock").innerHTML="<h2>您好,欢迎访问我的时间!</h2><h2>"+year+"年"+month+"月"+date+"日&nbsp;<span>"+hour+":"+minute+":"+second+"&nbsp;"+apm+"</span>&nbsp;"+weekday+"</h2>";
}
/*使用setInterval()每间隔指定毫秒后调用clock_12h()*/
var myTime = setInterval("clock_12h()",1000);
</script>

页面的body部分,仅需设置一个指定id的div容器即可,代码如下:

<div id="myclock"></div>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2