JavaScript-WEB-API第五天-CSDN博客

本文链接：https://blog.csdn.net/m0_46940260/article/details/105468307

前言

这是我学习WEB-API的第五天,把今天学到的记录下来,目的是方便以后的复习,知识在于积累,在于记录,希望给我带来帮助的同时,也能帮助到在自学的你,加油！！！

1.定时器

1.1 一次性定时器案例
1.2 非一次性定时器案例-注册协议按钮禁用
1.3 div颜色渐变
1.4 设置div宽度

2.封装动画函数

2.1 封装动画函数----移动元素

3.轮播图

3.1 简单轮播图
3.2 左右焦点的轮播图
3.3 无缝连接的轮播图
3.4 完整的轮播图

4.三大系列

4.1 三大系列
4.2 offset系列

三组属性-offset系列中的属性
offset系列具体的值

5.1 直接通过document获取元素
5.2 图片跟着鼠标飞

1. 定时器

1.1 一次性定时器

所谓一次性定时器，指程序只执行一次，不会执行第二次。同时需要注意，一次性定时器的代码不清除会一直留在内存中，所以需要一个清除内存中定时器代码的按钮。

1.1 一次性定时器

onload：页面加载完成后执行
timeId：返回值:定时器id
setTimeout(函数,时间);—指定函数在指定的毫秒数之后执行
clearTimeout(定时器ID);—清除定时器
代码实现逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>
		//页面加载后
		window.onload = function () {
			//一次性的定时器
			var timeId = window.setTimeout(function () {
				alert("一次性定时器,我只执行一次");
			},1000);
			
			//点击这个按钮,停止这个一次性的定时器
			document.getElementById("btn").onclick = function () {
				clearTimeout(timeId);
			};
		};
	</script>
</head>
<body>
	<input type="button" value="清除一次性定时器按钮" id="btn"/>
</body>
</html>

1.2 协议按钮禁用

var time = 5; 定义临时变量，储存按钮倒计时时间。
timeId; 定时器id
setInterval(函数,时间); 按照指定时间调用函数。setInterval方法会不停地调用函数
time–; 定时器调用一次,在5秒的基础上减去1秒。(计时器)
clearInterval(); 停止定时器
disabled–定义这个属性后input按钮在指定时间内不可用,不可点击。
false表示可以点击按钮了
代码实现逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<textarea name="txt" cols="30" rows="10" disabled="disapled">
		这里就是随便写的文字,随便写的,世界这么大,我想去看看。
		秦始皇,打钱,	汉高祖刘邦,打钱...
	</textarea>
	<input type="button" value="请仔细阅读协议(5)" id="btn" />
	
	//引入js
	<script src="common.js"></script>	
	<script>	
		var time = 5;
		var timeId = setInterval(function () {
			time--;
			my$("btn").value = "请仔细阅读协议("+time+")";
			if (time <= 0) {
				//停止定时器
				clearInterval(timeId);
				my$("btn").disabled = false;
				my$("btn").value = "确定";
			}
		},1000);
		
	</script>
</body>
</html>

1.3 DIV颜色渐变

获取按钮.注册事件=处理函数
opacity：设置DIV透明级别
代码实现逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>DIV背景颜色渐变</title>
	<style>
	div {
		width: 260px;
		height: 200px;
		background-color: hotpink;
	}
	</style>
</head>
<body>
	<div id="dv"></div>
	<input type="button" value="背景渐变" id="btn"/>
	<script src="common.js"></script>
	<script>
		my$("btn").onclick = function () {
			var opacity = 10;
			var timeId = setInterval(function () {
				opacity--;
				if (opacity <= 0) {
					clearInterval(timeId);
				}
				my$("dv").style.opacity = opacity / 10;
			},100);
		};
	</script>
</body>
</html>

1.4 设置DIV宽度

代码实现逻辑：
----事件里面的width是储存盒子的宽度，定时器调用一次，盒子前进10像素，当盒子走到> 800像素时(盒子宽800px)，清除定时器(停止定时器)。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	div {
		width: 200px;
		height: 150px;
		background-color: red;
		border-radius: 100px;
	}

	</style>
</head>
<body>
	<div id="dv"></div>
	<input type="button" value="变宽" id="btn" />
	<script src="common.js"></script>
	<script>
		my$("btn").onclick = function () {
			var width = 200;
			var timeId = setInterval(function () {
				width += 10;
				if (width == 800) {
					clearInterval(timeId);
				}
				my$("dv").style.width = width+ "px";
			},100);
		};
	</script>
</body>
</html>

2. 封装动画函数

2.1 封装动画函数----移动元素

positio:absolute; 脱离文档流，移动位置
element 函数参数，接收div元素的id属性
target 函数参数，接收div元素的width属性
element.offsetLeft 元素当前位置
step 移动距离-宽度
Math.abs(); 返回参数的绝对值，如果参数是正数，返回正数。如果是负数，返回相反数
代码逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
	<meat charset="UTF-8">
	<title>封装动画-移动元素</title>
	<style>
    * {
      margin: 0;
      padding: 0;
    }
    input {
      margin-top: 20px;
    }
    div {
      margin-top: 30px;
      width: 200px;
      height: 100px;
      background-color: green;
      position: absolute;
    }
  	</style>
</head>
<body>
	<input type="button" value="移动400px" id="btn1" />
	<input type="button" value="移动800px" id="btn2" />
	<div id="dv"></div>
	<script src="common.js"></script>
	<script>
		my$("btn1").onclick = function () {
			animate(my$("dv"),400);
		};
		my$("btn2").onclick = function () {
			animate(my$("dv"),800);
		};
		function animate (element,target) {
			clearInterval(element.timeId);
			element.timeId = setInterval(function () {
				var current = element.offsetLeft;
				var setp = 10;
				setp = current < target ? setp : -setp;
				current += setp;
				if (Math.abs(target - current) > Math.abs(setp)) {
					element.style.left = current + "px";
				} else {
					element.style.left = target + "px";
					clearInterval(element.timeId);
				}
			},20);
		}
	</script>
</body>
</html>

3. 轮播图

3.1 简单轮播图

children[索引]—获取子元素
offsetWidth;—当前元素的当前宽度
onmouseover事件—会在鼠标指针移动到元素上时触发
setAttribute()方法—为元素添加指定的属性，并为其赋指定的值
removeAttribute()方法—删除某个元素的指定属性
className属性—设置或返回元素的 class 属性
代码实现逻辑：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	* { margin: 0; padding: 0; }	
    ul { list-style: none; }    
    img { vertical-align: top; }    
    .box {
      width: 730px;
      height: 454px;
      margin: 100px auto;
      padding: 5px;
      border: 1px solid #ccc;
    }
    .inner {
      width: 730px;
      height: 454px;
      background-color: pink;
      overflow: hidden;
      position: relative;
    }
    .inner ul {
      width: 1000%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .inner li { float: left; }
    .square {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    .square span {
      display: inline-block;
      width: 16px;
      height: 16px;
      background-color: #fff;
      text-align: center;
      line-height: 16px;
      cursor: pointer;
    }
    .square span.current {
      background-color: orangered;
      color: #fff;
    }
	</style>
</head>
<body>
<div class="box" id="box">
  <div class="inner">//相框
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""/></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""/></a></li>
    </ul>
    <div class="square">
      <span class="current">1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
    </div>
  </div>
</div>
<script src="common.js"></script>
<script>
	var box = my$("box");
	var inner = box.children[0];
	var imgWidth = inner.offsetWidth;
	var ulObj = inner.children[0];
	var spanObjs = inner.children[1].children;
	for (var i = 0; i < spanObjs.length; i++) {
		spanObjs[i].setAttribute("index",i);
		spanObjs[i].onmouseover = function () {
			for (var j = 0; j < spanObjs.length; j++) {
				spanObjs[j].removeAttribute("class");
			}
			this.className = "current";
			var pic = this.getAttribute("index");
			animate(ulObj,-index * imgWidth);
		};
	}
	function animate(element,target) {
		clearInterval(element.timeId);
		element.timeId = setInterval(function () {
			var current = element.offsetLeft;
			var step = 10;
			step = current < target ? step : -step;
			current += step;
			if (Math.abs(current - target) > Math.abs(step)) {
				element.style.left = current + "px";
			} else {
				clearInterval(element.timeId);
				element.style.left = target + "px";				
			}
		}, 20);
	}
</script>
</body>
</html>

3.2 左右焦点的轮播图

获取所有元素
注册鼠标进入显示和离开隐藏事件
注册左右按钮的点击事件 = 事件处理函数
函数中先判断对象当前位置，若是没有到达最后一张图片，则系统从上往下执行，每执行一次，程序调用一次，index+1… 而执行图片轮番显示效果则由动画封装函数来执行。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    body, ul, ol, li, img {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    #box {
      width: 520px;
      height: 280px;
      padding: 5px;
      position: relative;
      border: 1px solid #ccc;
      margin: 100px auto 0;
    }
    .ad {
      width: 520px;
      height: 280px;
      overflow: hidden;
      position: relative;
    }
    #box img {
      width: 520px;
    }
    .ad ol {
      position: absolute;
      right: 10px;
      bottom: 10px;
    }
    .ad ol li {
      width: 20px;
      height: 20px;
      line-height: 20px;
      border: 1px solid #ccc;
      text-align: center;
      background: #fff;
      float: left;
      margin-right: 10px;
      cursor: pointer;
      _display: inline;
    }
    .ad ol li.current {
      background: yellow;
    }
    .ad ul li {
      float: left;
    }
    .ad ul {
      position: absolute;
      top: 0;
      width: 2940px;
    }
    .ad ul li.current {
      display: block;
    }
    #focusD {
      display: none;
    }
    #focusD span {
      width: 40px;
      height: 40px;
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: -20px;
      background: #000;
      cursor: pointer;
      line-height: 40px;
      text-align: center;
      font-weight: bold;
      font-family: '黑体';
      font-size: 30px;
      color: #fff;
      opacity: 0.3;
      border: 1px solid #fff;
    }
    #focusD #right {
      right: 5px;
      left: auto;
    }
  </style>
</head>
<body>
<div id="box" class="all">
  <div class="ad">
    <ul id="imgs">
      <li><img src="images/1.jpg.webp"/></li>
      <li><img src="images/2.jpg.webp"/></li>
      <li><img src="images/3.jpg.webp"/></li>
      <li><img src="images/4.jpg.webp"/></li>
      <li><img src="images/5.jpg.webp"/></li>
    </ul>
  </div>
  <div id="focusD">
      <span id="left">&lt;</span>
      <span id="right">&gt;</span>
  </div>
</div>
<script src="common.js"></script>
<script>
	var box = my$("box");
	var ad = box.children[0];
	var imgWidth = ad.offsetWidth;
	var ulObj = ad.children[0];
	var focusD = my$("focusD");
	box.onmouseover = function () {
		focusD.style.display = "block";
	};
	box.onmouseout = function () {
		focusD.style.display = "none";
	};
	
	var index = 0;
	my$("rigth").onclick = function () {
		if (index < ulObj.children.length-1) {
			index++;
			animate(ulObj, -index * imgWidth);
		}
	};
	my$("left").onclick = function () {
		if (index > 0) {
			index--;
			animate(ulObj, -index * imgWidth);
		}
	};
	
	function animate(element,target) {
		clearInterval(element.timeId);
		element.timeId = setInterval(function () {
			var current = element.offsetLeft;
			var step = 10;
			step = current > target ? step : -step;
			current += step;
			if(Math.abs(current - target) > Math.abs(step)) {
				element.style.left = current + "px";
			} else {
				clearInterval(element.timeId);
				element.style.left = target + "px";
			}
		}, 20);
	}
</script>
</body>
</html>

3.3 无缝连接的轮播图

第一张与最后一张图片是同一张，当图片是第六张，当作第一张，当用户再点击按钮，滑到第一张同时快速滑到第二张，这样就做成无缝轮播效果了。
找到相框中子元素当作对象传过来，系统执行一次从当前位置倒着移动10px，1200是最后一张图片，如果当前位置小于1200并且是10以内,那说明是最后一张图片,最后一张图片和第一张图片是一样的，所以直接当作第一张显示，索引=0；否则距离目标位置大于移动像素10，那么按照当前位置每次移动10像素。
自动播放，鼠标进入停止自动播放，鼠标离开继续播放。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  * {
     margin: 0;
     padding: 0;
  }
  ul {
     list-style: none;
  }
  img {
     vertical-align: top;
     width: 300px;
     height: 100%;
  }
  .box {
     width: 300px;
     height: 239px;
     margin: 100px auto;
     background-color: pink;
     border: 1px solid red;
     position: relative;
     overflow: hidden;
  }
  .box ul li {
     float: left;
  }
  .box ul {
     width: 1500px;
     position: absolute;
     left: 0;
     top: 0;
  }
  </style>
</head>
<body>
<div class="box" id="screen">
  <ul>
     <li><img src="images/1.jpg.webp"/></li>
     <li><img src="images/2.jpg.webp"/></li>
     <li><img src="images/3.jpg.webp"/></li>
     <li><img src="images/4.jpg.webp"/></li>
     <li><img src="images/5.jpg.webp"/></li>
     <li><img src="images/1.jpg.webp"/></li>
 </ul>
</div>
<script src="common.js"></script>
<script>
	var current = 0;
	function f1(){
  		var ulObj = my$("screen").children[0];
  		current -= 10;
  		if(current < -1200){
    		ulObj.style.left = 0+"px";
    		current = 0;
  		}else{
    		ulObj.style.left = current+"px";
  		}
	}
  	var timeId = setInterval(f1,30);
	
	my$("screen").onmouseover = function(){
    	clearInterval(timeId);
  	}
  	my$("screen").onmouseout = function (){
    	timeId = setInterval(f1,30);
  	}
</script>
</body>
</html>

3.4 完整的轮播图

<!DOCPYTE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  * {
     padding: 0;
     margin: 0;
     list-style: none;
     border: 0;
  }
  .all {
     width: 500px;
     height: 200px;
     padding: 7px;
     border: 1px solid #ccc;
     margin: 100px auto;
     position: relative;
  }
  .screen {
     width: 500px;
     height: 200px;
     overflow: hidden;
     position: relative;
  }
  .screen li {
     width: 500px;
     height: 200px;
     overflow: hidden;
     float: left;
  }
  .screen ul {
     position: absolute;
     left: 0;
     top: 0px;
     width: 3000px;
  }
  .all ol {
     position: absolute;
     right: 10px;
     bottom: 10px;
     line-height: 20px;
     text-align: center;
  }
  .all ol li {
     float: left;
     width: 20px;
     height: 20px;
     background: #fff;
     border: 1px solid #ccc;
     margin-left: 10px;
     cursor: pointer;
  }
  .all ol li.current {
     background: #DB192A;
  }
  #arr {
     display: none;
  }
  #arr span {
     width: 40px;
     height: 40px;
     position: absolute;
     left: 5px;
     top: 50%;
     margin-top: -20px;
     background: #000;
     cursor: pointer;
     line-height: 40px;
     text-align: center;
     font-weight: bold;
     font-family: '黑体';
     font-size: 30px;
     color: #fff;
     opacity: 0.3;
     border: 1px solid #fff;
  }
  #arr #right {
     right: 5px;
     left: auto;
  }
  </style>
</head>
<body>
<div class="all" id='box'>
  <div class="screen"><!--相框-->
    <ul>
      <li><img src="13完整的轮播图/images/1.jpg" width="500" height="200"/></li>
      <li><img src="13完整的轮播图/images/2.jpg" width="500" height="200"/></li>
      <li><img src="13完整的轮播图/images/3.jpg" width="500" height="200"/></li>
      <li><img src="13完整的轮播图/images/4.jpg" width="500" height="200"/></li>
      <li><img src="13完整的轮播图/images/5.jpg" width="500" height="200"/></li>
    </ul>
    <ol></ol>
  </div>
  <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script src="common.js"></script>
<script>
	var box = my$("box");
	var screen = box.children[0];
	var imgWidth = screen.offsetWidth;
	var ulObj = screen.children[0];
	var list = ulObj.children;
	var olObj = screen.children[1];
	var arr = my$("arr");
	var pic = 0;
	for (var i = 0; i < list.length; i++) {
		var liObj = document.createElement("li");
		olObj.appendChild(liObj);
		liObj.innerHTML = ( i + 1 );
		liObj.setAttribute("index",i);
		liObj.onmouseover = function () {
			for (var j = 0; j < olObj.children.length; j++) {
				olObj.children[j].removeAttribute("class");
			}
			this.className = "current";
			pic = this.getAttribute("index");
			animate(ulObj, -pic * imgWidth);
		};
	}
	olObj.children[0].className = "current";
	
	var timeId = setInterval(clickHandle,1000);
	
	ulObj.appendChild(ulObj.children[0].cloneNode(true));	

	box.onmouseover = function () {
		arr.style.display = "block";
		clearInterval(timeId);
	};
	box.onmouseout = function () {
		arr.style.display = "none";
		timeId = setInterval(clickHandle,1000);
	};
	my$("right").onclick = clickHandle;
	function clickHandle () {
		if (pic == list.length - 1) {
			pic = 0;
			ulObj.style.left = 0 + "px";
		}
		pic++;
		animate(ulObj, -pic * imgWidth);
		if (pic == list.length - 1) {
			olObj.children[olObj.children.length - 1].removeAttribute("class")
			olObj.children[0].className = "current";
		} else {
			for (var i = 0; i < olObj.children.length; i++) {
				olObj.children[i].removeAttribute("class");
			}
			olObj.children[pic].className = "current";
		}
	};
	my$("left").onclick = function () {
		if (pic == 0) {
			pic = 5;
			ulObj.style.left = -pic * imgWidth + "px";
		}
		pic--;
		animate(ulObj, -pic * imgWidth);
		for (var i = 0; i < olObj.children.length; i++) {
			olObj.children[i].removeAttribute("class");
		}
		olObj.children[pic].className = "current";
	};
	
	function animate(element, target) {
		clearInterval(element.timeId);
		element.timeId = setInterval(function () {
			var current = element.offsetLeft;
			var step = 10;
			step = current < target ? step : -step;
			current += step;
			if (Math.abs(target - current) > Math.abs(step)) {
				element.style.left = current + "px";
			} else {
				clearInterval(element.timeId);
				element.style.left = target + "px";
			}
		}, 10);
	}
</script>
</body>
</html>

4 三大系列

4.1 三大系列

三大系列有：offset系列、client系列、scroll系列
client系列
clientWidth，clientHeight ：是我们设置的宽和高加上内边距（没有边框）
clientLeft，clientTop ：就是我们设置的边框值
scroll系列
scrollWidth，scrollHeight ：就是我们设置的宽和高加内边距（内容没有溢出的前提，如果超出了范围就按内容而定）
scrollLeft，scrollTop：滚动条卷走的高度

4.2 offset系列

offsetWidth：获取元素的宽。元素的width+padding+border=offsetWidth获取的总宽度。

offsetHeight：获取元素的高。元素的height+padding+border=offsetHeight获取的高。

offsetLeft：获取元素距离左边位置的值。分脱离文档流，和没有脱离文档流。
没有脱离文档流：父元素margin+父元素padding+父元素border+自己的margin。
脱离文档流：脱离文档流之后父级元素所有的样式与我无关，主要获取的是自己的margin和left。

offsetTop：获取元素距离上面位置的值。自己的margin或者父元素margin中获取其中一个,谁数值大获取哪个。脱离文档流之后只获取自己的
offsetParent：返回这个元素的父级元素
offsetTop：参照由父级身上的position：absolute/fixed，如果父级元素身上没有就逐层向上查找，直到body

5.1 直接通过document获取元素

document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象可以让我们获取到整个HTML中的元素。
也可以对整个HTML中的元素进行操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>document</title>
</head>
<body>
<script>
  console.log(document.body);
  console.log(document.title);
  document.title="嘎嘎去";
  console.log(document.documentElement);
</script>
</body>
</html>

5.2 图片跟着鼠标飞

onmousemove 事件会在鼠标指针移到指定的对象时发生。
通过document对整个HTML进行操作，注册鼠标事件，在获得鼠标光标进入时执行事件函数,横向的和纵向的发生事件。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    img{ position: absolute; }
  	</style>
</head>
<body>
<img src="images/tianshi.gif" alt="" id="im">
<script src="common.js"></script>
<script>
	document.onmousemove = function (e) {
		my$("im").style.left = e.clientX + "px";
		my$("im").style.top = e.clientY + "px";
	};
</script>
</body>
</html>