缓动动画，有关窗口的一些常见操作，BOM操作

缓动动画

缓动动画: 匀速改变元素的样式 就是匀速动画 非匀速的改变元素css样式的动画效果就是缓动动画
设定值=当前+(目标值-当前)*百分比，例如：目标是让div的高度为800 div.style.heiht=当前h+(800-当前w)*0.5

<style>
	.dropbtn {
			width: 200px;
			height: 40px;
			background-color: firebrick;
			border-radius: 5px;
			line-height: 40px;
			padding-left: 20px;
			cursor: pointer;
		}

		.dropmenu {
			width: 300px;
			height: 0px;
			background-color: cyan;
			border-radius: 5px;
			padding-left: 20px;
			overflow: hidden;
		}
</style>
<div class="dropbtn">
	btn
</div>
<div class="dropmenu">
	<div class="box">hello</div>
	<div class="box">hello</div>
	<div class="box">hello</div>
	<div class="box">hello</div>
	<div class="box">hello</div>
</div>
<script>
	window.onload=function(){
		var dropbtn=document.querySelector(".dropbtn")
		var flag=true;
		var timer=null;
		var dropmenu=document.querySelector(".dropmenu")
		var result;
		dropbtn.addEventListener("click",function(e){
			//防止多次点击按钮 所以先清除上一次的计时器
			clearInterval(timer)
			if(flag=!flag){
				result=0
			}else{
				result=400						
			}
			timer=setInterval(()=>{						
				let h=window.getComputedStyle(dropmenu).height
				dropmenu.style.height=parseInt(h)+(result-parseInt(h))*0.7+"px"
			},20)										
		})				
	}
</script>

有关窗口的一些常见操作

<script>
	// 让窗口滚动到指定位置（前提是要滚动才行，不然没有作用）
	// 希望滚到哪里，就设置高度，一般第一个参数都是0，不会滚到到下面去
	window.scrollTo(100, 300)
	
	// 如果要让页面一来就在最底部，把第二个参数设置很大就可以了
	window.scrollTo(0, 30000)
	
	// 在现在的位置往下滚动一定的范围（自己设置的）
	// 点一下滚一下，可以做那种用户点击一下滚动一个板块
	document.onclick=function(){
		window.scrollBy(0, 50)
	}
	
	// 点击一个就可以让指定元素显示到可视区域，就是页面显示的区域
	// 默认为true
	document.onclick=function(){
		window.scrollIntoView(false);
		// false为出现在body底部，true
	}
			
	//获取视口高度的兼容性写法
	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 {
		cWidth = window.innerWidth || document.documentElement.clientWidth;
		cHeight = window.innerHeight || document.documentElement.clientHeight;
	}
	//是否是ie浏览器
	console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie"))
</script>

BOM操作

BOM是browser object model的缩写，简称浏览器对象模型:window不是标准,但是所有的浏览器厂商制作的这个API的功能基本类似
DOM document object model 文档对象模型 --> document --> W3C标准

<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)
		// close() 方法用于关闭浏览器窗口。
		window.close()	
		
		// 把窗口大小调整为指定的宽度和高度。
		window.resizeTo(800,400)
		// confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框
		// 如果访问者点击"确定"，此方法返回true，否则返回false。
		var re=window.confirm("你确定要xxx")				
		console.log(re)
		
		// open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
		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)
		// assign()方法加载一个新的文档。
		window.location.assign("http://www.baidu.com/index.html")
		window.print()
		var re=window.prompt("请输入银行卡密码","")
		console.log(re)
		// replace()方法可用一个新文档取代当前文档
		window.location.replace("http://www.baidu.com/index.html")
		
		//设备相关信息 Navigator 
		console.log(window.navigator)
		console.log(screen.availHeight,screen.pixelDepth,screen.height)
		
		//history是H5之后才有的技术
		// back() 方法可加载历史列表中的前一个 URL（如果存在）。
		// 调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。
		console.log(history)
		history.back()
		
		// location 重新载入当前文档，reload()方法用于刷新当前文档
		// reload() 方法类似于你浏览器上的刷新页面按钮。
		// 如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么
		// 它都会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
		console.log(location)
		location.reload()
		
	}

//调节浏览器的窗口，resizeBy() 方法用于根据指定的像素来调整窗口的大小。
resizeBy(200,100)
window.resizeTo(800,400)
</script>