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() 重新加载当前文档:
相关文章
|
8月前
|
XML 编解码 JavaScript
JS中的BOM和DOM的介绍与使用
JS中的BOM和DOM的介绍与使用
58 0
|
6天前
|
XML JavaScript 前端开发
js中dom和bom有什么区别
js中dom和bom有什么区别
36 0
|
8月前
|
存储 JavaScript 前端开发
js——BOM
js——BOM
|
9月前
|
JavaScript 前端开发 UED
js的BOM【了解一下】
js的BOM【了解一下】
49 1
|
11月前
浏览器兼容base.js
浏览器兼容base.js
58 0
|
JavaScript 前端开发 Go
【前端】JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象?
JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象:Browser Object Model 浏览器对象模型:将浏览器的各个组成部分封装成对象。
121 0
【前端】JavaScript(JS)的BOM对象(JS的Browser对象)----什么是BOM对象?
|
Web App开发 JavaScript 前端开发
JS基础-操作BOM对象
JavaScript和浏览器关系? JavaScrip诞生就是为了能够他在浏览器中运行! BOM:浏览器对象模型
92 0
|
JavaScript 前端开发
|
Web App开发 XML JavaScript
JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定义用于浏览器中 JS 操作页面的API 和全局变量,没有任何JS语法) 1.
1891 0