一些基本的浏览器操作和事件对象的设置以及获取

111 阅读4分钟

浏览器的方法

  • 1浏览器的地址信息 window有一个 location 内部记录了浏览器的地址信息 window.location loctiono 内部有一个 href 的属性

//  1 :window.location.href
          setTimeout(function(){
            window.location.href = 'https://www.baidu.con/'
          },3000)
 //设置了一个倒计时器 打开页面3秒后跳转到 https://www.baidu.con/       
  • 2 浏览器的刷新功能 window有一个 location 有一个 reload 方法 这个方法是刷新
//   2:window.location.reload
          var count = 0
           setInterval(function(){
            count++
            console.log( count)
            if( count == 5){
                window.location.reload
            }
           } , 3000)
 //设置一个定时器每3秒count执行一次++操作 当count==5时页面刷新         
  • 3浏览器的历史纪录(模拟左上角的 回退 和前进功能) window有一个 history方法里 有一个 back() 的函数
    window.history.back() 回退 window.history.forward()前进 window.history.go(1)前进 window.history.go(-1)回退 在控制台里输入 但要先打开新的页面

本地存储(面试必问)

  • 1.localStorage 浏览器的本地存储(永久存储), 打开浏览器存储上之后 关闭浏览器 信息还在 1.1: localStorage 的设置语法: window.localStroage.setItem(key, value) key:要求见名知意 value: 必须时字符 1.2: localStorage 的获取语法: window.localStroage.getItem(key)

            1.3: localStorage 的删除语法: window.localStroage.removeItem()
      
            1.4: localStorage 的清除语法: window.localStroage.clear()
    
    
         // 1.localStorage 设置语法
            window.localStorage.setItem('qq', '888888')
            window.localStorage.setItem('mina', '66666')
            window.localStorage.setItem('ceshhi3', '3333333')
            window.localStorage.setItem('ceshhi3', '4444444')
        
        // 1.2:localStorage 获取语法
           console.log( window.localStorage.getItem('qq'))

        // 1.3:localStorage 删除语法
            console.log( window.localStorage.removeItem('mina'))

        // 1.3:localStorage 清除语法
             console.log( window.localStorage.clear()) //使用会清楚所有的数据
  • 2.sessionStorage 浏览器的临时存储 特点:页面关闭直接清楚数据 2.1设置语法 : window.sessionStorage.setItem( key, value) //value 的值必须为 字符串 2.2获取语法 : window.sessionStorage.getItem( key, value) //value 的值必须为 字符串 2.3删除语法 : window.sessionStorage.removeItem( key, value) //value 的值必须为 字符串 2.4清除语法 : window.sessionStorage.clear
  //2.1sessionStorage 的设置
              console.log( window.sessionStorage.setItem('vx', '12345678')) //value 的值必须为 字符串
   
         //2.2sessionStorage 的获取
              console.log( window.sessionStorage.getItem('vx', '12345678')) //value 的值必须为 字符串

         //2.3sessionStorage 的删除
              console.log( window.sessionStorage.removeItem('vx', '12345678')) //value 的值必须为 字符串
 
         //2.4sessionStorage 的清除
              console.log( window.sessionStorage.clear()) //value 的值必须为 字符串

浏览器的事件

  • 1 浏览器的 onload 事件 onload 事件, 等到页面的所有的资源加载完毕以后再执行 浏览器的图片加载时异步加载 目前还感受不到

  • 2浏览器的 onscroll 事件 onscroll 事件, 当浏览器页面滚动的时候就会触发

  • 2.1:浏览器的滚动距离 因为时页面在滚动,所以需要使用 doucument 对象去获取滚动的距离 方法: <!-- 1:document.body.scrollTop 在浏览器没有声明

          2:document.documentElement.scrollTop: 在览器声明了< !DOCTYPE htmL> 
    
           
          就目前而言 浏览器必定都声明了< !DOCTYPE htmL> ,所以推荐使用
          
          左右
           1:document.body.scrollLeft   在浏览器没有声明<!DOCTYPE htmL>
           2:document.documentElement.scrollLeft  在览器声明了< !DOCTYPE htmL>           -->
    
    //   1:onload
        window.onload = function(){
            console.log(100)
        }
    //   2:onscroll
         window.onscroll = function(){
            console.log('页面滚动我(onscroll)就触发.....')
         }
         
    //   2.1:document.documentElement.scrollTop ( Top 改成 Left 就是浏览器宽度)
        window.onscroll = function(){
            console.log('开始滚懂....')
            console.log( 'document.documentElement.scrollTop:',document.documentElement.scrollTop )
            console.log( 'document.documentElement.scrollLeft:',document.documentElement.scrollLeft )
        }

时间对象

*Date 语法:var timer =new Date( ) 注意大写

时间对像 接受的参数两种方式

  • 1.数字传参
 01: var timer =new Date(2008, 01, 28, 12, 13, 14)
                    //  参数1. 代表年份 (years)
                    //  参数2. 代表月份 ( 注意!!!) 月份从 0 开始 即 0 代表一月 11 代表 十二月
                    //  参数3. 天数
                    //  参数4. 小时
                    //  参数5. 分钟
                    //  参数6. 秒
    console.log( timer)
  • 2.字符串传参
 02:  var timer =new Date(2008-01-20 13:14:15)// '年-月-日 时:分:秒'
                    // 参数1. 代表年份 (years)
                    // 参数2. 代表月份 ( 注意!!!) 月份从 0 开始 即 0 代表一月 11 代表 十二月
                    // 参数3. 天数
                    // 参数4. 小时
                    // 参数5. 分钟
                    // 参数6. 秒     
     console.log( timer)
 var timer = new Date( )//默认获取当前时间
       console.log( timer)

     timer1 = new Date('2022-11-1 12:12:14')//获取指定时间
        console.log( timer1)

     timer2 = new Date(2022, 11, 11, 12, 12, 12)//获取指定时间
        console.log( timer2)

时间对象的获取

  • 语法 时间对象.getXXXX()
 var timer = new Date() 
        console.log(timer)
        //获取年分
        var year = timer.getFullYear()
         console.log(year)
        //获取月份
        var month = timer.getMonth()
        console.log(month)
        //获取每周的第几天
        var day = timer.getDay()
        console.log(day)
        //获取每月的第几天
        var day1 = timer.getDate()
        console.log(day1)
        //获取小时
        var hours = timer.getHours()
        console.log(hours)
        //获取分钟
        var minutes = timer.getMinutes()
        console.log(minutes)
        //获取秒钟
        var second = timer.getSeconds()
        console.log(second)
        

事件对象的设置

  • 语法时间对象.setXXXX()
    var timer = new Date()
             console.log( timer)
          //设置年份
            timer.setFullYear(2008)
            var year = timer.getFullYear()
            console.log(year)
            
         //设置月份
           timer.setMonth(9)// 月份 0-11 
           var month = timer.getMonth()
            console.log(month)
         
        //设置天
           timer.setDate(28)
           var mDay = timer.getDate()
           console.log(mDay)
        
        //设置小时
           timer.setHours(14)
           var hours = timer.getHours()
           console.log(hours)

        //设置分钟
           timer.setMinutes(54)
           var minutes = timer.getMinutes()
           console.log(minutes)

        //设置秒
           timer.setSeconds(50)
           var seconds = timer.getSeconds()
           console.log(seconds)

        //设置毫秒
           timer.setMilliseconds(999)
           var millis = timer.getMilliseconds()
           console.log(millis)
        
        //设置距离1970 的总毫秒
        //  timer.setTime(123456789)
            var time = timer.getTime() //注释掉设置  距离1970 的总毫秒 得到当前时间距离1970 的总毫秒
             console.log(time)