JSAP105
1、目标
2、一次性定时器
window.setTimeout(函数,时间);
参数列表同window.setInterval,同样返回timeID.只能定时一次，但不意味着不需要清理，清理的函数如下
清除定时：
clearTimeout(timeID)
//案例：协议按钮的禁用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<textarea name="texta" id="" cols="30" rows="10">这是服务条款，请您仔细阅读
</textarea>
<input type="button" value="请仔细阅读上面的协议(5)" id="btn"
disabled>
<script>
function my$(id) {
return document.getElementById(id)
}
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>
案例：渐变div
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 300px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="渐变" id="btn"/>
<script>
function my$(id) {
return document.getElementById(id)
}
var opacity = 10;
my$("btn").onclick = function () {
var timeId = setInterval(function () {
opacity--;
if (opacity <= 0) {
clearInterval(timeId);
}
my$("dv").style.opacity = opacity / 10;
}, 100);
};
</script>
</body>
案例：div变宽
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<input type="button" value="变宽" id="btn">
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick = function () {
var width = 200;
var timeId=setInterval(function () {
width++;
if(width>=400){
clearInterval(timeId);
}else{
my$("dv").style.width=width+"px";
}
},10)
};
</script>
</body>
案例：移动元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
input {
margin-top: 20px;
}
div {
margin-top: 30px;
width: 200px;
height: 100px;
background-color: pink;
position: absolute;
}
</style>
</head>
<body>
<input type="button" value="移动到400px" id="btn1">
<input type="button" value="移动到800px" id="btn2">
<div id="dv"></div>
<script>
function my$(id) {
return document.getElementById(id)
}
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 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>
//简单的轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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="data:images/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""/></a></li>
<li><a href="#"><img src="data: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>
//获取最外面的div
var box=my$("box");
//获取相框
var inner=box.children[0];
//获取相框的宽度
var imgWidth=inner.offsetWidth;
//获取ul
var ulObj=inner.children[0];
//获取所有的span标签
var spanObjs=inner.children[1].children;
//循环遍历所有的span标签,注册鼠标进入的事件
for(var i=0;i<spanObjs.length;i++){
//循环的时候把索引值保存在每个span的自定义属性中
spanObjs[i].setAttribute("index",i);
//注册鼠标进入事件
spanObjs[i].onmouseover=function () {
//先干掉所有的span的背景颜色
for(var j=0;j<spanObjs.length;j++){
//移除了每个span的类样式
spanObjs[j].removeAttribute("class");
}
//设置当前的span的背景颜色
this.className="current";
//移动ul(每个图片的宽*鼠标放在这个按钮的索引值)
//获取当前鼠标进入的span的索引
var index=this.getAttribute("index");
animate(ulObj,-index*imgWidth);
};
}
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
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>
//重要：animatea动画函数
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
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);
}
//案例：左右焦点轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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="data:images/01.jpg"/></li>
<li><img src="data:images/02.jpg"/></li>
<li><img src="data:images/03.jpg"/></li>
<li><img src="data:images/04.jpg"/></li>
<li><img src="data:images/05.jpg"/></li>
</ul>
</div><!--相框-->
<div id="focusD"><span id="left"><</span><span id="right">></span>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取相框
var ad = box.children[0];
//获取相框的宽度
var imgWidth = ad.offsetWidth;
//获取ul
var ulObj = ad.children[0];
//获取左右焦点的div
var focusD = my$("focusD");
//显示和隐藏左右焦点的div----为box注册事件
box.onmouseover = function () {
focusD.style.display = "block";
};
box.onmouseout = function () {
focusD.style.display = "none";
};
//点击右边按钮
var index=0;
my$("right").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);
//定时器的id值存储到对象的一个属性中
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>
//案例：无缝轮播图
<!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;
}
/*取消图片底部3像素距离*/
.box {
width: 300px;
height: 200px;
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="data:imagess/01.jpg" alt=""/></li>
<li><img src="data:imagess/02.jpg" alt=""/></li>
<li><img src="data:imagess/03.jpg" alt=""/></li>
<li><img src="data:imagess/04.jpg" alt=""/></li>
<li><img src="data:imagess/01.jpg" alt=""/></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, 20);
my$("screen").onmouseover=function () {
//停止
clearInterval(timeId);
};
my$("screen").onmouseout=function () {
//继续
timeId=setInterval(f1, 20);
};
</script>
</body>
</html>
//完整的轮播图
<!DOCTYPE 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="data:images/1.jpg" width="500" height="200"/></li>
<li><img src="data:images/2.jpg" width="500" height="200"/></li>
<li><img src="data:images/3.jpg" width="500" height="200"/></li>
<li><img src="data:images/4.jpg" width="500" height="200"/></li>
<li><img src="data: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>
//获取最外面的div
var box = my$("box");
//获取相框
var screen = box.children[0];
//获取相框的宽度
var imgWidth = screen.offsetWidth;
//获取ul
var ulObj = screen.children[0];
//获取ul中的所有的li
var list = ulObj.children;
//获取ol
var olObj = screen.children[1];
//焦点的div
var arr = my$("arr");
var pic = 0;//全局变量
//创建小按钮----根据ul中的li个数
for (var i = 0; i < list.length; i++) {
//创建li标签,加入到ol中
var liObj = document.createElement("li");
olObj.appendChild(liObj);
liObj.innerHTML = (i + 1);
//在每个ol中的li标签上添加一个自定义属性,存储索引值
liObj.setAttribute("index", i);
//注册鼠标进入事件
liObj.onmouseover = function () {
//先干掉所有的ol中的li的背景颜色
for (var j = 0; j < olObj.children.length; j++) {
olObj.children[j].removeAttribute("class");
}
//设置当前鼠标进来的li的背景颜色
this.className = "current";
//获取鼠标进入的li的当前索引值
pic = this.getAttribute("index");
//移动ul
animate(ulObj, -pic * imgWidth);
};
}
//设置ol中第一个li有背景颜色
olObj.children[0].className = "current";
//克隆一个ul中第一个li,加入到ul中的最后=====克隆
ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放
var timeId= setInterval(clickHandle,1000);
//鼠标进入到box的div显示左右焦点的div
box.onmouseover = function () {
arr.style.display = "block";
//鼠标进入废掉之前的定时器
clearInterval(timeId);
};
//鼠标离开到box的div隐藏左右焦点的div
box.onmouseout = function () {
arr.style.display = "none";
//鼠标离开自动播放
timeId= setInterval(clickHandle,1000);
};
//右边按钮
my$("right").onclick =clickHandle;
function clickHandle() {
//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,
//所以,如果用户再次点击按钮,用户应该看到第二个图片
if (pic == list.length - 1) {
//如何从第6个图,跳转到第一个图
pic = 0;//先设置pic=0
ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
}
pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
//如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
if (pic == list.length - 1) {
//第五个按钮颜色干掉
olObj.children[olObj.children.length - 1].className = "";
//第一个按钮颜色设置上
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");
}
//当前的pic索引对应的按钮设置颜色
olObj.children[pic].className = "current";
};
//设置任意的一个元素,移动到指定的目标位置
function animate(element, target) {
clearInterval(element.timeId);
//定时器的id值存储到对象的一个属性中
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";
}
}, 10);
}
</script>
<script>
// var num=0;
// function f1(){
//
// num=1000;
// }
// f1();
// console.log(num);
</script>
</body>
</html>
对象.cloneNode(true)
谁调用就克隆谁，将返回与对象一模一样的对象
2、三组属性
1）offset系列
在style标签内设置的样式属性无法获取
在style属性中设置的样式可以获取
若要获取，要用offset属性
.offsetWidth/offsetHeight//宽和高
offsetLeft/offsetTop//元素距离相应方向的距离
未脱离文档流时，自己元素的该属性值受父级元素的margin,border,padding属性影响,也受自己的margin属性影响。
脱离文档流时，仅和自己的margin与left属性有关，并且以父级元素为参照
2）直接通过docunment获取元素
docunment.l/body/title
依次获取的是标签，标签中的值
要获取html:
document.documentElement
//图片跟着鼠标飞案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="im" style="position: absolute;"/>
</body>
<script>
function my$(id) {
return document.getElementById(id)
}
//图片随着鼠标移动
document.onmousemove = function (e) {
my$("im").style.left = e.clientX + "px";//可视区域的横坐标
my$("im").style.top= e.clientY + "px";//可视区域的纵坐标
}
</script>
</body>