JS之Date对象与定时器函数

最新推荐文章于 2022-04-07 09:31:14 发布

年少有为✘

最新推荐文章于 2022-04-07 09:31:14 发布

阅读量249

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_46454139/article/details/114896078

版权

文章目录

一、Date()对象
二、定时器函数

任务：如何在系统上动态的显示时间

一、Date()对象

我们在JS上想要获得系统的时间的话有一个很方便的途径就是使用JS内置的Date()对象。Date()对象的功能基本能够满足大部分对时间的处理，下面我们来具体的了解一下

Date()对象以1970年1月1日00：00：00的格林威治日期为起始时间

下面介绍一下Date()对象创建的三种方式和格式：

1. 不带参数：

 var myDate=new Date();

2. 创建一个指定日期的Date()对象：

 var myDate=new Date("2000-1-1");
 //此条语句表示的时间为：2000年1月1日
 /*除此之外Date()对象里面的代码还可以用不同的格式来表示
2000/1/1；2000 1 1；2000 Jan 1
*/

3. 创建一个指定时间的Date()对象：

 var myDate=new Date(2014,6,1,10,30,20,50);
 //此条语句表示的时间为：2014年6月1日10点30分20秒50毫秒
 //其中，除年月外，后面其他的也可以省略

上面我们提到了，Date()是一个对象，那么既然使对象应该类似java那样可以调用对象拥有的方法，下面我们就来看一下Date()对象都有哪些常用的方法

getYear();→返回年份（当前年份-1900）
getFullYear();→直接返回当前年份
getMonth();→返回月份（0-11）0代表1月
getDate();→返回日期数（1-31）
getDay();→返回星期数（0-6）0代表星期天，6代表星期一
getHours();→返回小时数（0-23）
getMinutes();→返回分钟数（0-59）
getSeconds();→返回秒数（0-59）
getMiliSeconds();→返回毫秒数（0-999）
getTime();→返回对应日期基线的毫秒
toGMTString();→以GMT格式表示日期对象
toLocaleString();→返回日期的字符串表示，其格式根据系统当前的区域设置来确定

使用innerHTML修改元素内容

<p id="time"></p>  
<script>  
    document.getElementById("time").innerHTML="time";
</script>

根据上面常用的Date()对象方法可以做一个小练习：
练习：在页面上打印当前的系统时间（格式如下图）
在这里插入图片描述

var mydate=new Date();
var year=mydate.getFullYear();
var month=mydate.getMonth()+1;//因为月份从0开始
var time=myDate.getDate();
var hour=myDate.getHours();
var minutes=myDate.getMinutes();
var seconds=myDate.getSeconds();
function fixedDigit(num){
	return num<10 ? "0"+num:num;
}
var dateString=year+"年"+fixedDigit(month)+"月"+fixedDigit(time)+"日 "+fixedDigit(hour)+
				":"+fixedDigit(minutes)+":"+fixedDigit(seconds)
				document.getElementById("time").innerHTML="当前日期为："+dateString;

二、定时器函数

setTimeout()：在指定的毫秒数之后调用函数或计算表达式
其中，setTimeout()可以分为调用函数和调用表达式

调用函数：
不加引号调用函数的情况：

setTimeout(hello, 3000) //表示延后3秒后调用hello函数
//仅填写函数名，不能加()，否则会立即执行  
function hello() {  
    alert("hello");  
}

加引号的情况下调用函数的话需要加上括号，不然不会延迟执行，而会立即执行：

setTimeout("hello", 3000) //这里加了引号之后，如果函数名后面不加括号的话，函数不会延迟执行
function hello() {  
    alert("hello");  
}

调用匿名函数：

setTimeout(function(){  //由于匿名函数没有名字，可以直接写在setTimeout()里面，也可以通过变量赋值的方式
    alert("hello");  
}, 3000)

调用表达式：

setTimeout("alert('hello')", 3000)

通过介绍setTimeout()函数，我们可以实现对一些东西的周期或者动态显示
比如，setTimeout()的自调用：

function timer(){  
    console.log("1");  
    setTimeout(timer,1000)  //在timer函数内部调用timer,实现自调用
}  
timer(); //在外面先要调用一次timer才能启动里面的自调用

setInterval() ：可按照指定的周期（毫秒）来调用函数或计算表达式

setInterval()与setTimeout()的不同点：

setTimeout()产生的定时器会在执行后自动清除
setInterval()产生的定时器不会自动清除(即周期执行，可以循环下去)

清除定时器：
clearInterval()、clearTimeout()可以清除定时器

通过上面的学习我们可以通过定时器函数实现对系统时间的动态显示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h2 id="time"></h2>
		<script type="text/javascript">
			function showdate(){
				var myDate= new Date();
				var year=myDate.getFullYear();
				var month=myDate.getMonth()+1;
				var time=myDate.getDate();
				var hour=myDate.getHours();
				var minutes=myDate.getMinutes();
				var seconds=myDate.getSeconds();
				function fixedDigit(num){
					return num<10 ? "0"+num:num;
				}
				var dateString=year+"年"+fixedDigit(month)+"月"+fixedDigit(time)+"日 "+fixedDigit(hour)+
				":"+fixedDigit(minutes)+":"+fixedDigit(seconds)
				document.getElementById("time").innerHTML="当前日期为："+dateString;
			}
			setInterval(showdate,1000);
		</script>
	</body>
</html>

年少有为✘

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS之Date对象与定时器函数

文章目录一、Date()对象二、定时器函数任务：如何在系统上动态的显示时间一、Date()对象我们在JS上想要获得系统的时间的话有一个很方便的途径就是使用JS内置的Date()对象。Date()对象的功能基本能够满足大部分对时间的处理，下面我们来具体的了解一下Date()对象以1970年1月1日00：00：00的格林威治日期为起始时间下面介绍一下Date()对象创建的三种方式和格式：1. 不带参数： var myDate=new Date();2. 创建一个指定日期的Date()对象：
复制链接

扫一扫