1.BOM介绍
2.系统对话框
3.页面加载事件
4.location对象
5.history对象
6.navigator对象
7.定时器setInterval
8.案例：图片摇摆
9.案例：一闪一闪亮晶晶
10.一次性的定时器setTimeout
11.案例：div背景色渐变
12.案例：div移动--初步(没有解决多次点击按钮，出现多个定时器的问题)
13.将上个案例(div移动)封装成函数
14.简单轮播图
15.左右焦点轮播图(在简单轮播图的基础上)
16.轮播图综合
1.BOM介绍 <--返回
* JavaScript分三部分
- ECMAScript标准:JS的基本语法
- DOM：Document object Model 文档对象模型--操作页面的元素
- BOM：Browser Object Model 浏览器对象模型--操作的是浏览器
* 浏览器中有个顶级对象：window
页面中顶级对象：document，页面中所有的内容都是属于浏览器的，页面中的内容也都是window的
* window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window
* console.log(window.name);//注意，输出空，而不是undefined。所以，通常不要用name定义变量名。
* 可以用top代替window
2.系统对话框 <--返回
* window.alert("您好");//样式不能修改，生产不用，测试的时候用
* window.prompt("请输入：");//样式不能修改，生产不用，测试的时候用
* window.confirm("确定退出吗");//点确定返回true，生产不用
3.页面加载事件 <--返回
* 页面加载完毕后触发
window.onload = function(){};
* window.onunload = function() {};
页面关闭后触发的事件，谷歌不支持，IE8支持
* window.onbeforeunload = fn;
页面关闭之前触发的事件，谷歌不支持，IE8支持
4.location对象 <--返回
* console.log(window.location); // 查看location的属性
* location.href="http://www.baidu.com"; // 有历史记录
* location.assign("http://www.baidu.com");
* location.reload(); // 刷新
* location.replace("url"); // 将当期页面用"url"替换，没有历史记录
5.history对象 <--返回
* 前进 window.history.forword();
* 后退 window.history.back();
* window.history.go(数字)正数前进，负数后台
* 一般不用。了解即可。
* 案例：模拟浏览器的前进和后退
// 页面1：111.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <div> <input type="button" id="btn1" value="跳转"/> <input type="button" id="btn2" value="前进"/> </div> <script type="text/javascript"> document.getElementById("btn2").onclick=function(){ history.forward(); }; document.getElementById("btn1").onclick=function(){ location.href="222.html"; }; </script> </body> </html> // 页面二：222.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" id="btn" value="后退"/> </body> <script type="text/javascript"> document.getElementById("btn").onclick=function(){ history.back(); }; </script> </html>
6.navigator对象 <--返回
* navigator.userAgent; // 判断用户浏览器的类型
- Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0
* navigator.platform; // 判断浏览器所在的系统平台类型
- Win64
7.定时器setInterval <--返回
* var id = window.setInterval(fn,time)
- time:单位毫秒
- 返回值：定时器id
- 功能：每time时间执行一次fn函数
* 停止定时器
window.clearInterval(定时器id)
<div>
<input type="button" id="btn1" value="开启定时器"/>
<input type="button" id="btn2" value="去除定时器"/>
</div>
<script type="text/javascript">
var _id;
document.getElementById("btn1").onclick=function(){
var id = setInterval(function(){
alert("hello");
_id = id;
},3000);
};
document.getElementById("btn2").onclick=function(){
clearInterval(_id);
};
</script>
8.案例：图片摇摆 <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> </head> <body> <input type="button" id="btn1" value="摇摆起来"/> <input type="button" id="btn2" value="停止摇摆"/> <div><img id="imgId" src="a.jpg" style="position: absolute; 300px"/></div> <script type="text/javascript"> var _id = 0;//用于保存定时器的返回值 var x=-300;//定义图片初始的横坐标v //点击按钮，图片开始进入屏幕 document.getElementById("btn1").onclick=function(){ if (_id) { console.log(`_id=${_id}定时器已经开启`) return } var id = setInterval(function(){ // console.log(id) var img = document.getElementById("imgId"); if(x > 1500){ //图片出去后停止定时器 clearInterval(_id); }else{ x += 10; } // console.log(x); img.style.left = x + "px"; _id = id; },20); }; //停止定时器 document.getElementById("btn2").onclick=function(){ clearInterval(_id); _id = 0 }; </script> </body> </html>
9.案例：一闪一闪亮晶晶 <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> div{ width: 600px; height: 500px; background-color: black; position: relative; } span{ font-size: 30px; color: yellow; position: absolute; } </style> </head> <body> <input type="button" id="btn1" value="摇摆起来"/> <input type="button" id="btn2" value="停止摇摆"/> <div id="box"></div> <script type="text/javascript"> var id = 0; //点击按钮，图片开始进入屏幕 document.getElementById("btn1").onclick=function(){ if(id) return; var div = document.getElementById("box"); div.innerHTML="<span>☆</span>"; id = setInterval(function(){ div.firstElementChild.style.left = parseInt(Math.random()*580+1) + "px"; div.firstElementChild.style.top = parseInt(Math.random()*480+1) + "px"; }, 100); }; //停止定时器 document.getElementById("btn2").onclick=function(){ clearInterval(id); id = 0; }; </script> </body> </html>
10.一次性的定时器setTimeout <--返回
* window.setTimeout(fn,time);
- time:毫秒
* 一次性的定时器，用完后还在内存中，需要使用window.clearTimeout()才能清理掉
11.案例：div背景色渐变 <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> div{ width: 300px; height: 200px; background-color: hotpink; } </style> </head> <body> <input type="button" id="btn1" value="渐变"/> <div id="box"></div> <script type="text/javascript"> document.getElementById("btn1").onclick = function(){ var opacity = 10; var id = setInterval(function() { opacity--; if(opacity <= 0){ clearInterval(id); // 此时opacity=0,停止定时器了，但是后面的代码还会执行，使得最终div的透明度opacity=0 } document.getElementById("box").style.opacity = opacity / 10; console.log(opacity); }, 200); }; </script> </body> </html>
12.案例：div移动--初步(没有解决多次点击按钮，出现多个定时器的问题) <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> * { padding: 0; margin: 0; } input { margin-top: 20px; } div { margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left: 20px; } </style> </head> <body> <input type="button" id="btn1" value="移动到400px"/> <input type="button" id="btn2" value="移动到800px"/> <div id="box"></div> <script type="text/javascript"> var div = document.getElementById("box"); //点击第一个按钮后移动到400px document.getElementById("btn1").onclick = function() { //获取div的当前位置 var left = div.offsetLeft;//数字类型 var id = setInterval(function(){ //每次移动10px left += 10; if(left <= 400){ div.style.left = left + "px"; } else { clearInterval(id); } }, 20); }; //点击第二个按钮后移动到800px document.getElementById("btn2").onclick = function() { var left = div.offsetLeft;//数字类型 var id = setInterval(function() { //每次移动10px left += 10; if(left <= 400){ div.style.left = left + "px"; } else { clearInterval(id); } }, 20); }; </script> </body> </html>
13.将上个案例(div移动)封装成函数 <--返回
第一次封装
<script type="text/javascript"> var div = document.getElementById("box"); //点击第一个按钮后移动到400px document.getElementById("btn1").onclick=function(){ animate(div,400); }; //点击第二个按钮后移动到800px document.getElementById("btn2").onclick=function(){ animate(div,800); }; //封装函数，ele为操作的元素，target为元素移动到目标位置 function animate(ele, target){ var left = ele.offsetLeft;//数字类型 var id = setInterval(function(){ //每次移动10px left += 10; if(left<=target){ ele.style.left=left + "px"; }else{ clearInterval(id); } },20); } </script>
第一次封装后的问题：
- 想要从800移动到400，无法办到
- 移动的步长不为10怎么办
- 多次点击，开启多个定时器
第二次封装
<script type="text/javascript"> var div = document.getElementById("box"); //点击第一个按钮后移动到400px document.getElementById("btn1").onclick=function(){ animate(div,400); }; //点击第二个按钮后移动到800px document.getElementById("btn2").onclick=function(){ animate(div,800); }; //封装函数，ele为操作的元素，target为元素移动到目标位置 function animate(ele, target){ //清理定时器 clearInterval(ele.timeId); var current = ele.offsetLeft;//当前元素的位置，数字类型 ele.timeId = setInterval(function(){ //每次移动10px var step = 10; step = current < target ? step : -step; current += step; if(Math.abs(target-current)>Math.abs(step)){ ele.style.left=current + "px"; }else{ ele.style.left=target + "px"; clearInterval(ele.timeId); } },20); } </script>
14.简单轮播图 <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> *{ padding: 0; margin-top: 0; } .inner{ width: 200px; height: 250px; position: relative; overflow: hidden; } ul{ list-style-type: none; position: absolute; width: 1000%; left: 0; top:0; } ul li{ float: left; } img{ width:200px; } .square{ position: absolute; left: 100px; top:200px; } span{ display: inline-block; font: 14px/14px; padding: 0 auto; width: 14px; background-color: white; } .current{ background-color: blue; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul> <li ><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div> </div> <script type="text/javascript"> var box = document.getElementById("box"); var inner = box.children[0]; var ul = inner.children[0]; var spans = inner.children[1].children; //获取相框宽度 var imgWidth = inner.offsetWidth; //为span注册鼠标进入事件 for(var i=0;i<spans.length;i++){ spans[i].setAttribute("index",i);//将索引保存 spans[i].onmouseover=function(){ //移除所有span的类别样式 for(var j=0;j<spans.length;j++){ spans[j].removeAttribute("class"); } //给当前span添加样式 this.className = "current"; var index = this.getAttribute("index");//先获取索引 console.log(index); console.log(imgWidth); animate(ul,-index*imgWidth); }; } //封装函数，ele为操作的元素，target为元素移动到目标位置 function animate(ele, target){ //清理定时器 clearInterval(ele.timeId); var current = ele.offsetLeft;//当前元素的位置，数字类型 ele.timeId = setInterval(function(){ //每次移动10px var step = 100; step = current < target ? step : -step; current += step; if(Math.abs(target-current)>Math.abs(step)){ ele.style.left=current + "px"; }else{ ele.style.left=target + "px"; clearInterval(ele.timeId); } },1); } </script> </body> </html>
15.左右焦点轮播图(在简单轮播图的基础上) <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> *{ padding: 0; margin-top: 0; } .inner{ width: 200px; height: 250px; position: relative; /*overflow: hidden;*/ } ul{ list-style-type: none; position: absolute; width: 1000%; left: 0; top:0; } ul li{ float: left; } img{ width:200px; } .square{ position: absolute; left: 100px; top:200px; } span{ display: inline-block; font: 14px/14px; padding: 0 auto; width: 14px; background-color: white; } .current{ background-color: blue; } #focusD{ width: 200px; position: absolute; left:0px; top: 100px; } #left{ display: inline-block; width: 20px; height: 30px; line-height: 30px; background-color: white; float: left; cursor: pointer; } #right{ display: inline-block; width: 20px; height: 30px; line-height: 30px; background-color: white; float: right; cursor: pointer; } .hidden{ display: none; } </style> </head> <body> <div class="box" id="box"> <div class="inner"> <ul> <li ><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> </ul> <div class="square"> <span class="current">1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div> <div id="focusD" class="hidden"><span id="left"><</span><span id="right">></span></div> </div> <script type="text/javascript"> //========================================== var box = document.getElementById("box"); var inner = box.children[0]; var ul = inner.children[0]; var spans = inner.children[1].children; //获取相框宽度 var imgWidth = inner.offsetWidth; // var index = 0; //为span注册鼠标进入事件 for(var i=0;i<spans.length;i++){ spans[i].setAttribute("index",i);//将索引保存 spans[i].onmouseover=function(){ index = this.innerText; showSpanIndex(index-1);//高亮显示图片对应的索引按钮 index = this.getAttribute("index");//先获取索引 //console.log(index); //console.log(imgWidth); animate(ul,-index*imgWidth); }; } //========================================== var focusD = document.getElementById("focusD"); var leftButton = document.getElementById("left"); var rightButton = document.getElementById("right"); //鼠标进入box时，出现左右焦点按钮 box.onmouseover = function(){ focusD.removeAttribute("class"); }; //鼠标离开box时，左右焦点按钮隐藏 box.onmouseout = function(){ focusD.className="hidden"; }; //var index = 0;//注意：如果初始值设为0，单独使用左右焦点没有问题，当配合索引按钮使用时出现问题 //该索引的值应该为：当前显示的图片的索引 //为左边焦点按钮注册点击事件 leftButton.onclick = function(){ if(index>0){ index--; animate(ul,-index*imgWidth); showSpanIndex(index);//高亮显示图片对应的索引按钮 } }; //为右边焦点按钮注册点击事件 rightButton.onclick = function(){ //假如共4张图片，则index<3,index最大为2,index++后为3 //showSpanIndex(index)里面index最大限制为3 if(index<ul.children.length-1){ index++; animate(ul,-index*imgWidth); showSpanIndex(index);//高亮显示图片对应的索引按钮 } }; //鼠标进入焦点按钮，高亮显示；鼠标移出，恢复默认 leftButton.onmouseover =function(){ this.style.backgroundColor = "#ddd"; }; leftButton.onmouseout =function(){ this.style.backgroundColor = ""; }; rightButton.onmouseover =function(){ this.style.backgroundColor = "#ddd"; }; rightButton.onmouseout =function(){ this.style.backgroundColor = ""; }; //========================================== //封装函数，ele为操作的元素，target为元素移动到目标位置 function animate(ele, target){ //清理定时器 clearInterval(ele.timeId); var current = ele.offsetLeft;//当前元素的位置，数字类型 ele.timeId = setInterval(function(){ //每次移动10px var step = 100; step = current < target ? step : -step; current += step; if(Math.abs(target-current)>Math.abs(step)){ ele.style.left=current + "px"; }else{ ele.style.left=target + "px"; clearInterval(ele.timeId); } },1); } //========================================== //封装函数,高亮显示图片对应的索引按钮 function showSpanIndex(index){ //移除所有span的类别样式 for(var j=0;j<spans.length;j++){ spans[j].removeAttribute("class"); } spans[index].className = "current"; console.log("图片索引:"+index); }; </script> </body> </html>
16.轮播图综合 <--返回
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>标题</title> <style type="text/css"> *{ padding: 0; margin-top: 0; } .inner{ width: 303px; height: 374px; position: relative; border:2px solid red; overflow: hidden; } .box ul{ list-style-type: none; position: absolute; width: 1000%; left: 0; top:0; } .box ul li{ float: left; margin-right: 2px; } img{ width:300px; height: 370px; border: 1px solid #aaa; } .box ol { position: absolute; list-style-type: none; right: 10px; bottom: 10px; line-height: 20px; text-align: center; } .box ol li{ float: left; width: 20px; height: 20px; background-color: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; } .box ol li.current{ background-color: blue; } #focusD{ width: 300px; position: absolute; left:0px; top: 180px; } #left{ display: inline-block; width: 20px; height: 30px; line-height: 30px; background-color: white; float: left; cursor: pointer; } #right{ display: inline-block; width: 20px; height: 30px; line-height: 30px; background-color: white; float: right; cursor: pointer; } .hidden{ display: none; } </style> </head> <body> <div class="box" id="box"> <div class="inner"><!-- 相框 --> <ul> <li ><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> </ul> <ol></ol> </div> <div id="focusD" class="hidden"><span id="left"><</span><span id="right">></span></div> </div> <script type="text/javascript"> //=================获取页面的元素================= var box = document.getElementById("box"); var inner = box.children[0]; var ul = inner.children[0]; var list = ul.children; var ol = inner.children[1]; var focusD = document.getElementById("focusD"); var leftButton = document.getElementById("left"); var rightButton = document.getElementById("right"); var imgWidth = inner.offsetWidth;//获取相框宽度 //用于保存当前要显示图片的索引 var index = 0; //=================创建<ol>列表================= //================索引按钮移动图片=============== for(var i=0;i<list.length;i++){ //创建li标签，添加到ol标签下 var liObj = document.createElement("li"); ol.appendChild(liObj); liObj.innerText = i+1; liObj.setAttribute("index",i);//将索引保存 liObj.onmouseover=function(){ //移除所有span的类别样式 for(var j=0;j<ol.children.length;j++){ ol.children[j].removeAttribute("class"); } //给当前li设置样式，即背景色为blue this.className = "current"; index = this.getAttribute("index");//获取索引 animate(ul,-index*imgWidth); }; } ol.children[0].className="current";//第一张图片背景色设置为blue //克隆ul第一个li，追加到ul最后 ul.appendChild(ul.children[0].cloneNode(true)); //================左右焦点移动图片=============== //鼠标进入box时，出现左右焦点按钮 box.onmouseover = function(){ focusD.removeAttribute("class"); }; //鼠标离开box时，左右焦点按钮隐藏 box.onmouseout = function(){ focusD.className="hidden"; }; //为左边焦点按钮注册点击事件 leftButton.onclick = function(){ if(index>0){ index--; animate(ul,-index*imgWidth); showIndex(index);//高亮显示图片对应的索引按钮 } }; //为右边焦点按钮注册点击事件 /*rightButton.onclick = function(){ index++;//index++后，index保存的是当前要显示的图片的索引 console.log("当前要显示的图片的索引:"+index); if(index == ul.children.length-1){ ul.style.left = 0 +"px"; index = 0; showIndex(index);//高亮显示图片对应的索引按钮 }else{ animate(ul,-index*imgWidth); showIndex(index);//高亮显示图片对应的索引按钮 } };*/ /* rightButton.onclick = function(){ index ++; if(index == ul.children.length-1){ ul.style.left = 0 +"px"; index = 0; console.log("当前要显示的图片的索引:"+index); console.log(111111); //showIndex(index);//高亮显示图片对应的索引按钮 } console.log("当前要显示的图片的索引:"+index); animate(ul,-index*imgWidth); if(index <= ul.children.length-2){ showIndex(index);//高亮显示图片对应的索引按钮 } };*/ //========老师的代码================ rightButton.onclick = function(){ if(index == ul.children.length-1){ ul.style.left = 0 +"px"; index = 0; } index ++; console.log("当前要显示的图片的索引:"+index); animate(ul,-index*imgWidth); if(index <= ul.children.length-2){ showIndex(index);//高亮显示图片对应的索引按钮 } }; //鼠标进入焦点按钮，高亮显示；鼠标移出，恢复默认 leftButton.onmouseover =function(){ this.style.backgroundColor = "#ddd"; }; leftButton.onmouseout =function(){ this.style.backgroundColor = ""; }; rightButton.onmouseover =function(){ this.style.backgroundColor = "#ddd"; }; rightButton.onmouseout =function(){ this.style.backgroundColor = ""; }; //==========================================
//========================================== //封装函数，ele为操作的元素，target为元素移动到目标位置 function animate(ele, target){ //清理定时器 clearInterval(ele.timeId); var current = ele.offsetLeft;//当前元素的位置，数字类型 ele.timeId = setInterval(function(){ //每次移动10px var step = 10; step = current < target ? step : -step; current += step; if(Math.abs(target-current)>Math.abs(step)){ ele.style.left=current + "px"; }else{ ele.style.left=target + "px"; clearInterval(ele.timeId); } console.log("移动中。。。"); },100); } //========================================== //封装函数,高亮显示图片对应的索引按钮 function showIndex(index){ //移除所有span的类别样式 for(var k=0;k<ol.children.length;k++){ ol.children[k].removeAttribute("class"); } ol.children[index].className = "current"; //console.log("图片索引:"+index); }; </script> </body> </html>
---