前端学习第二阶段Day09

 function currentTime(type){
        var date=new Date()//获取当地时间
        var year=date.getFullYear()//获取年
        var month=date.getMonth()//获取月 记得显示要+1
        var day=date.getDate()//获取天
        var hours=date.getHours()//获取小时
        var minutes=date.getMinutes()//获取分钟
        var seconds=date.getSeconds()//获取秒
        switch (type) {//判断传入的参数 返回一定类型
            case 0:`${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
            case 1:`${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
            case 2:`${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
            default://参数为其它就默认输出的格式
            `${year}年${month}月${day}日 ${hours}时${minutes}分${seconds}秒`
        }
    }

2.计算时间差

用毫秒数除以你一天的毫秒数 ->再用得到的余数除以一小时为单位的毫秒数->依次类推

 function distance(){
       var time1=new Date('2022-08-25 10:56:00')
       var time2=new Date('2001-11-04 12:55:34')
        time1=time1.getTime()
        time2=time2.getTime()
       var time=time1-time2
       //换算天 相差的总毫秒数/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)
       console.log(`${day}天${hours}小时`)
   }
   distance()
   //从出生到现在经历了多少天多少小时

2.BOM浏览器对象模型

1.作用：

提供操作浏览器的能力

2.window对象浏览器窗口对象

1.创建window 系统自动创建

2.属性和方法

1.子对象：【子属性】

1.history 历史记录对象

1.作用：提供操作历史记录【前进后退】的能力

2.创建：window.history/history

3.方法：

back()--> 后退

forward()---> 前进

go()-->去到某一个具体的页面

history.go(1)==history.forward()

history.go(-1)==history.back()

2.location地址栏对象（位置对象）

1.作用：

负责提供操作地址栏，刷新url地址栏输入框

2.创建：

window.location

3.属性：

常用： location.href//实现页面跳转

location.href//获取当前页面的地址

location.href=''//设置url 跳转到url地址对应页面

hash：

返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串

host：

返回服务器名称和端口号

hostname：

返回不带端口号的服务器名称

pathname：

返回URL中的目录和文件名

port：

返回URL中指定的端口号。如果URL中不包含端口号这个属性返回空字符串

protocol：

返回页面使用的协议

search：

返回URL的查询字符串。这个字符串以问号开头

4.方法：

location.reload():

重新加载当前文档

3.document 文档对象

4.navigator 专门用来获取浏览器相关信息

navigator.userAgent 是获取的浏览器的整体信息

navigator.appName 获取的是浏览器的名称

navigator.appVersion 获取的是浏览器版本

navigator.platform 获取的是当前计算机的操作系统

5.screen 用户显示屏幕相关信息

2.属性

1.浏览器窗口尺寸

innerHeight 获取浏览器窗口的高度（包含滚动条）

innerWidth 获取浏览器窗口的宽度（包含滚动条）

2.滚动事件属性

onscroll 返回值是一个函数

当浏览器的滚动条滚动的时候触发或者鼠标轮滚动的时候触发

                                        window.οnscrοll=function(){

                                                console.log('浏览器滚动了')

                                                }

3.浏览器滚动的距离【document对象】

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

获取方式

document.documentElement.scrollTop//有文档声明时使用

document.body.scrollTop//没有文档声明时使用

区别：

IE浏览器：没有文档声明时两者可用

否则，只用document.documentElement.scrollTop

Chrome和Firefox ：没有文档声明时用document.body.scroll 否则，用document.documentElement.scrollTop

Safari:

两个都不用，使用一个单独的方法widow.pageYoffset

scrollLeft获取页面向左滚动的距离

处理兼容性问题：

function getscrollTop (){
        //利用逻辑||来处理  真就返回第一个否则返回第二个
        return document.documentElement.scrollTop || document.body.scrollTop
 }

3.方法

1.弹窗相关的方法【对话框】

alter() 警告框信息提示

confirm() 信息确认框返回Boolean类型的值

prompt() 可提示用户输入的对话框返回字符串类型如果使用+号会隐式转换成字符串哦！

2.开关

open() 打开一个新的浏览器窗口，加载给定url所指定的文档

window.open()

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

close() 关闭浏览器窗口

3.定时器

倒计时定时器 setTimeout()

语法：

//启动倒计时定时器
    var timer=window.setTimeout(function(){
            定时执行代码
        },倒计时时间单位毫秒)

        //清除定时器
        clearTimeout(timer) //timer的类型是number

循环定时器 setInterval()

语法：

        //启动循环定时器
        var timer=window.setInterval(function(){
                    定时执行代码
        },时间毫秒)//表示没隔多少毫秒执行一次

        //清除循环定时器
        clearInterval(timer) //timer的类型是number

案例：

定时打印出倒计时的数字到0结束打印

 function test05(){
            var n=5
           var time1= window.setInterval(function(){
               document.write(`${n}<br>`)
               n--
                if(n==0)
                {
                    clearInterval(time1)
                }
                
            },1000)
            // console.log(typeof(time1))
        }
        test05()