js-day10Data&Bom

简介: js-day10Data&Bom

js-day10Data&Bom


01回顾

02日期时间对象Date

1 =>作用:处理日期时间

=>创建对象:

构造函数

var date = new Date()

=>表示当前日期时间

2 =>常用方法

getFullYear()

getMonth() //月份从0开记数,当前月份需要值加一

getDate()

getHours()

getMinutes()

getSeconds()

getTime()

getDay()

      3 => 创建指定日期时间对象
           var date = new Date('2021-3-16')
           var date = new Date(2021,3,16) //当前月份需要值减一
      4 =>格式化日期时间
           以上指定和未指定的日期显示都是:
           Fri Mar 18 2022 09:24:31 GMT+0800 (中国标准时间)
         -> 2022-3-18 09:24:31
            2022年3月18日 09时24分31秒
      注意:若要月日都是两位数,则加判断语句
      String(month).length==1?'0'+month:month
      数字要转换成字符串 才可以使用点语句判断长度
      5 =>计算时间差值
        例如:我们现在计算一下 2019-01-01 00:00:00 到 2019-01-03 04:55:34 的时间差
            2019-01-03 04:55:34  - 2019-01-01 00:00:00
            1. 转日期时间为毫秒  
                 date1.getTime()  123122312
                 date2.getTime()  212312323
               计算机时间的原点
                  格林威治时间(1970年1月1日(00:00:00 GMT)) 的毫秒数
                相差的总毫秒 = date2.getTime() - date1.getTime()
                转化  相差的总毫秒
                        年  月 日 时  分 秒
                      212312323  
                      一年毫秒  1000 * 60 * 60 * 24 * 365
                      一月毫秒  1000 * 60 * 60 * 24 * 30
                         ...

03.BOM

BOM 浏览器对象模型

javascript三大组成

ECMAScript javascript基础语法

BOM 浏览器对象模型

提供操作浏览器的能力

DOM 文档对象模型

提供操作文档对象的能力

BOM 浏览器对象模型
    提供操作浏览器的能力
    - 获取一些浏览器的相关信息(窗口的大小)
    - 操作浏览器进行页面跳转
    - 获取当前浏览器地址栏的信息
    - 操作浏览器的滚动条
    - 浏览器的信息(浏览器的版本)
    - 让浏览器出现一个弹出框(alert/confirm/prompt)
    - BOM 的核心就是 window 对象
    window 是浏览器内置的一个对象,里面包含着操作浏览器的方法
window对象
      =>浏览器窗口对象,它是根对象,下面还有history历史记录对象,location位置对象...
      =>创建: 当打开浏览器窗口打开自动创建window对象
      =>属性和方法
    1、常用方法:
      1. 对话框 alert&confirm&prompt
          alert() 信息提示框
            注意:
              弹框样式
              后续代码被阻塞(点击确定之后才会继续执行后续代码)
              window可以不写
          confirm() 信息确认框
            返回值:
              =>确定 true
              =>取消 false
          prompt() 内容输入框
            返回值:
              =>点击取消-返回 null ;输入信息,则返回对应内容
              =>内容是字符串string,如果参与算术运算需要转换为number类型
      2.open() & close()
          open('','','') 打开一个新的浏览器窗口,加载给定url所指定的文档
            window.open(url, [name], [configuration])  //目前写个地址就行
            三个参数 :地址 名字 窗口属性
          close() 关闭浏览器窗口
          可以结合按钮绑定事件更好实现效果
            事件属性 onclick
            <button onclick="window.close()">关闭</button>  
              onclick  事件属性
              值: js代码
      3.定时器
        什么是定时器:
          我们可以看到很多网站首页有一个“图片轮播”特效,每隔2s图片变换一次,这里就用到了定时器。
          定时器用途非常广,在图片轮播、在线时钟、弹窗广告等地方大显身手。凡是自动执行的东西,很大可能都是跟定时器有关。
        setTimeout(函数参数,指定时间毫秒)  
           =>倒计时定时器
            启动倒计时定时器,到了指定时间执行函数中代码
           =>返回当前定时器对象
            var timeoutObj = setTimeout(function(){
                //执行代码
            },1000)    
        window.clearTimeout(timoutObj)
          =>结束定时器 参数是倒计时定时器的的名字即返回值
        setInterval()
          =>循环定时器
          var inervalObj= setInterval(function(){
              //执行代码   
          },1000)
        clearInterval(inervalObj)
    2、window常用属性:
        innerHeight && innerWidth
          获取浏览器窗口的宽度和高度(包含滚动条的)
        onscroll 事件属性  滚动事件
          当浏览器的滚动条滚动的时候触发 | 鼠标滚动的时候触发
          注意:前提是页面的高度要超过浏览器的窗口才可以
            window.onscroll = function(){
              //滚动执行的代码
            }
        事件三要求:
         =>1. window对象: 事件源
                   谁身上触发事件,谁就是事件源
         =>2. onscroll: 事件类型
                   事件类型名: 滚动事件
         =>3. 事件处理函数:
                    当事件触发执行调用的函数 
        浏览器滚动的距离
          事实上:浏览器没有动,是页面在往上走,所以是document对象
        scrollTop 获取页面卷入的高度 == 滚动条距离顶部的距离
            注:两种方式获取高度:
              document.documentElement.scrollTop 获取高度
              document.documentElement.scrollTop = 0 给高度赋值
            没有文档声明的时候,使用
              document.body.scrollTop
        scrollLeft 获取页面向左滚动的距离
    3、window子对象
        1.历史记录对象 history
          获取history对象 window.history
          方法:
            history.go(-1)代表back 浏览器中的前进
            history.go(1) 代表forward 浏览器中的后退
            back() 加载对象列表中的前一个url
            forward() 用途加载对象列表中的后一个url
            go() 加载对象列表中的某个具体url
              function nextHistoryPage(){
                  window.history.forward();
              }
              function preHistoryPage(){
                  window.history.back();
              }
              <a href="javascript:nextHistoryPage();">下一页</a>
              <a href="javascript:preHistoryPage()">上一页</a>
        2.location 操作地址栏 位置对象 
          开发场景:跳转到商品的详情页面
          常用属性:
            hash 获取hash值,url地址后的内容
                'http://www.baidu.com#login'
            location.href 获得当前页面的URL地址(window.location.href)
            获取值和设置值 
                var url = location.href 
                location.href = 'http://www.baidu.com'  //跳转到新的页面
          常用方法:
            location.reload() 重新加载当前文档:
相关文章
|
3天前
|
缓存 JavaScript UED
js中BOM中的方法
【10月更文挑战第31天】
|
2月前
|
XML 移动开发 JavaScript
js中BOM和DOM总结(基础篇)
文章总结了JavaScript的BOM和DOM知识点,包括window、screen、location、history、navigator对象,以及消息框、计时器和cookie。同时,介绍了DOM的概念、节点获取和修改方法,以及事件处理。
js中BOM和DOM总结(基础篇)
|
1月前
|
JavaScript 前端开发 Java
【前端基础篇】JavaScript之BOM介绍
【前端基础篇】JavaScript之BOM介绍
34 0
|
2月前
|
JavaScript 前端开发 API
Javaweb之javascript的BOM对象的详细解析
BOM为Web开发提供了强大的API,允许开发者与浏览器进行深入的交互。合理使用BOM中的对象和方法,可以极大地增强Web应用的功能性和用户体验。需要注意的是,BOM的某些特征可能会在不同浏览器中表现不一致,因此在开发过程中需要进行仔细的测试和兼容性处理。通过掌握BOM,开发者能够制作出更丰富、更动态、更交互性的JavaWeb应用。
31 1
|
6月前
|
JavaScript 前端开发
javascript操作BOM的方法
javascript操作BOM的方法
50 0
|
3月前
|
编解码 JavaScript 前端开发
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
JS逆向浏览器脱环境专题:事件学习和编写、DOM和BOM结构、指纹验证排查、代理自吐环境通杀环境检测、脱环境框架、脱环境插件解决
98 1
|
3月前
|
JavaScript 前端开发
js bom的概念
js bom的概念
35 1
|
3月前
|
JavaScript 前端开发
JavaScript BOM 的概念(浏览器对象模型)
JavaScript BOM 的概念(浏览器对象模型)
45 1
|
3月前
|
存储 JavaScript 前端开发
JavaScript中的BOM
JavaScript中的BOM
|
3月前
Crypto-JS——Uncaught Error: Malformed UTF-8 data
Crypto-JS——Uncaught Error: Malformed UTF-8 data
155 0