返回目录《JavaScript学习笔记目录》
6.1 图片切换练习
6.2 添加删除记录练习
6.3 divMove练习
6.4 轮播图练习
6.1 图片切换练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片切换练习</title><style type="text/css">*{margin: 0;padding: 0;}#outer{width:800px;margin: 50px auto;padding: 10px;/*background-color: greenyellow;*/text-align: center;/*文本居中显示，内联元素也可以当成一个文本*/}#containImg{width: 100%;height:550px;/*background-color: #6495ED;*/}.btn{/*display: inline-block;*/width: 20%;height: 30px;}#info{display: inline-block;/*background-color: darkmagenta;*/width: 60%;text-align: center;font-family: STKaiti;}</style><script type="text/javascript">window.onload=function () {//使用数组保存图片的相对路径var imgPathArr=[];imgPathArr.push("../../img/泰勒 · 斯威夫特/泰勒 · 斯威夫特1.jpeg");imgPathArr.push("../../img/泰勒 · 斯威夫特/泰勒 · 斯威夫特2.jpeg");imgPathArr.push("../../img/泰勒 · 斯威夫特/泰勒 · 斯威夫特3.jpeg");imgPathArr.push("../../img/泰勒 · 斯威夫特/泰勒 · 斯威夫特4.jpeg");//定义一个变量保存当前图片的索引，初始值是0var imgIndex=0;//设置初始信息文字var info=document.getElementById("info");//获取info对象info.innerHTML="一共"+imgPathArr.length+"张图片，"+"这是第"+(imgIndex+1)+"张图片";//获取两个按钮var last=document.getElementById("last");var next=document.getElementById("next");//获取img元素对象var img=document.getElementsByTagName("img")[0];//为两个按钮绑定单击响应函数last.onclick=function () {if(--imgIndex<0)imgIndex+=imgPathArr.length;img.src=imgPathArr[imgIndex];info.innerHTML="一共"+imgPathArr.length+"张图片，"+"这是第"+(imgIndex+1)+"张图片";}next.onclick=function () {imgIndex=(++imgIndex)%imgPathArr.length;img.src=imgPathArr[imgIndex];info.innerHTML="一共"+imgPathArr.length+"张图片，"+"这是第"+(imgIndex+1)+"张图片";}//自动播放功能var autoDisplay=document.getElementById("autoDisplay");var pause=document.getElementById("pause");pause.disabled="disabled";var Timer=-1;//记录定时器标识//为自动播放添加单击响应函数autoDisplay.onclick=function () {//在对于同一个对象，在开启新的定时器时，应该将上一个定时器关闭//但是在此程序中，因为将按钮设置为不可选中，不能在开启一个定时器的情况下，再开启一个定时器，没有上一个定时器可关闭//window.clearInterval(Timer);Timer=window.setInterval(function () {imgIndex=(++imgIndex)%imgPathArr.length;img.src=imgPathArr[imgIndex];info.innerHTML="一共"+imgPathArr.length+"张图片，"+"这是第"+(imgIndex+1)+"张图片";},1000);autoDisplay.disabled="disabled";pause.disabled="";};//为暂停播放添加单击响应函数pause.onclick=function () {clearInterval(Timer);autoDisplay.disabled="";pause.disabled="disabled";};}</script>
</head>
<body>
<div id="outer"><div id="containImg"><img src="../../img/泰勒 · 斯威夫特/泰勒 · 斯威夫特1.jpeg" alt="1" width="100%"></div><!--编写HTML时，如果涉及到计算像素，一定要注意各个标签之间的换行符，这些换行符会有一些像素--><button id="last" class="btn">上一张</button><div id="info"></div><button id="next" class="btn">下一张</button><button id="autoDisplay" class="btn">自动播放</button> <button id="pause" class="btn">暂停播放</button>
</div>
</body>
</html>
6.2 添加删除记录练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>添加删除记录练习</title><style type="text/css">*{margin: 0px;padding: 0px;}#tab{margin: 330px auto 0px;width: 400px;border-collapse:collapse ;}#tab th,td{border: 1px solid black;font-family: "Times New Roman",STKaiti;text-align: center;}#tab tr:hover{background-color: red;}#formAdd{width: 378px;padding:0px 10px 10px;border: black 1px solid;text-align: center;font-family: STKaiti;font-size: 20px;position: fixed;/*绝对定位会脱离文档流*/left: 50%;margin-left: -200px;top:50px;background-color: white;}#formAdd p{font-size: 25px;margin: 5px 10px auto;font-weight: bold;}#formAdd div{padding: 8px;}#formAdd button{width: 100px;margin:8px 0px auto;height:30px;font-size: 20px;font-family: STKaiti;}.spanWidth{display: inline-block;width: 4em;height: 20px;text-align: right;}.spanWidth span{display: inline-block;width: 2em;}.s2{padding-right: 5px;}.s3{display: inline-block;width: 2em;}.inputTextWidth{width:178px;height: 25px;font-size: 20px;font-family: "Times New Roman",STKaiti;}</style><script type="text/javascript">window.onload=function () {//函数:删除trfunction deleteTr() {//删除之前弹出一个提示框/** confirm()用于弹出一个带有确认和取消按钮的提示框* 需要一个字符串作为参数，该字符串将会作为提示文字显示出来* 点击确认返回true，点击取消返回false*/var flag=confirm("确认删除用户："+ this.parentNode.parentNode.firstChild.innerHTML+"吗？");if(flag)this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);return false;}//函数:添加trfunction addTr(tablebody,name,email,salary) {var tr=document.createElement("tr");//行var td1=document.createElement("td");//单元格1var td2=document.createElement("td");//单元格2var td3=document.createElement("td");//单元格3var td4=document.createElement("td");//单元格4td1.innerHTML=name;//姓名td2.innerHTML=email;//电子邮件td3.innerHTML=salary;//工资薪水td4.innerHTML="<a href='javascript:;'>Delete</a>";//工资薪水tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);//为超链接绑定单击响应函数/** 点击超联机以后超链接会跳转页面,这是超链接的默认行为* 但此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为* 或者在a标签的href属性中添加如下字符串* "javascript:;"*/var aArr=td4.getElementsByTagName("a");aArr[0].onclick=deleteTr;tr.appendChild(td4);tablebody.appendChild(tr);}//获取id为tab的表格var tab=document.getElementById("tab");var tabbody=tab.getElementsByTagName("tbody")[0];//初始值，添加3行tr，每行tr有3个tdaddTr(tabbody,"黄恒","1796915552@qq.com","50000");addTr(tabbody,"舒沛摇","1796915552@qq.com","50000");addTr(tabbody,"姬满庆","1796915552@qq.com","50000");//为提交按钮绑定单击响应函数var btn=document.querySelector("#formAdd button");btn.onclick=function () {var inputArr=btn.parentNode.getElementsByTagName("input");var name=inputArr[0].value;var email=inputArr[1].value;var salary=inputArr[2].value;addTr(tabbody,name,email,salary);};};</script>
</head>
<body><table id="tab"><tr><th>姓<span class="s3"></span>名</th><th>电子邮件</th><th>工资薪水</th><th>删<span class="s3"></span>除</th></tr></table><form action="javascript:;" id="formAdd"><p>添加新员工</p><div><span class="spanWidth">姓<span></span>名</span><span class="s2">:</span><input class="inputTextWidth" type="text" name="username"/></div><div><span class="spanWidth">电子邮件</span><span class="s2">:</span><input class="inputTextWidth" type="text" name="email"/></div><div><span class="spanWidth">工资薪水</span><span class="s2">:</span><input class="inputTextWidth" type="text" name="salary"/></div><button type="button">提交</button></form>
<br/>
<br/>
<br/>
<br/></body>
</html>
6.3 divMove练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>DIV随鼠标移动练习</title><style type="text/css">#box1{width: 100px;height: 100px;background-color: red;position:absolute;}</style><script type="text/javascript">window.onload=function () {/** 使div可以随鼠标移动* *///获取box1var box1=document.getElementById("box1");//绑定鼠标移动事件,不能给box1绑定，如果给box1绑定，则只有鼠标在box1中移动才会触发事件document.onmousemove=function (event) {event=event||window.event;//鼠标X坐标box1.style.left=event.clientX+document.body.parentNode.scrollLeft+"px";//鼠标Y坐标,这样可以解决鼠标指针与box1之间的差距问题//浏览器的滚动条是body的父元素的box1.style.top=event.clientY+document.body.parentNode.scrollTop+"px";//也可以通过pageX和pageY获取鼠标相对于页面的坐标/*所以程序也可以这样写* box1.style.left=event.pageX+"px";* box1.style.top=event.pageY+"px";* 但是这个不兼容IE8* *///显示坐标box1.innerHTML="X="+event.clientX+"px"+"<br/>"+"Y="+event.clientY+"px";};/** 鼠标单击后div不动* */var flag=false;document.body.onclick=function (event) {if(!flag){document.onmousemove=null;box1.style.left=event.clientX+document.body.parentNode.scrollLeft+"px";box1.style.top=event.clientY+document.body.parentNode.scrollTop+"px";flag=!flag;//此语句只执行一次}}/** 拖拽div* *///drag函数function drag(obj){//obj：需要拖拽的元素//obj开启绝对定位obj.style.position="absolute";//为obj添加鼠标按下事件obj.onmousedown=function (event1) {/** setCapture只有IE支持，火狐中不报错，chrome报错* 当调用一个元素的setCapture方法后，正元素将会把下一次所有鼠标按下的相关事件捕获到自身上* 在此例中，会将鼠标移动捕获到自身* */if(obj.setCapture){obj.setCapture();//IE8取消默认行为}//这个条件句也可以这样写：box1.setCapture&&box1.setCapture();//兼容性问题event1=event1||window.event;//求出box1和鼠标的相对位置var relX=event1.clientX-obj.offsetLeft;var relY=event1.clientY-obj.offsetTop;//为document添加鼠标移动事件document.onmousemove=function (event) {//兼容性问题event=event||window.event;obj.style.left=event.clientX-relX+"px";obj.style.top=event.clientY-relY+"px";//显示坐标obj.innerHTML="X="+obj.style.left+"<br/>"+"Y="+obj.style.top;};//为document添加鼠标松开事件,不能给box1绑定，因为鼠标松开时，可能会被别的元素响应onmouseupdocument.onmouseup=function () {//取消document的onmousemove事件document.onmousemove=null;document.onmouseup=null;//当鼠标松开时，取消对事件的捕获if(obj.releaseCapture){obj.releaseCapture();//IE8取消默认行为配套setCapture使用}};return false;//取消默认行为，IE8不起作用}}drag(box1);drag(document.getElementsByTagName("div")[1]);drag(document.getElementsByTagName("img")[0]);/** 当鼠标滚轮向下滚时，box1变长* 向上滚时，box1变短* 使用事件onmousewheel* 但是火狐不兼容这个事件，火狐需要使用DOMMouseScroll* *///为box1绑定鼠标滚动事件//记录初始可见高度box1.onmousewheel=function (event) {event=event||window.event;//使用event.wheelDelta可以获取鼠标滚动方向，向上滚得正值120，向下滚得负值-120，这个值只看正负，不看大小，这个属性火狐中不支持//火狐中需要使用event.detail，向上滚-3，向下滚3if(event.wheelDelta>0)box1.style.height=box1.clientHeight-10+"px";elsebox1.style.height=box1.clientHeight+10+"px";/** 当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动* 这是浏览器的默认行为，如果不希望发生，可以取消默认行为** 但是火狐浏览器是使用的addEventListener方法绑定的响应函数，取消默认行为时，不能使用return false;* 需要使用event.preventDefault();* 但是IE8不支持event.preventDefault();* */return false;}/** 根据方向键移动box1* */// document.οnkeydοwn=function (event) {// var speed=20;// if(event.ctrlKey){// speed=50;//用户按下ctrl则加速// }// if(event.keyCode==37)//左移// box1.style.left=box1.offsetLeft-speed+"px";// if(event.keyCode==38)//上移// box1.style.top=box1.offsetTop-speed+"px";// if(event.keyCode==39)//右移// box1.style.left=box1.offsetLeft+speed+"px";// if(event.keyCode==40)//下移// box1.style.top=box1.offsetTop+speed+"px";// box1.innerHTML="X="+box1.style.left+"<br/>"+"Y="+box1.style.top;// return false;//取消默认行为// }/** 迭代，使div用方向键移动时更加流畅* */var speed=2;//速度var Timer=-1;//定时器document.onkeydown=function (event) {var dir=0;//方向标识speed=2;if(event.ctrlKey){speed=5;//用户按下ctrl则加速}if(event.keyCode==37)//左移dir=37;// box1.style.left=box1.offsetLeft-speed+"px";if(event.keyCode==38)//上移dir=38;// box1.style.top=box1.offsetTop-speed+"px";if(event.keyCode==39)//右移dir=39;// box1.style.left=box1.offsetLeft+speed+"px";if(event.keyCode==40)//下移dir=40// box1.style.top=box1.offsetTop+speed+"px";window.clearInterval(Timer);//关闭上一个TimerTimer=window.setInterval(function () {if(dir==37)//左移box1.style.left=box1.offsetLeft-speed+"px";if(dir==38)//上移box1.style.top=box1.offsetTop-speed+"px";if(dir==39)//右移box1.style.left=box1.offsetLeft+speed+"px";if(dir==40)//下移box1.style.top=box1.offsetTop+speed+"px";box1.innerHTML="X="+box1.style.left+"<br/>"+"Y="+box1.style.top;},1);//关闭定时器document.onkeyup=function (event) {if(event.keyCode>=37&&event.keyCode<=40)//松开方向键window.clearInterval(Timer);console.log(1);}return false;//取消默认行为}};</script>
</head>
<body style="height: 1000px;">
<div id="box1"></div>
<div style="width: 100px;height: 100px;position: absolute;top:400px;left:400px;background-color: #6495ED;"></div>
<img src="../../img/programmer.jpg" style="width: 100px"/>
</body>
</html>
6.4 轮播图练习
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>轮播图练习</title><style type="text/css">*{margin: 0px;padding: 0px;}#outer{margin: 50px auto;width: 720px;height: 458px;background-color: yellowgreen;overflow: hidden;position: relative;}#outer ul{list-style: none;position: absolute;height: 458px;/*left:-720px;*/}#outer li{float: left;width: 700px;height: 438px;padding: 10px 10px;/*background-color: red;*/}#navdiv{position: absolute;bottom: 10px;left: 50%;/*margin: -;*/}#navdiv a{float: left;width: 20px;height: 20px;margin: 10px;background-color: blue;opacity: 0.5;}#navdiv a:hover{background-color: red;opacity: 0.8;}</style><script type="text/javascript">window.onload=function () {//设置无序列表的宽度：var imgList=document.getElementById("imgList");var imgElementArr=document.getElementsByTagName("li");imgList.style.width=imgElementArr.length*720+"px";//设置超链接导航div位置var navdiv=document.getElementById("navdiv");navdiv.style.marginLeft=-imgElementArr.length*40/2+"px";//图片轮番滚动var count=0;var aArr=document.getElementsByTagName("a");var Timer=window.setInterval(function () {count=++count%imgElementArr.length;imgList.style.left=-720*count+"px";aArr[count].style.opacity="1";// console.log(count);// console.log(-720*count+"px");var countLast=count-1;if(countLast<0)countLast+=imgElementArr.length;aArr[countLast].style.opacity="0.5";},2000);//给每个超链接绑定单响应事件for(var i=0;i<aArr.length;i++){aArr[i].onclick=function() {var index=-1;//获取被点击超链接的索引for(var j=0;j<aArr.length;j++){if(aArr[j]==this) {index = j;count=j;break;}}imgList.style.left=-720*index+"px";aArr[index].style.opacity="1";for(var j=0;j<aArr.length;j++){if(j!=index)aArr[j].style.opacity="0.5";}};}};</script>
</head>
<body>
<div id="outer"><ul id="imgList"><li><img src="../../img/scenery/scenery1.jpg"/></li><li><img src="../../img/scenery/scenery2.jpg"/></li><li><img src="../../img/scenery/scenery3.jpg"/></li><li><img src="../../img/scenery/scenery4.jpg"/></li><li><img src="../../img/scenery/scenery5.jpg"/></li><li><img src="../../img/scenery/scenery6.jpg"/></li><li><img src="../../img/scenery/scenery7.jpg"/></li><li><img src="../../img/scenery/scenery8.jpg"/></li><li><img src="../../img/scenery/scenery9.jpg"/></li><li><img src="../../img/scenery/scenery10.jpg"/></li><li><img src="../../img/scenery/scenery11.jpg"/></li><li><img src="../../img/scenery/scenery12.jpg"/></li><li><img src="../../img/scenery/scenery13.jpg"/></li></ul><div id="navdiv"><a href="javascript:;" style="opacity: 1;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a></div>
</div></body>
</html>
![[“吊打面试官“系列之] 一晚带你玩转图片懒加载及其底层原理](https://img-blog.csdnimg.cn/20200801232108541.gif#pic_center)
