JS学习笔记--第四期（Date对象与定时器函数）

Date对象

Date对象简介

Date对象是JS中常用的一种对象，Date对象一般用于处理日期与时间。在使用Date对象之前要进行对象的实例化，然后用调用方法的方式使用Date对象内置的各种方法。
Date对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数，并且提供了一系列处理时间与日期方法

创建Date对象

创建Date对象的方法有很多种，可以根据自己不同的需求选择创建的方法。

• 创建当前日期时间的Date对象。

var D = new Date();
//用这种方法创建得到的时间就是当前系统的时间
//例如我在2021/3/17 13：47分实例化一个Date对线后
//得到的结果是：Wed Mar 17 2021 13:47:13 GMT+0800 (中国标准时间)

• 以1970 年 1 月 1 日 00:00:00 GMT+0000为标准时间为基准，按经过的毫秒数创建时间。

var D = new Date(1000);
//用这种方法创建得到的时间就是已1970 年 1 月 1 日 00:00:00 GMT+0000为标准时间并且经过了1000毫秒之后的时间。
//得到的结果便是：1970-1-1 00:00:01 GMT+0000

• 在Date内输入参数创建时间

var d = new Date(yy,mm,[dd],[hh],[mm],[ss],[ms]);
//除年月以外其他参数可以选择填写或者不填写，如果不填写结果为0，月份参数从0开始，0代表1月 

• 以日期字符串为参数进行创建，Date会自动解析日期字符串

var d = new Date(dateString);
//输入其中的日期字符串会自动被解析

解析支持各种日期格式
时间可选，默认为0
时间格式固定，使用冒号隔开

日期字符串举例:
“2000-1-1”
“2000/1/1”
“2000 1 1”
“2000 Jan 1”
“2000-1-1 23:59”
“2000-1-1 23:59:59”
“2000-1-1 23:59:59:999”

Date对象方法

Date对象有很多方法可供使用，以下列出部分方法以供参考，更全面的请参考：
https://www.runoob.com/jsref/jsref-obj-date.html

定时器函数

setTimeout()函数

setTimeout()用于在指定的毫秒数后调用函数或计算表达式
使用格式如下：

setTimeout("调用的函数名称或表达式",等待的毫秒数) ;

要注意一点，在使用setTimeout()函数的时候，调用表达式的时候要加引号，调用函数的时候可加引号也可不加引号，但是不加引号的时候一定不要加括号，不然函数会立即执行。

调用函数（不加引号）

setTimeout(hello, 3000)
//仅填写函数名，不能加()，否则会立即执行  
function hello() {  
    alert("hello");  
} 

调用匿名函数（不加引号）

setTimeout(function(){  
    alert("hello");  
}, 3000)

调用表达式（加引号）

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

调用函数（加引号）

setTimeout("hello()", 3000)  
function hello() {  
    alert("hello");  
} 

setTimeout()函数实现循环执行

setTimeout()函数本身不能用来实现循环操作，但是如果将setTimeout()函数封装并调用自己的话就可以实现定式循环执行代码的功能（相当于递归）。
示例：

function timer(){  
    console.log("1");  
    setTimeout(timer,1000)  
}  
timer();  

setInterval()函数

setInterval()可按照指定的周期（毫秒）来调用函数或计算表达式，多用于进行循环执行函数，调用函数的名称书写规则和setTimeout()函数一致。

用法示例：

setInterval("调用的函数名称或表达式",等待的毫秒数) 
//实际应用举例：
<p id="text"></p>  
<script>  
    var num = 0;  
    setInterval(timer, 1000)  
    function timer() {  
        num++;  
        document.getElementById("text").innerHTML = num;  
    } 
</script> 

清除定时器

setTimeout()和setInterval()在执行的时候会产生定时器
setTimeout()产生的定时器会在执行后自动清除
setInterval()产生的定时器不会自动清除

示例：

<p id="text"></p>  
<input type="button" name="stop" id="stop" value="stop" onclick="stop()" />  
<script>  
    var num = 0;      
    var timer = setInterval(timer, 1000)      
    function timer() {      
        num++;      
        document.getElementById("text").innerHTML = num;      
    }     
    function stop(){    
        clearInterval(timer);    
    }  
</script>