时间对象Date

创建日期 new Date()

• new Date()在不传递参数的情况下，默认返回当前时间

var time = new Date()
console.log(time)

创建并指定日期

• 3种写法，如下：

var date = new Date("2020-12-12 12:12:12:12");
console.log(date)   //Sat Dec 12 2020 12:12:12 GMT+0800 (中国标准时间)

var data = new Date("2020/12-12 12:12:12:12")
console.log(date)   //Sat Dec 12 2020 12:12:12 GMT+0800 (中国标准时间)

//new Date()中的参数用逗号隔开，分别代表（年，月，日，时，分，秒，毫秒） 
//月份从0开始,0~11，0就是1月
var date = new Date(2020,11,12,12,12,12,12)
console.log(date)   //Sat Dec 12 2020 12:12:12 GMT+0800 (中国标准时间)

日期对象的方法

get方法（获取）

• 获取年：getFullYear()
• 获取月：getMonth()
  • 取值范围0-11,0就代表1月
  • 在使用时要+1，写成getMonth()+1
• 获取日：getDate()
  • 取值范围1-31
• 获取周：getDay()
  • 取值范围0-6，0代表星期天
• 获取时：getHours()
  • 取值范围0-23,24进制
• 获取分：getMinutes()
  • 取值范围0-59，60进制
• 获取秒：getSeconds()
  • 取值范围0-59，60进制
• 获取毫秒：getMilliseconds()
  • 取值范围0-999
  • 1000毫秒 == 1秒

set方法（设置）

• 同上get方法，get改为set即为设置年，月，日，时，分，秒，毫秒

时间戳

• 返回值：从指定的日期,到现在的毫秒数
  • 默认从1970年1月1日 00:00:00开始计算
• 方法：
  1. getTime()
  2. valueOf()
  3. Date.now()
  4. Date.parse("2020-12-12 12:12:12:12") 把一个指定日期转换成时间戳

处理日期对象的格式

• 使用bootcdn 中 moment.js或day.js，通过引入外部插件对日期格式进行处理
  • 这里我使用的是moment.js
  • 引入<script src="<https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.js>"></script>

//html头部映入moment.js
<script src="<https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.js>"></script>

//常见日期格式：
var date = new Date()
console.log(moment().format("YYYY-MM-DD"))  //2023-09-12
console.log(moment().format("YYYY/MM/DD"))    //2023/09/12
console.log(moment().format("YYYY年MM月DD日"))    //2023年09月12日
console.log(moment().format("YYYY年MM月DD日 hh时mm分ss秒SSS毫秒"))    //2023年09月12日 08时41分08秒663毫秒

定时器

• 在js中，有两种定时器，倒计时定时器 和 间隔时间定时器
• 在定时器中，时间是按照毫秒计算的，1000毫秒 = 1秒

间隔时间定时器

• 间隔多少时间执行一次定时器中的匿名函数
• 返回值：返回定时器的序列号，从1开始
• 语法：setInterval(参数1，参数2，参数3）
  • 第一个参数会当做函数来执行
  • 第二个参数是间隔时间
  • 第三个参数是传入参数1的实参

语法1：两个参数

//每间隔1秒，在控制台输出111
var timer = setInterval("console.log(111)",1000)
// 相当于：
var timer = setInterval(function(){
    console.log("111")
},1000)
console.log(timer)  //返回的是定时器timer的序列号

语法2：三个参数

//每间隔一秒，在控制台输出一次 “你好！世界”
var timer = setInterval(function (name) {
    console.log("你好！" + name)
}, 1000, "世界")

倒计时定时器

• 倒计时多少时间之后执行函数
• 只会执行一次
• 返回值：返回定时器的序列号，从1开始
• 语法：setTimeout(参数1，参数2，参数3）
  • 同上setInterval的语法

//两秒后，在控制台输出一次 “你好！世界”
var timer = setTimeout(function (name) {
    console.log("你好！" + name)
}, 2000, "世界")

清除定时器

• clearTimeout( ) ： 清除倒计时定时器
• clearInterval( ) ：清除间隔时间定时器
• ( ) 中填写要清除的定时器
• 一般配合用户事件使用

//案例描述：
//页面中有开始、停止两个按钮，
//点击开始，开启间隔时间定时器，每隔1秒在控制台输出一次 “你好！世界” ，
//点击暂停后清除间隔时间定时器，控制台不再输出内容

<button id="start">开始</button>
<button id="end">停止</button>
<script>
    var oStart = document.querySelector("#start")
    var oEnd = document.querySelector("#end")
    var timer
    oStart.onclick = function () {
        // 每次开启定时器之间，清除上一个定时器，保证只有一个定时器在运行
        clearInterval(timer)
        // 开启新的定时器
        timer = setInterval(function (name) {
            console.log("你好！" + name)
        }, 1000, "世界")
    }
    oEnd.onclick = function () {
        clearTimeout(timer)
    }
</script>

同步和异步的概念

同步

• 同步：不等于同时
• 同步：按照顺序一步一步的执行
  • 从上往下执行，就是同步的

console.log(1111)
console.log(2222)
console.log(3333)

异步

• 可以不按照顺序执行

console.log(1111)
// 被推入执行队列中，等待被执行
// 即使setTimeout的延迟时间为0，也要到最后才执行
setTimeout(function(){
    console.log(2222)
},0)
console.log(3333)