27内置日期对象Date 延时器 制作倒计时 BOM

27内置日期对象Date 延时器 制作倒计时 BOM

一、内置日期对象Date

日期对象类型使用子UTC (Coordinated Universal Time，国际协调时间) 1970年1月1日午夜 (零点) 开始经过毫秒数来保存日期。Date类型保存的日期能够精确到1970年1月1日或之后的285616年

创建一个日期对象
var d = new Date()

从日期对象获取信息
	d.getFullYear()		//获取年
	d.getMonth()		//获取月，月份是从0开始计算
	d.getDate()			//获取日期
	d.getDay()			//获取周

	d.getHours()		//获取小时
	d.getMinutes()		//获取分钟
	d.getSeconds()		//获取秒数
	d.getMilliseconds()	//获取毫秒

时间戳
	d.getTime()			//获取从1970年1月1日至今的毫秒


设置日期,直接设置时间，会清零时分秒
var d = new Date("2021/11/5 00:00:00")
var d = new Date("2021-11-5 00:00:00")

从日期对象设置信息
	d.setFullYear()		//设置年
	d.setMonth()		//设置月，超过11累加年
	d.setDate()			//设置日期，超过最大日期累加月

	d.setHours()		//设置小时，超过24累加天
	d.setMinutes()		//设置分钟，超过60累加小时
	d.setSeconds()		//设置秒数，超过60累加分钟
	d.setMilliseconds()	//设置毫秒，超过1000累加秒

时间戳
	d.setTime()			//设置从1970年1月1日过去了多少毫秒

二、使用定时器和内置日期制作一个倒计时

//使用严格模式
"use strict"

//获取元素
var h1 = document.getElementsByTagName("h1")[0]

//设置需要倒计时的时间
var endTime = new Date("2022/1/1 00:00:00")

//
var t = function () {
	var nowTime = new Date()
    
    //现在和需要倒计时的时间相差的毫秒数
	var seconds = parseInt((endTime.getTime() - nowTime.getTime()) / 1000)
    
    //计算天数
	var d = parseInt(seconds / 3600 / 24)
    
    //计算小时数
	var h = parseInt(seconds / 3600 % 24)
    
    //计算分钟
	var m = parseInt(seconds / 60 % 60)
    
    //计算秒数
	var s = parseInt(seconds % 60)
    
    //为了让数字小于10时显示成两位数
	if(d < 10) {
		d = "0" + d
	}
	if(h < 10) {
		h = "0" + h
	}
	if (m < 10) {
		m = "0" + m
	}
	if(s < 10) {
		s = "0" + s
	}
    
    //倒计时内容
	h1.innerHTML = "距离新年还有" + d + "天" + h + "小时" + m + "分钟" + s + "秒"
}

//先调用一次，避免闪烁
t()

//使用定时器，每1s计算一次
setInterval(t, 1000)

html部分只需要一个盒子来装倒计时内容

<h1></h1>

三、BOM

BOM (Browser Object Model) 浏览器对象模型

作用

主要提供了访问和操作浏览器各组件的方式

- window浏览器窗口对象是js中最大的对象，其他所有的对象都是window的子对象

- document文档对象，代表一个网页

- location地址对象，对地址栏的操作一些方法

- navigation浏览器软件对象，主要用来判断用户用的是什么浏览器，可以解决兼容性问题

- scree屏幕对象，可以获取屏幕相关的信息

- history历史记录对象，可以对浏览器的历史记录进行相关的操作

注意点

- window是全局浏览器内置顶级对象，表示浏览器中打开的窗口
（没有应用于window对象的公开标准，不过所有浏览器都支持该对象）
	window对象表示一个浏览器窗口或一个框架
    
- 在客户端JavaScript中，window对象是全局对象，所有的表达式都在
当前的环境中计算，也就是说，要引用当前窗口根本不需要特殊的语法，
可以把那个窗口的属性作为全局变量来使用

四、BOM window对象常用的方法

- prompt()	显示可提示用户输入的对话框

- alert()	显示一个带有提示信息和一个“确定”按钮的警示对话框

- close()	关闭浏览器窗口

- confirm()	显示一个带有提示信息、“确定”和“取消”按钮的对话框

- 定时器
	间隔定时器setInterval()	clearInerval()
    超时定时器setTimeout()	clearTimeout()