BOM
Browser Object Model（浏览器对象模型），提供了独立的，可以与浏览器窗口互动的对象结构，由多个对象构成，顶层对象是window。
( a ) DOM：文档
( b ) location：url地址相关
( c ) history：历史记录
( d ) navigator：浏览器信息
window对象
<style>
body{
height: 1500px;
border-left: 20px solid red;
border-top: 20px solid red;
}
</style>
</head>
<body>
<button onclick="myOpen()">打开窗口</button>
<button onclick="myClose()">关闭窗口</button>
<script>
function myOpen(){
// window.open(); //打开一个空白页面
// window.open("http://www.baidu.com"); //打开外部页面
// window.open("./笔记.html","_self"); //打开内部页面,并且替换原窗口
window.open("./笔记.html","newWind","width=200px,height=200px");
}
function myClose() {
window.close();
}
/*获取可视区窗口的宽度（不包括任务栏、控制台、工具栏，包括滚动条）*/
// console.log(window.innerWidth)
// console.log(window.innerHeight)
/*获取浏览器距离屏幕的水平位置*/
// console.log(window.screenLeft)
// console.log(window.screenTop)
/*屏幕分辨率*/
// console.log(window.screen.width)
// console.log(window.screen.height)
/*获取文档对象的可视区窗口宽度（不包括任务栏、控制台、工具栏，不包括滚动条）*/
console.log(document.body.clientWidth)
console.log(document.documentElement.clientHeight)
//可视区域位置（就是左边框和上边框的宽度）
// console.log(document.body.clientLeft)
// console.log(document.body.clientTop)
</script>
location地址相关的对象
<button onclick="myLocation()">跳转/链接到指定页面</button>
<a href="3.history.html">跳转history页面</a>
<script>
function myLocation() {
// console.log(window.location)
window.location.href="1.window对象.html"
}
</script>
history历史记录的对象
在history对象中，可以分别使用history.go(1)和history.go(-1)代替history.forward()和history.back()。用户在当前页面之前或之后必须要有可访问的页面才能实现跳转，否则不显示效果。
<button onclick="myHistory()">history</button>
<script>
function myHistory() {
history.back(); //后退一页
history.forward(); //前进一页
history.go(2); //数字：正数，前进几页，负数，后退几页 -----了解
}
</script>
navigator浏览器信息的对象
<script>
// alert("浏览器信息："+navigator.userAgent)
/*主要用于拿到信息后，来判断什么端在登录或使用*/
let ua=navigator.userAgent.toLowerCase(); //转小写 toUpperCase()转大写
// alert(typeof ua)
/*如果是移动端的浏览器打开页面通常包含字符："mobi"*/
if(/mobi|android|touch|mini/i.test(ua)){ //正则表达式
//移动端
console.log("移动端")
}else {
//非移动端
console.log("非移动端")
}
</script>
元素的视图属性
<style>
div{
width: 200px;
height: 300px;
background-color: green;
margin: 20px;
padding: 20px;
border: 5px solid black;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let box=document.getElementById("box");
console.log(box.offsetWidth); //元素水平方向的宽度 width + padding + border
console.log(box.offsetHeight); //元素垂直方向的高度 height + padding + border
console.log(box.clientWidth); //元素水平方向的宽度 width + padding
console.log(box.clientHeight); //元素垂直方向的高度 width + padding
console.log(box.offsetTop); //元素到父元素的top方向的距离
console.log(box.offsetLeft); //元素到父元素的left方向的距离
console.log(box.scrollWidth); //元素真正内容的宽度 width + padding
console.log(box.scrollHeight); //元素真正内容的高度 height + padding
</script>
定时器setTimeout与间隔setInterval
<style>
#div1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!--setTimeout-->
<button onclick="changeColor()">改变颜色</button>
<button onclick="myTimeOut()">改变颜色-500毫秒之后</button>
<button onclick="myClearTimeOut()">取消setTimeOut</button>
<!--setInterval-->
<button onclick="changeSize()">改变宽度，没点击按钮一次+20px</button>
<button onclick="myInterval()">重复执行改变宽度</button>
<button onclick="myClearInterval()">清除调用</button>
<div id="div1"></div>
<script>
/*---------------------------------定时器setTimeout-------------------------------*/
let timeout,
interval;
function changeColor() {
let div1=document.getElementById("div1");
div1.style.backgroundColor="yellowGreen";
}
function myTimeOut() {
//setTimeout(要执行的函数,延迟的时间ms)
timeout=setTimeout(changeColor,500);
}
function myClearTimeOut() {
//clearTimeout(定时器名称)
clearTimeout(timeout);
}
/*---------------------------------重复执行setInterval-------------------------------*/
function changeSize() {
let div1=document.getElementById("div1");
// console.log(div1.style.width) 初次获取为""
if(div1.style.width==""){div1.style.width="200px"}
// console.log(div1.style.width+20+"px") 只是做了字符串的拼接并没有真正的加上去，不会赋值成功
div1.style.width=(parseInt(div1.style.width)+20)+"px"
}
function myInterval() {
//setInterval(要执行的函数,重复调用间隔的时间ms)
interval=setInterval(changeSize,200)
}
function myClearInterval() {
//clearInterval(名称)
clearInterval(interval)
}
</script>
scrollTop滚动条高度
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 2000px;
background-color: green;
}
button{
position: fixed; /*使元素相对于浏览器视口固定位置*/
width: 50px;
height: 50px;
background-color: yellowgreen;
bottom: 30px;
right: 30px;
border: none;
}
</style>
</head>
<body>
<button onclick="setTop()">BACK</button>
<script>
let myScrollTop;
/*获取滚动条当前高度的方法*/
console.log(document.documentElement.scrollTop); //通过DOM获取--可读可写
console.log(window.scrollY); //通过BOM获取--只读
function backTop() {
if(document.documentElement.scrollTop<=0){
clearInterval(myScrollTop)
}else{
document.documentElement.scrollTop=document.documentElement.scrollTop-10;
}
}
function setTop() {
myScrollTop=setInterval(backTop,20)
// window.scrollTo(0,0); //可直接设置回到顶部（一下子弹回）
}
/*如果监听到滚轮滚动，则停止滚动条返回的动作*/
document.body.onmousewheel=function (){
clearInterval(myScrollTop)
}
</script>
拖拽
<style>
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: yellowgreen;
margin-left: 200px;
margin-top: 100px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="div1" onmousedown="myDrag()"></div>
<script>
/*思路：
鼠标按下后，移动鼠标，首先触发onmousedown ===>onmousemove
鼠标在移动的过程中需要不停的获取鼠标的坐标点，并且将坐标点赋值给div
*/
function myDrag() {
let div1=document.getElementById("div1");
//怎么拿鼠标的位置，event对象才会记录这些东西
let clickEvent=window.event || arguments[0];
//鼠标点击下去的时候的位置
console.log("X:"+clickEvent.clientX + "，Y：" + clickEvent.clientY)
//点击时鼠标在事件源上的位置
console.log("X："+clickEvent.offsetX + "，Y：" + clickEvent.offsetY)
//因为在按下的过程中去移动鼠标，所以套在这里面写
document.onmousemove=function (){
let MoveEvent=window.event || arguments[0];
//将移动的坐标赋值给div1
div1.style.marginLeft=MoveEvent.clientX-clickEvent.offsetX+"px"
div1.style.marginTop=MoveEvent.clientY-clickEvent.offsetY+"px"
}
}
//鼠标弹起时停止跟随
document.onmouseup=function (){
document.onmousemove=null;
}
</script>
自动轮播（小圆点可点击）
<style>
*{
margin: 0;
padding: 0;
}
/*最外层盒子*/
.banner{
border: 2px solid red;
height: 330px;
width: 980px;
position: relative;
margin: 0 auto;
}
/*装轮播图的盒子*/
#imgBanner{
height: 330px;
width: 980px;
transition: all .6s;
}
/*上一页，下一页*/
#divNext,#divPrev{
position: absolute;
font-size: 40px;
color: white;
top: 145px;
}
#divNext{
right: 0;
}
#divPrev{
left: 0;
}
/*小圆点*/
.divCircle{
font-size: 20px;
color: red;
}
#divCircle{
position: absolute;
width: 100%;
text-align: center;
bottom: 10px;
color: white;
}
</style>
</head>
<body>
<header>
<div class="banner">
<!--轮播图-->
<div id="imgBanner"></div>
<!--上一页，下一页-->
<div id="divPrev" onclick="prev()"> < </div>
<div id="divNext" onclick="next()"> > </div>
<!--小圆点控制-->
<div id="divCircle"></div>
</div>
</header>
<script>
let imgArr=["images-轮播/1.jpg","images-轮播/2.jpg","images-轮播/3.jpg","images-轮播/4.jpg","images-轮播/5.jpg","images-轮播/6.jpg","images-轮播/7.jpg"]
let index=0;
/*默认展示第一张图片*/
document.getElementById("imgBanner").style.backgroundImage=`url(${imgArr[index]})`;
/*轮播*/
let time=setInterval(dis,2000)
function dis() {
index++;
if(index==imgArr.length){
index=0;
}
document.getElementById("imgBanner").style.backgroundImage=`url(${imgArr[index]})`
//每切换一张图就要去对应显示小圆点
divCircleStyle();
}
/*生成小圆点*/
let divCircle=document.getElementById("divCircle");
for(let i=0;i<imgArr.length;i++){
divCircle.innerHTML+=`<span> ● </span>`
}
/*先自己调1次，因为隔两秒才会来调它，导致初始的时候第1个小圆点不会有样式变化*/
divCircleStyle()
/*小圆点对应图片显示样式*/
function divCircleStyle(){
//拿到所有的小圆点
let spanArr=divCircle.getElementsByTagName("span");
for(let i=0;i<spanArr.length;i++){
//清空所有小圆点上的样式
spanArr[i].className="";
}
//只给当前图片对应的小圆点加上样式
divCircle.getElementsByTagName("span")[index].className="divCircle"
}
/*上一页，下一页*/
function next(){
//控制前先清除一下，然后再打开好一些
clearInterval(time);
index++;
//如果加到最后一张
if(index==imgArr.length){
index=0;
}
document.getElementById("imgBanner").style.backgroundImage=`url(${imgArr[index]})`
//顺带小圆点也变化
divCircleStyle()
//操作完成后，重新轮播起来
time=setInterval(dis,2000)
}
function prev(){
clearInterval(time);
index--;
if(index<0){
index=imgArr.length-1;
}
document.getElementById("imgBanner").style.backgroundImage=`url(${imgArr[index]})`
divCircleStyle()
time=setInterval(dis,2000)
}
/*点击小圆点*/
for(let i=0;i<imgArr.length;i++){
//为每一个span设置index属性（自己起的属性，为了方便操作）
document.getElementsByTagName("span")[i].index=i;
//每个span都有点击事件
document.getElementsByTagName("span")[i].onclick=function () {
//这里的this，（document.getElementsByTagName("span")[i]）谁调用就指向谁
console.log(this.index)
//设置图片
index=this.index;
clearInterval(time); //控制前先清徐轮播调用
document.getElementById("imgBanner").style.backgroundImage=`url(${imgArr[index]})`
divCircleStyle(); //小圆点样式
time=setInterval(dis,2000);
}
}
</script>
瀑布流
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1300px;
margin: 0 auto;
}
ul{
float: left; /*父元素会塌陷*/
width: 400px;
border: 1px solid green;
margin: 10px;
}
li{
width: 380px;
margin: 10px;
}
/*清除浮动造成的影响*/
.clearFix::after{ /*after单冒号和双冒号有什么区别*/
content: "";
clear: both;
display: block;
}
</style>
</head>
<body>
<div class="clearFix">
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script>
let allUl=document.getElementsByTagName("ul"); //获取3个ul
//获取随机数，1.随机图片高度 2.随机背景色 Math.random()随机产生[0,1)的数但不包含下限
function getRandom(n,m) {
return Math.floor(Math.random()*(m-n)+n);
}
//创建装图片的li
function creatLi() {
//创建li节点
let newLi=document.createElement("li");
//随机的li高度
newLi.style.height=getRandom(200,500)+"px";
//随机的背景颜色
// newLi.style.backgroundColor="rgba("+getRandom(0,256)+","+getRandom(0,256)+","+getRandom(0,256)+")"
newLi.style.backgroundColor=`rgb(${getRandom(0,256)},${getRandom(0,256)},${getRandom(0,256)})`
return newLi;
}
//进入页面，默认展示20张图片
function creat20Li(){
//循环20次创建20个li
for(let i=0;i<20;i++){
let newLi=creatLi();
let arr=[];
//循环ul，把ul放到arr中（再看哪个ul的高度最小就把newLi加到哪个ul中去）
for(let j=0;j<allUl.length;j++){
arr.push(allUl[j]);
}
//根据数组中ul的高度排序，高度最小的排最前方（就可以恒定的网arr[0]中去添加了）
arr.sort(function (a,b) {
//升序，小的在前
return a.offsetHeight-b.offsetHeight
})
arr[0].appendChild(newLi); //给高度最小的ul添加一个li
}
}
//页面初始化调用
creat20Li();
window.onscroll=function () {
//滚动条的高度
let scrollTop=document.documentElement.scrollTop;
//视窗的高度
let clientHeight=document.documentElement.clientHeight;
//body的高度
let bodyHeight=document.body.offsetHeight
// console.log(scrollTop,clientHeight,bodyHeight)
if(scrollTop+clientHeight>=bodyHeight-100){ //马上就到整个内容的底部了
//快到底了继续创建li
creat20Li();
}
}
</script>
图片延迟加载
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 1000px;
margin: 10px auto;
/*清除浮动塌陷*/
overflow: hidden;
}
li{
width: 400px;
height: 400px;
float: left;
margin: 50px;
}
img{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<ul>
<li><img _src="images-延迟加载/1.jpg" alt=""></li>
<li><img _src="images-延迟加载/2.jpg" alt=""></li>
<li><img _src="images-延迟加载/3.jpg" alt=""></li>
<li><img _src="images-延迟加载/4.png" alt=""></li>
<li><img _src="images-延迟加载/5.png" alt=""></li>
<li><img _src="images-延迟加载/6.jpg" alt=""></li>
<li><img _src="images-延迟加载/7.jpg" alt=""></li>
<li><img _src="images-延迟加载/8.jpeg" alt=""></li>
<li><img _src="images-延迟加载/9.jpg" alt=""></li>
<li><img _src="images-延迟加载/10.jpg" alt=""></li>
<li><img _src="images-延迟加载/11.jpg" alt=""></li>
<li><img _src="images-延迟加载/12.jpeg" alt=""></li>
<li><img _src="images-延迟加载/13.jpg" alt=""></li>
<li><img _src="images-延迟加载/14.jpg" alt=""></li>
<li><img _src="images-延迟加载/15.jpg" alt=""></li>
<li><img _src="images-延迟加载/16.jpg" alt=""></li>
<li><img _src="images-延迟加载/17.jpeg" alt=""></li>
<li><img _src="images-延迟加载/18.jpg" alt=""></li>
<li><img _src="images-延迟加载/19.jpg" alt=""></li>
<li><img _src="images-延迟加载/20.jpg" alt=""></li>
<li><img _src="images-延迟加载/21.jpg" alt=""></li>
</ul>
<script>
function show() {
//首先找到所有的图片
let imgAll=document.querySelectorAll("img");
//获取滚动条的位置
let scrTop=document.documentElement.scrollTop;
//文档可视区域的高度
let clientHeight=document.documentElement.clientHeight
//获取图片距离屏幕的高度
for(let i=0;i<imgAll.length;i++){
//图片距离顶端的距离
let imgTop=imgAll[i].offsetTop;
//如果滚动条的高度 + 可视区域的高度 >= 图片距离顶部的高度，图片显示
if(scrTop+clientHeight>=imgTop+100){
imgAll[i].setAttribute("src",imgAll[i].getAttribute("_src"))
}
}
}
//把第一屏的加载出来
show();
//鼠标每滚动一次都要去看看是否需要把图片加载出来（window.onresize窗口变化的时候）
window.onscroll=window.onresize=show;
</script>
翻转（点击翻转卡片）
<style>
div{
width: 300px;
height: 400px;
border-radius: 50px;
text-align: center;
font-size: 30px;
}
#myRotate{
position: relative;
-webkit-perspective: 1000px; /*写在父元素上，设置3d视觉距离*/
}
/*正面*/
.Zm{
background-color: greenyellow;
}
/*反面*/
.Fm{
background-color: pink;
transform: rotateY(180deg); /*rotateY()：以下（仰）视图顺时针为正数值，逆时针为负数值*/
visibility: hidden;
}
.Zm,.Fm{
position: absolute;
top: 0;
left: 0;
transition-duration: 1s; /*动画执行时间*/
backface-visibility: hidden; /*背朝我们时不显示*/
}
/*翻转样式*/
.fanZm{
transform: rotateY(180deg);
visibility:hidden;
}
.fanFm{
transform: rotateY(360deg);
visibility:visible;
}
</style>
</head>
<body>
<div id="myRotate" onclick="fanZhuan()">
<div class="Zm">123</div>
<div class="Fm">456</div>
</div>
<script>
let one=document.querySelector(".Zm")
let two=document.querySelector(".Fm")
function fanZhuan(){
//判断
if(one.getAttribute("class")=="Zm"){
one.className="Zm fanZm";
two.className="Fm fanFm";
}else{
//最初的样子
one.className="Zm";
two.className="Fm";
}
}
</script>
111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
