JavaScript的date对象+BOM、window的浅了解

日期时间对象date

1、作用：处理日期时间

2、Date 日期时间对象类型名

3、创建对象：

        3.1、创建当前时间

                var date=new Date() //构造函数方法

                叫法：实例对象、对象名、引用变量

                表示当前时间

       以中国标准时间形式显示

 var date=new Date()
  console.log(date)//返回当前时间

        3.2、创建指定时间的对象

                var date=new Date(2022,10,4,10,10,01) (年,月,日,时,分,秒)

                var date=new Date('2022-10-4 10:10:01') ('年-月-日 时:分:秒')

var date=new Date(2022,10,4,10,10,01)
var date1=new Date('2022-10-4 10:10:01')
console.log(date)
console.log(date1)//输出的结果一样

方法

1、getFullYear() 获取年份

2、getMonth() 获取月份

3、getDate() 获取天

4、getHours() 获取小时

5、getMinutes() 获取分钟

6、getSeconds() 获取秒

7、getDay() 获取星期几

8、getTime() 获取毫秒

var date=new Date()
var year=date.getFullYear()
var month=date.getMonth()
var day=date.getDate()
var hour=date.getHours()
var m=date.getMinutes()
var s=date.getSeconds()
var week=date.getDay()
var time=date.getTime()
console.log(year)
console.log(month+1)//从0开始的，所以需要加一
console.log(day)
console.log(hour)
console.log(m)
console.log(s)
console.log(week)
console.log(time)

最终结果

应用示例

1、格式化日期时间

var date=new Date()
var year=date.getFullYear()
var month=date.getMonth()
var day=date.getDate()
var hour=date.getHours()
var m=date.getMinutes()
var s=date.getSeconds()
var dateTime=`${year}年${month}月${day}日${hour}时${m}分${s}秒`
console.log(dateTime)//2022年7月25日10时6分56秒

//优化版
function formateCurrentTime(type) {
    var time = new Date() // Thu Aug 25 2022 09:48:16 GMT+0800 (中国标准时间)
    var year = time.getFullYear()
    var month = time.getMonth()
    var date = time.getDate()
    var hours = time.getHours()
    var minutes = time.getMinutes()
    var seconds = time.getSeconds()
​
    switch(type){
        case 0:
            return `${year}年${month}月${date} ${hours}时${minutes}分${seconds}秒`
        case 1:
            return `${year}/${month}/${date} ${hours}:${minutes}:${seconds}`
        case 2:
            return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
        default:
            return `${year}-${month}-${date} ${hours}:${minutes}:${seconds}`
    }
}
var currentTime = formateCurrentTime(1) //yyyy-mm-dd hh:MM:ss  yyyy年mm月dd hh时MM分ss秒
document.write(currentTime)

2、计算时间差

格林威治时间：计算机时间的元点 规则：1970年7月1日（00:00:00 GMT)

毫秒换算
年 1000*60*60*24*30*365
月 1000*60*60*24*30
天 1000*60*60*24
小时 1000*60*60
分钟 1000*60
秒  1000
​
解题思路

 首先明确我们需要求时间差的两个时间
 其次我们以两个时间的getTime相减得到两个时间之间的总毫秒差
 如果我们要得到天数就使用总毫秒差去除1000*60*60*24，创建一个新变量接收得到相差多少天。如果存在余数那么就floor向下取整
 然后我们在求小时数就使用我们刚刚所求出来的总毫秒数减去刚刚所得到的整数天数的毫秒数得到余下多少毫秒数，再用余下的毫秒数除以1000*60*60，创建一个新变量接收。
 得到剩余多少个小时。如果存在余数那么就floor向下取整。   
 求年（1000*60*60*24*365）
 求月（1000*60*60*24*30）
 求天（1000*60*60*24）
 求时（1000*60*60）
 求分（1000*60）
 求秒（1000）

计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差？

思想：1、计算时间毫秒差值

2、换算 秒 -> 分 -> 时 -> 天 ->年

var time1=new Date('2019-01-01 00:00:00')
var time2=new Date('2019-01-03 04:55:34')
var time=time2.getTime()-time1.getTime()//毫秒差
//天  相差的毫秒/1天的毫秒=相差的天数
var day=time/(1000*60*60*24)
day=Math.floor(day)
//小时  相差毫秒-day天的毫秒
var hoursTime=time-day*(1000*60*60*24)
var hours=hoursTime/(1000*60*60)
hours=Math.floor(hours)
//分钟
var minutesTime=hoursTime-hours*(1000*60*60)
var minutes=minutesTime/(1000*60)
minutes=Math.floor(minutes)
//秒
var secondsTime=minutesTime-minutes*(1000*60)
var seconds=secondsTime/(1000)
​
console.log(day+'天'+hours+'小时'+minutes+'分钟'+seconds+'秒')

BOM ()

JavaScript组成

        BOM（浏览器对象模型）、DOM（文档对象模型）、ECMASCRIPT （JavaScript语法）

BOM

        作用：操作浏览器的能力

                    Window对象，浏览器窗口对象

系统创建Window

属性和方法

1、属性：

1.1、history：子对象 （历史记录）

作用：操作历史记录
创建：window.history（window可以省略）
方法：
  1、back 加载history对象列表中的前一个URL  【go(-1)】
  2、forward 加载history对象列表中的下一个URL  【go(1)】
  3、go 加载history对象列表中的某个具体URL

1.2、location：子对象 （地址栏对象/位置对象）

作用：刷新、URL地址栏输入框
创建：window.location（window可以省略）
方法：
  1、href   location.href / location.href='https://www.baidu.com/'
      （1）、获取当前页面URL地址    （2）、设置URL，跳转到URL地址对应页面
  2、reload  location.reload()  刷新

1.3、document: 子对象 （文档对象 html文档）重点学习

2、方法：(使用 window根对象属性或方法时，window对象可以省略。)

2.1、alert() 信息提示框

        window.alert():使用 window根对象属性或方法时，window对象可以省略。

2.2、confirm() 信息确认框

        一般用于信息的删除

2.3、prompt() 信息的输入框

        会有一个返回值，字符类型

2.4、close() 关闭浏览器窗口

2.5、open() 打开浏览器窗口

        open(url参数,窗口名称,参数)

2.6、setTimeout() 倒计时定时器

语法：

//启动倒计时定时器
window.setTimeout(function(){
​
//定时器执行代码   
​
},1000)  //(参数1:函数，参数2:时间)
​
//关闭倒计时定时器
clearTimeout()

//示例
var timer=setTimeout(function(){
    var n=5
    console.log(n)
},1000)//1s后执行
clearTimeout(timer)

2.7、setInterval() 循环定时器

语法：

//启动循环定时器
var timer=window.setInterval(function(){
​
//定时器执行代码   
​
},1000)  //(参数1:函数，参数2:时间)
​
//关闭循环定时器
clearInterval(timer)

//示例
var n = 5
var timer = setInterval(function () {
    if (n == 0) {
        clearInterval(timer) //结束定时器
    }
console.log(n--)//输出：5、4、3、2、1、0
}, 1000)

window对象

        浏览窗口宽高

                window.innerHeight //获取浏览器的高度

                window.innerWidth //获取浏览器的宽度

        滚动事件属性

                window.οnscrοll=function(){

                        //内容

                }

document对象

        滚动条滚动的距离

                scrollTop 获取的是页面向上滚动的距离

        语法：（2选1）

                1、document.body.scrollTop

                2、document.documentElement.scrollTop

        兼容性

                return document.body.scrollTop || document.documentElement.scrollTop

        回到顶部

        1、一步到位

                document.documentElement.scrollTop=0

        2、平缓回到顶部

var timer=setInterval(function(){
    //获取高度  
    var  height=document.documentElement.scroll
    //每次移动的距离   
    document.documentElement.scroll=height-50 
    if(height<0){
        clearInterval(timer)
    }
},1000)