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() 重新加载当前文档: