JS实现网页时钟

最新推荐文章于 2024-06-26 19:39:06 发布

都说了我不是彭于晏

最新推荐文章于 2024-06-26 19:39:06 发布

阅读量2.3w

点赞数 15

文章标签： JS

本文链接：https://blog.csdn.net/qq_40513088/article/details/84449179

版权

JS实现网页时钟

1.js获取时间new data

var myDate = new Date();//获取系统当前时间

myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
var mytime=myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

2.HTML DOM innerHTML 属性

定义和用法：

innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。

语法：

HTMLElementObject.innerHTML=text

例如：

比如在<body>中写了如下的代码：
<div id=top></div>

现在用top.innerHTML="..........";的方法就可以向这个id的位置写入HTML代码了。
例如top.innerHTML="<input type="button" name="我很帅" value="说的对">";就可以在top对应的位置出现一个button了。

3.网页时钟具体实现代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>网页时钟</title>
<script type="text/javascript">
    //判断时间是否为个位数，如果时间为个位数就在时间之前补上一个“0”
	function check(val) {
		if (val < 10) {
			return ("0" + val);
		} 
		else {
			return (val);
		}
	}
	function displayTime() {
		//获取div元素
		var timeDiv=document.getElementById("timeDiv");
		//获取系统当前的年、月、日、小时、分钟、毫秒
		var date = new Date();
		var year = date.getFullYear();
		var month = date.getMonth() + 1;
		var day = date.getDate();
		var hour = date.getHours();
		var minutes = date.getMinutes();
		var second = date.getSeconds();
		var timestr = year + "年" + month + "月" + day + "日  " + check(hour)
				+ ":" + check(minutes) + ":" + check(second);
		//将系统时间设置到div元素中
		timeDiv.innerHTML = timestr;
	}
	//每隔1秒调用一次displayTime函数
	function start(){
        window.setInterval("displayTime()",1000)//单位是毫秒
}
</script>
</head>
<!--  body onload:当整个html页面加载完成后执行此函数  -->
<body onload="start();">
<div id="timeDiv"></div> 
</body>
</html>

4.实现效果

都说了我不是彭于晏

关注

15
点赞
踩
50

收藏

觉得还不错? 一键收藏
3
评论
JS实现网页时钟

JS实现网页时钟1.js获取时间new datavar myDate = new Date();//获取系统当前时间myDate.getYear(); //获取当前年份(2位)myDate.getFullYear(); //获取完整的年份(4位,1970-????)myDate.getMonth(); //获取当前月份(0-11,0代表1月)myDate.getDate(); //获...
复制链接

扫一扫