（javascript（基础知识+实例） 9.BOM

javascript的组成

1. ECMAScript 标准语法部分
2. BOM
3. DOM

BOM(browser object model) 浏览器对象模型

• 和浏览器相关
• 弹窗
  • alert() 警告框
  • prompt() 输入框
  • confirm() 确认框
  • 以上弹窗是浏览器厂商自带的 样式是无法被修改的 开发中一般不用
• 一个完整的网址组成部分
  • 协议 + 域名 + 端口号 + 路径 + 请求参数 + 哈希值
  • 一个网址必备的 协议 + 域名 + 端口号 --> 源
• 域名
  • 最早访问一个网站通过ip地址
  • 万维网（www）将每一个ip对应成一个名称
  • 112.80.248.76 --> baidu.com
• 端口号
  • 每一个网站都需要有一个端口号 域名:端口号
  • [0, 65535]

对象的属性和方法

• 对象的value是一个具体的值就称为这个键值对是对象的属性
• 对象的value是一个函数就称为这个键值对是对象的方法

location对象 地址栏

• location 或者 window.location
• 属性
  • href 可以获取当前地址栏完整的路径
  • protocol 获取协议的部分
  • hostname 获取域名的部分
  • port 获取端口号的部分
  • pathname 获取路径的部分
  • search 获取请求参数部分
  • hash 获取哈希部分
  • origin 获取源
• js的跳转
  • location.href = 新网址
  • location.assign(新网址)
  • location.replace(新网址)
• js的刷新
  • location.reload()
  • history.go(0)

history对象 历史记录

• 打开网页访问记录
• history window.history
• 属性
  • length 获取访问记录的长度 只要页面被关闭自动清空
• 方法
  • forward() 前进一个访问记录
  • back() 后退一个访问记录
  • go(n) n>0 前进n个访问记录 n<0 后退n个访问记录 0

浏览器版本信息

• navigator.userAgent

定时器

• 每开启一个定时器都会得到一个id，清除哪个定时器可以根据这个id来清除
• 间隔定时器

      var id = setInterval(fn, ms)
  

• 延迟定时器

      var id = setTimeout(fn, ms)
  

• 清除定时器
  • clearInterval(id)
  • clearTimeout(id)

本地存储

• 1024b(字节) -> 1kb 1024kb --> 1m 1024m --> 1g
• application --> localStorage
• 一般可以存储5M的数据
• localStorage
  • 存
    • localStorage.setItem(名称, 数据)
  • 取
    • localStorage.getItem(名称)
  • 删除单条
    • localStorage.removeItem(名称)
  • 清空
    • localStorage.clear()
• sessionStorage
  • 存
    • sessionStorage.setItem(名称，数据)
  • 取
    • sessionStorage.getItem(名称)
• localStorage和sessionStorage有什么区别？
  • 数据时效性
  • localStorage是永久存储
  • sessionStorage是会话级存储，只要关闭浏览器数据就会自动删除

实例

（以下代码均为课程实例） （1）倒计时

    <script>
      // 创建一个日期对象

      console.log(current)
      // 求当前的时间戳
      var s1 = current.getTime()
    //   console.log(s1)
      // 未来的时间
      var str = '2023-01-22 00:00:00'
      // 将时间字符串转换成日期对象
      var future = new Date(str)
    //   console.log(future)  
      // 求时间戳
      var s2 = future.getTime()
      // 求差值 得到毫秒数
      var c = s2 - s1
      console.log(c)
      // 把毫秒数转换成秒数
      var second = Math.round(c/1000)
    //   console.log(second)
      // 秒数 --> xx-xx hh:mm:ss
      // 用一个变量来表示一个月的秒数
      var m = 30 * 24 * 60 * 60
      var month = Math.floor(second/m)
      console.log(month)
      // 减去月份所代表的秒数
      second = second - month*m
      // 一天代表秒数
      var d = 24 * 60 * 60
      var day = Math.floor(second/d)
      console.log(day)
      // 减去天数代表的秒数
      second = second - d*day
      // 小时所代表的秒数
      var h = 60*60
      var hour = Math.floor(second/h)
      console.log(hour)
      // 减去小时代表的秒数
      second = second - h*hour
      var min = Math.floor(second/60)
      console.log(min)
      // 减去分钟代表的秒数
      second = second - min*60
      console.log(second)
    </script>

（2）把当前时间往前或者往后一段时间

    <script>
        // 18小时之后是几点
        // 47小时之前是几点
        var t = new Date().getTime()
        t = t + 18*60*60*1000
        console.log(t)
        // 将时间戳转换成日期对象
        var f = new Date(t)
        console.log(f)

        var t1 = new Date().getTime()
        t1 = t1 - 47*60*60*1000
        var f1 = new Date(t1)
        console.log(f1)
    </script>

（3）Date函数传参

    <script>
        // 传字符串
        var r1 = new Date('2021-03-04 12:03:04')
        console.log(r1)
        var r2 = new Date('2021/03/04 12:03:04')
        console.log(r2)
        var r3 = new Date('2021年03月04日 12时03分04秒')
        console.log(r3) // Invalid Date
        // 支持
        var r4 = new Date('2021')
        var r5 = new Date('2021-03')
        var r6 = new Date('2021-03-04')
        // 不支持
        var r7 = new Date('12:03:04')
        // 时间戳 数字
        var r8 = new Date(10000)
        console.log(r8) // '1970-01-01 00:00:10'
    </script>

（4）弹窗

    <script>
        // alert('千锋教育')
        // var content = prompt('请输入内容')
        var bool = confirm('您确认删除吗？')
        console.log(bool)
    </script>

（5）地址栏

    <script>
        console.log(location)
        console.log(window.location)
        console.log(location.href)
        setInterval(function(){
            // location.href = 'https://www.baidu.com'
            // location.href = './01.倒计时.html'
            // location.assign('https://www.baidu.com')
            // location.replace('https://www.baidu.com')
            location.reload()
        }, 1000)
       
    </script>

（6）浏览器信息

    <script>

        function checkBrowser(){
            var ua = navigator.userAgent
            var obj = {isIE: false, isChrome: false, isSafair: false, isFirefox: false}
            if(ua.indexOf('Chrome') !== -1){
                obj.isChrome = true
                return obj
            }
            if(ua.indexOf('Firefox') !== -1){
                obj.isFirefox = true
                return obj
            }
            if(ua.indexOf('Trident') !== -1){
                obj.isIE = true
                return obj
            }
            if(ua.indexOf('Safair') !== -1){
                obj.isSafair = true
                return obj
            }
        }

        console.log(checkBrowser()) // {isIE: true, isChrome: false, isSafair: false, isFirefox: false}
    </script>

（7）间隔定时器

    <!-- <button onclick="javascript:clearInterval(id)">清除第一个定时器</button>
    <button onclick="javascript:clearInterval(id02)">清除第二个定时器</button>
    <button onclick="javascript:clearInterval(id03)">清除第三个定时器</button> -->
    <script>
        var id = setInterval(function(){
            console.log('定时器01')
        }, 1000)
        console.log(id)
        var id02 = setInterval(function(){
            console.log('定时器02')
        }, 1000)
        console.log(id02)
        var id03 = setInterval(function(){
            console.log('定时器03')
        }, 1000)
        console.log(id03)
        var id04 = setTimeout(function(){
            clearInterval(id)
        }, 5000)
        console.log(id04)

        clearTimeout(id04)
    </script>

（8）本地存储

    <script>
        var a = 1
        console.log(a)
        // 进行存储
        localStorage.setItem('data', a)
        sessionStorage.setItem('aa', a)
        setTimeout(function(){
            location.href = './10.本地存储02.html'
        }, 3000)
    </script>

（9）document的介绍

<body>
    <b id="header">hsdasdas</b>
    <p class="box">dasdhasjdhas</p>
    <div>sdaskdasjdhasjdk</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <div class="box">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Similique explicabo totam provident vero nisi quibusdam ad, perferendis id tempore tenetur excepturi facilis possimus quas nesciunt molestiae quae iste exercitationem accusantium.</div>
    <script>
        console.log(document)
        // 通过id的方式获取标签
        console.log(document.getElementById('header'))
        // 通过类名的方式获取标签
        console.log(document.getElementsByClassName('box'))
        // 通过标签名获取标签
        console.log(document.getElementsByTagName('div'))
        // 通过选择器
        console.log(document.querySelector('#header'))
        console.log(document.querySelector('.box'))
        console.log(document.querySelector('div'))
        console.log(document.querySelector('ul>li'))

        console.log('===========================')
        console.log(document.querySelectorAll('#header'))
        console.log(document.querySelectorAll('.box'))
        console.log(document.querySelectorAll('div'))
        console.log(document.querySelectorAll('ul>li'))
    </script>
</body>

（10）作业：倒计时

    <script>
        // 在页面上显示一个60秒的倒计时
        // 00:59 --> 00:00   
        // 倒计时结束的时候 在页面显示倒计时结束
        var t = 0

        var t1 = new Date().getTime()
        t2 = t1 + 60 * 1000

        // t1 = parseInt(t1 / 1000)
        t2 = parseInt(t2 / 1000)



        var t1 = new Date().getTime()
        t1 = parseInt(t1 / 1000)
        document.body.innerHTML = "";
        // document.write(t1)
        t = t2 - t1
        str = '倒计时还有'
        str1 = '秒'
        document.write(str + t + str1)


        console.log(t2)
        id = setInterval(function () {
            var t1 = new Date().getTime()
            t1 = parseInt(t1 / 1000)
            document.body.innerHTML = "";
            // document.write(t1)
            t = t2 - t1
            str = '倒计时还有'
            str1 = '秒'
            if(t<10){
                t='0'+t

            }
            document.write(str + t + str1)
            
            if (t <= 0) {
                clearInterval(id)
                document.body.innerHTML = "";
                document.write('倒计时结束！')
            }

        }, 1000)
        // setTimeout(function(){
        //     document.write('倒计时结束！')

        // },60000)
    </script>