提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
目录
1.缓动动画
缓动动画: 匀速改变元素的样式 就是匀速动画 非匀速的改变元素css样式的动画效果就是缓动动画
设定值=当前+(目标值-当前)*百分比
2.窗口相关数据和操作
(1)让窗口滚动到指定的位置
1.滚到指定坐标,前提是页面够长 要能滚
window.scrollTo(0,600)
window.scroll(0,600)
scrollBy(0,50);
//前两个方法功能类似,用法都是将x,y坐标传入,实现滚动到指定位置。 //而scrollBy()会在之前的数据基础上做累加。
2.滚动到指定元素可见,调用元素的底部会尽量与视口的顶部齐平,也不一定 主要是能不能滚 能滚多远 el.scrollIntoView(true)默认为true,将元素和视口的上边缘对齐; 如果传递参数false,则将元素的下边缘和视口的下边缘对齐;
案例如下:
<style> body { margin: 0px; } .box { width: 8000px; height: 8000px; background-color: goldenrod; } </style> <div class="box"> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p id="p1">hello66666</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <p>hello</p> <script> //让窗口滚动到指定位置: 能够滚动才行 window.onload = function() { // var p1top=p1.offsetTop // console.log(p1top) // window.scrollTo(0,90000) // document.onclick=function(){ // window.scrollBy(0,50) // } document.onclick = function() { p1.scrollIntoView(false) //false为出现在body底部 默认为true:出现在body顶部 } } </script>
(2)页面滚动的距离
window.pageXOffset/window.pageYOffset //bom操作,IE8及IE8以下不兼容 document.body.scrollLeft/scrollTop document.documentElement.scrollLeft/scrollTop
兼容做法:let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop
(盒子部分的程序紧接着上面的程序)案例如下:
<script> //获取视口高度的兼容性写法 console.log(document.compatMode, 1111) let cWidth, cHeight; if (document.compatMode == "BackCompat") { cWidth = window.innerWidth || document.body.clientWidth; cHeight = window.innerHeight || document.body.clientHeight; } else { //document.compatMode == "CSS1Compat" cWidth = window.innerWidth || document.documentElement.clientWidth; cHeight = window.innerHeight || document.documentElement.clientHeight; } //是否是ie浏览器 console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie")) </script>
<style> .box { width: 400px; height: 300px; background-color: brown; cursor: pointer; position: relative; } </style> <div class='box3'>6666666</div> <script> var box3=document.querySelector(".box3") console.log(box3.getBoundingClientRect()) // box3.getBoundingClientRect().width=不能设置 只能获取 要设置必须用style </script>
3.BOM操作
BOM是browser object model的缩写,简称浏览器对象模型==>window不是标准,但是所有的浏览器厂商制作的这个API的功能基本类似
DOM document object model 文档对象模型==>document==>W3C标准
2.window window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象,由于window是顶层对象,因此调用它的子对象时可以不显示的指明//window.document.write(666)等价于document.write(666)
window下的几大功能对象(window的属性)有:navigatior,screen,document,history,location
3.window的属性
closed 返回窗口是否已被关闭。
document 对 Document 对象的只读引用
history 对 History 对象的只读引用
innerHeight 返回窗口的文档显示区的高度
innerWidth 返回窗口的文档显示区的宽度
outerHeight 返回窗口的外部高度,包含工具条与滚动条
outerWidth 返回窗口的外部宽度,包含工具条与滚动条
screenLeft 返回相对于屏幕窗口的x坐标
screenTop 返回相对于屏幕窗口的y坐标
screenX 返回相对于屏幕窗口的x坐标
screenY 返回相对于屏幕窗口的y坐标
location 用于窗口或框架的 Location 对象
navigator 对 Navigator 对象的只读引用
onload 指定所有配置都加载完成时(图片例外)调用的函数.
pageXOffset 返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)
pageYOffset 返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)
screen 对 Screen 对象的只读引用
4.window的方法
alert() 显示带有一段消息和一个确认按钮的警告框。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
open(url,打开方式,新窗口配置,BOOL) 打开一个新的浏览器窗口
//4个参数都可选(一般就填第一个参数)
//url:新窗口地址 打开方式:blank(默认),parent,self,top 配置(各种):一般默认 BOOL:新窗口在历史记录里面有,要不要替换
print() 打印当前窗口的内容。
prompt(tishi,value) 显示可提示用户输入的对话框。
scrollBy() 按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)
scrollTo() 把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多) setInterval(callback,times) 按照指定的周期(以毫秒计)来调用函数 setTimeout(callback,times) 在指定的毫秒数后调用函数
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
5.navigator 属性:
appCodeName 返回浏览器的代码名
appName 返回浏览器的名称
appVersion 返回浏览器的平台和版本信息
cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
platform 返回运行浏览器的操作系统平台
userAgent 返回由客户机发送服务器的user-agent 头部的值
6.screen 属性:
availHeight 返回屏幕的高度(不包括Windows任务栏)
availWidth 返回屏幕的宽度(不包括Windows任务栏)
height 返回屏幕的总高度
width 返回屏幕的总宽度
pixelDepth 返回屏幕的颜色分辨率(每象素的位数)
7.history 属性:
length返回访问历史列表中的网址数
back() 加载 history 列表中的前一个 URL
forward() 加载 history 列表中的下一个 URL
go(number|url)加载 history列表中的某个具体页面//负数后退,正数前进
案例如下:
<a href="index.html">test</a> <button onclick="fn()">前进到历史记录中的页面</button> <button onclick="two()">2</button> <script> function fn(){ history.forward() } function two () { history.go(1) } </script>
8.location 当前页面的url 属性:
hash 返回一个URL的锚部分//192.168.1.102:8081?name=jack&pwd=123#page1
host 返回一个URL的主机名和端口
hostname 返回URL的主机名
href 返回完整的URL pathname 返回的URL路径名。
port 返回一个URL服务器使用的端口号
protocol 返回一个URL协议
search 返回一个URL的查询部分
方法:
assign(url) 载入一个新的文档
reload() 重新载入当前文档
replace(url) 用新的文档替换当前文档
案例如下:
<button onclick="fn()">关闭页面</button> <a href="http://www.baidu.com" target="_self">baidu</a> <a href="http://www.baidu.com" target="_blank">baidu</a> <script> function fn() { alert(window.closed) window.close() console.log(screenX,window.screenTop,window.outerHeight,window.innerHeight,document.documentElement.clientHeight) window.resizeTo(800,400) var re=window.confirm("你确定要xxx") console.log(re) window.open("http://www.baidu.com/index.html","_blank") window.open("http://www.baidu.com/index.html","_self") window.location.href="http://www.baidu.com/index.html" console.log(window.location.href) window.location.assign("http://www.baidu.com/index.html") window.print() var re=window.prompt("请输入银行卡密码","") console.log(re) window.location.replace("http://www.baidu.com/index.html") 设备相关信息 console.log(window.navigator) console.log(screen.availHeight,screen.pixelDepth,screen.height) history是H5之后才有的技术 console.log(history) history.back() location console.log(location) location.reload() } //调节浏览器的窗口 // resizeBy(200,100) // window.resizeTo(800,400) </script>