前言
这是我学习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"><</span>
<span id="right">></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"><</span><span id="right">></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>
171
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
