定时器简介
1、setInterval()
（1）定时调用
（2）可以将一个函数，每隔一段时间执行一次
（3）参数：
参数1：回调函数，该函数会每个一段时间被调用一次
参数2：每次调用间隔的时间，单位是 毫秒。
（4）返回值
返回一个 Number 类型的数据，这个数字用来作为定时器的唯一标识。
2、clearInterval()
（1）可以用来关闭一个定时器
（2）方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器。
（3）可以接收任意参数。如果参数是一个有效的定时器的标识，则停止对应的定时器；如果参数不是一个有效的定时器的标识，则什么也不做。
window.onload = function () {
// 获取count
var count = document.getElementById("count");
var num = 1;
var timer = setInterval(function () {
count.innerHTML = num++;
if (num == 11) {
// 关闭定时器
clearInterval(timer);
}
}, 1000)
}
切换图片练习
每点击一次按钮，就会开启一个定时器，点击多次就会开启多个定时器，这就导致图片的切换速度过快，并且只能关闭最后一次开启的定时器。
所以，在开启一个定时器之前，需要将当前元素上的其他定时器关闭。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>切换图片练习</title>
<script>
window.onload = function () {
// 是图片可以自动切换
// 获取img1标签
var img1 = document.getElementById("img1");
//获取btn01
var btn01 = document.getElementById("btn01");
//获取btn02
var btn02 = document.getElementById("btn02");
var timer;
btn01.onclick = function () {
// 创建一个数组来保存图片的路径
var imgArr = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg"];
// 创建变量，保存当前图片的索引
var index = 0;
// 在开启一个定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(timer);
timer = setInterval(function () {
index++;
index %= imgArr.length
img1.src = imgArr[index];
}, 1000);
}
btn02.onclick = function () {
clearInterval(timer);
}
}
</script>
</head>
<body>
<img src="1.jpg" alt="千玺" id="img1">
<br>
<br>
<button id="btn01">开始</button>
<button id="btn02">结束</button>
</body>
</html>
修改div移动练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>修改div移动练习</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: rgb(12, 117, 236);
position: absolute;
}
</style>
<script type="text/javascript">
// 使div可以根据不同的方向键向不同的方向移动
window.onload = function () {
// 定义一个变量来表示移动的速度
var speed = 10;
//移动的方向
var dir = 0;
var timer;
timer = setInterval(function () {
// 37 左
// 38 上
// 39 右
// 40 下
switch (dir) {
case 37:
// 向左
box1.style.left = box1.offsetLeft - 10 - speed + "px";
break;
case 39:
// 向右
box1.style.left = box1.offsetLeft + 10 + speed + "px";
break;
case 38:
// 向上
box1.style.top = box1.offsetTop - 10 - speed + "px";
break;
case 40:
// 向下
box1.style.top = box1.offsetTop + 10 + speed + "px";
break;
}
}, 30);
document.onkeydown = function (event) {
event = event || window.event;
// 当用户按了ctrl以后，速度加快
if (event.ctrlKey) {
speed = 100;
} else {
speed = 10;
}
// 使dir等于按键的值
dir = event.keyCode;
}
// 当按键松开时，div不再移动
document.onkeyup = function () {
dir = 0;
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
延时调用
1、setTimeout()
（1）延时调用一个函数不马上执行，而是隔一段事件以后再执行，而且只会执行一次。
（2）延时调用和定时调用的区别，定时调用会执行很多次，而延时调用执行一次。
（3）延时调用和定时调用可以互相代替，在开发中可以根据需求自行选择。
2、clearTimeout()
（1）可以用来关闭一个延时调用
定时器的应用
制作简单动画
HTML文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定时器的应用2</title>
<style>
/* 清除默认样式 */
* {
margin: 0;
padding: 0;
}
#box1 {
width: 50px;
height: 50px;
background-color: rgb(38, 138, 196);
position: absolute;
/* 如果没有设置left，那么在IE中left的默认值为auto */
/* 为了避免出现auto这种情况，需要显示指定为0 */
left: 0;
}
#box2 {
width: 50px;
height: 50px;
background-color: rgb(196, 193, 38);
position: absolute;
/* 在IE中默认值为auto，所以需要显示 */
left: 0;
top: 200px;
}
</style>
<script type="text/javascript" src="javascript\move.js"></script>
<script type="text/javascript">
window.onload = function () {
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var btn01 = document.getElementById("btn01");
var btn02 = document.getElementById("btn02");
var btn03 = document.getElementById("btn03");
var btn04 = document.getElementById("btn04");
// var timer;
// 点击按钮以后，使box1向右移动（left值增大）
btn01.onclick = function () {
move(box1, "left", 800, 15);
}
btn02.onclick = function () {
move(box1, "left", 0, 10);
}
btn03.onclick = function () {
move(box2, "left", 800, 10);
}
btn04.onclick = function () {
move(box2, "width", 800, 10, function () {
move(box2, "height", 800, 10, function () {
move(box2, "width", 50, 10, function () {
move(box2, "height", 50, 10);
})
})
});
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后box1向右移动</button>
<button id="btn02">点击按钮以后box1向左移动</button>
<button id="btn03">点击按钮以后box2向右移动</button>
<button id="btn04">测试按钮</button>
<br><br>
<div id="box1"></div>
<div id="box2"></div>
<div style="width: 0; height: 1000px; border-left: 1px black solid; position: absolute; left: 800px; top: 0;"></div>
</body>
</html>
move.js 文件
// 尝试创建一个可以执行简单动画的函数
// 参数：
// obj：要执行动画的对象
// attr：要执行动画的样式，比如：left，top，width，height
// target：执行动画的目标位置
// speed：移动的速度(正数向右移动，负数向左移动)
// callback()：将在动画执行完毕以后执行
function move(obj, attr, target, speed, callback) {
// 每点击一次按钮就会开启一个定时器
// 在开启一个定时器之前，需要将当前元素上的其他定时器关闭
clearInterval(obj.timer);
// 获取元素目前的位置
//parseInt()：取出字符串中的合法数字
var current = parseInt(getStyle(obj, attr));
// 判断速度的正负值
// 如果从0到800移动，则speed为正
// 如果从800到0移动，则speed为负
if (current > target) {
speed = -speed;
}
// 开启一个定时器，用来执行动画效果
// 向执行动画的对象中添加一个 timer属性，用来保存自身的定时器的标识
obj.timer = setInterval(function () {
// 获取box1的原来的left值
// 利用parseInt()获取number类型的数值
var oldValue = parseInt(getStyle(obj, attr));
// 在旧值的基础上增加
var newValue = oldValue + speed;
// 向左移动时，需要判断newValue是否小于target
//向右移动时，需要判断newValue是否大于target
if ((speed > 0 && newValue > target) || (speed < 0 && newValue < target)) {
newValue = target;
}
// 将新值设置给box1
obj.style[attr] = newValue + "px";
// 当元素移动到800px是，使其停止执行动画
if (newValue == target) {
// 到达目标，关闭定时器
clearInterval(obj.timer);
// 动画执行完毕，如果有回调函数，则调用
callback && callback();
}
}, 30)
}
//定义一个函数，用来获取指定元素的当前的样式
// 参数：obj 要获取样式的元素 name 要获取的样式名
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 正常浏览器具有getComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
// IE8的方式，没有getComputedStyle()方法
return obj.currentStyle[name];
}
}
轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
/* 设置outer的样式 */
#outer {
width: 300px;
height: 499px;
/* 居中 */
margin: 50px auto;
background-color: rgb(3, 64, 92);
padding: 10px 0;
/* 父元素开启相对定位 */
position: relative;
/* 裁剪溢出的内容 */
overflow: hidden;
}
/* 设置imgList */
#imgList {
/* 去除项目的符号 */
list-style: none;
/* 设置ul的宽度 */
/* width: 1500px; */
/* 给子元素开启绝对定位的同时给父元素开启相对定位 */
position: absolute;
/* 设置偏移量 */
/* 每向左移动300px，就会显示下一张图片 */
left: 0px;
}
/* 设置图片的li */
#imgList li {
/* 设置浮动 */
float: left;
/* 设置左右外边距 */
margin: 0 10px;
}
/* 设置导航按钮 */
#navDiv {
/* 开启绝对定位 */
position: absolute;
/* 设置位置 */
bottom: 15px;
/* 设置left值 */
/* outer宽度 300 */
/* navDiv宽度：(15+5*2)*5=125 */
/* (300-125)/2 = 175/2 = 87.5 */
/* left: 87.5px; */
}
#navDiv a {
/* 设置超链接浮动 */
float: left;
/* 设置超链接的宽和高 */
width: 15px;
height: 15px;
/* 设置背景颜色 */
background-color: rgb(250, 7, 7);
/* 设置左右外边距 */
margin: 0 5px;
/* 设置透明 */
opacity: 0.5;
/* 兼容IE8透明 */
filter: alpha(opacity=50);
}
/* 设置鼠标移入的效果 */
#navDiv a:hover {
background-color: black;
}
</style>
<!-- 引入动画 move.js -->
<script type="text/javascript" src="D:\计算机学习\JavaScript\javascript\move.js"></script>
<script>
window.onload = function () {
// 定义一个自动切换定时器的标识
var timer;
// 获取imgList
var imgList = document.getElementById("imgList");
// 获取页面中所有的img标签
var imgArr = document.getElementsByTagName("img");
// 设置imgList的宽度
imgList.style.width = 300 * imgArr.length + "px";
// 设置导航按钮居中
// 获取navDiv
var navDiv = document.getElementById("navDiv");
// 获取outer
var outer = document.getElementById("outer");
// 设置navDiv的left值
navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth) / 2 + "px";
// 默认显示图片的索引
var index = 0;
// 获取所有的a
var allA = document.getElementsByTagName("a");
// 设置默认选中的效果
allA[index].style.backgroundColor = "black";
// 点击超链接切换到指定的图片
// 为所有的超链接绑定单击响应函数
for (var i = 0; i < allA.length; i++) {
// 为每一个超链接都添加一个num属性
// 将索引作为对象属性进行保存，类似于为每个对象贴上标签
allA[i].num = i;
allA[i].onclick = function () {
// 关闭自动切换的定时器
clearInterval(timer);
// 获取点击超链接的索引，并将其设置为index
index = this.num;
// 切换图片
// imgList.style.left = -300 * index + "px";
// 设置a的背景颜色
setA();
// 使用move函数来切换图片
move(imgList, "left", -300 * index, 20, function () {
// 动画执行完毕开启自动切换
autoChange();
})
}
}
// 自动切换图片
autoChange();
// 创建一个方法用来设置选中a
function setA() {
// 判断当前索引是否是最后一张图片
if (index >= imgArr.length - 1) {
// 则将index设置为0
index = 0;
// 此时显示的是最后一张图片，但是最后一张和第一张是一样的
// 通过CSS将最后一张切换成第一张
imgList.style.left = 0;
}
// 遍历所有a，并将他们的背景颜色设置为红色
for (var i = 0; i < allA.length; i++) {
// 设置为空串，可以将内联样式去掉
allA[i].style.backgroundColor = "";
}
// 将选中的a设置为黑色
allA[index].style.backgroundColor = "black";
}
// 创建一个函数，用来开启自动切换图片
function autoChange() {
// 开启一个定时器，用来定时切换图片
timer = setInterval(function () {
// 使索引自增
index++;
index %= imgArr.length;
// 执行动画，切换图片
move(imgList, "left", -300 * index, 20, function () {
// 修改导航按钮
setA();
})
}, 1500)
}
}
</script>
</head>
<body>
<!-- 创建一个外部的div，来作为大的容器 -->
<div id="outer">
<!-- 创建一个ul，用于放置图片 -->
<ul id="imgList">
<li><img src="1.jpg" alt="千玺"></li>
<li><img src="2.jpg" alt="千玺"></li>
<li><img src="3.jpg" alt="千玺"></li>
<li><img src="4.jpg" alt="千玺"></li>
<li><img src="5.jpg" alt="千玺"></li>
<li><img src="1.jpg" alt="千玺"></li>
</ul>
<!-- 创建导航按钮 -->
<div id="navDiv">
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
<a href="javascript:;"></a>
</div>
</div>
</body>
</html>
2500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
