JS基础3—定时器-海口c网

JS基础3—定时器

article/2025/7/29 5:25:39

定时器目录

定时器
- 周期定时器
- 延迟定时器
定时器实践
- 转盘旋转动画
- 轮播图实现

定时器

周期定时器

setInterval() 每隔指定时间重复执行回调函数

const intervalId = setInterval(callback, interval, [arg1], [arg2], ...);

参数：

callback：要执行的函数
interval：执行间隔（毫秒）
arg1, arg2…（可选）：传递给回调函数的参数

清除定时器：

clearInterval(intervalId);

clearInterval() 停止，括号里面填定时器标志变量

延迟定时器

setTimeout() 在指定延迟（毫秒）后执行一次回调函数

const timerId = setTimeout(callback, delay, [arg1], [arg2], ...);

参数：

callback：要执行的函数
delay：延迟时间（毫秒），默认 0
arg1, arg2…（可选）：传递给回调函数的参数

清除定时器：

clearTimeout(timerId);

clearTimeout() 停止，括号里面填定时器标志变量

注意：
看以下代码和打印结果

在这里插入图片描述

总结：
change 表示取整块change 函数代码
change() 即取change函数最后的 返回值

定时器实践

转盘旋转动画

模拟转盘旋转动画

核心功能：

页面加载时：默认不启动动画，显示静态渐变背景
点击开始按钮：触发动画循环，使用requestAnimationFrame高效更新
动画过程：每帧将渐变角度增加1度
点击停止按钮：立即冻结当前渐变角度，取消动画循环

实现该效果代码文件

在这里插入图片描述

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./转盘旋转.js" defer></script><style>.container{margin-top: 30px;margin-left: 50px;width: 200px;height: 200px;background: linear-gradient(0deg, rgb(213, 132, 66), rgb(28, 225, 28), rgb(85, 85, 196));border-radius: 100px;}input{margin-top: 20px;margin-left: 70px;}</style>
</head>
<body><div class="container"></div><input type="button" value="开始" class="start"><input type="button" value="停止" class="stop"></body>
</html>

JavaScript 部分

var container = document.querySelector('.container')
var start = document.querySelector('.start')
var stop = document.querySelector('.stop')var i = 0
var flag = 1
var change = function () {container.style.background = "linear-gradient(" + i + "deg, rgb(213, 132, 66), rgb(28, 225, 28), rgb(85, 85, 196))"i++
}
var timer = setInterval(change, 10)
//停止
stop.onclick = function () {clearInterval(timer)flag = 0
}
//开始
start.onclick = function () {if (flag == 0) {timer = setInterval(change, 10)flag = 1}
}

轮播图实现

轮播图

核心功能

通过左右箭头按钮手动切换图片显示，底部页码指示器实时显示当前图片位置并支持点击跳转，自动轮播功能默认每4秒切换下一张图片；
同时提供智能交互控制，当用户鼠标悬停在轮播区域时会自动暂停轮播，离开后恢复自动播放；
当用户点击页码点时，系统会暂停自动轮播（让用户专注查看当前图片），之后自动恢复轮播，实现了流畅的图片切换效果与智能的用户体验平衡。

该效果代码文件

在这里插入图片描述

HTML部分

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./style.css"></link><script src="./slider.js" defer></script>
</head><body><div class="slider"><ul class="slider_box"><li><img src="./images/20180922180620_Awfrj.jpeg" alt=""></li></li><li><img src="./images/20200211155214_FPdrJ.jpeg" alt=""></li></li><li><img src="./images/20220211003224_4cfd2.jpg" alt=""></li></ul><ul class="btn_box"><li class="left"><</li><li class="right">></li></ul><ul class="page"><li index="1" class="current"></li><li index="2"></li><li index="3"></li></ul></div>
</body>
</html>

CSS部分

* {padding: 0;margin: 0;list-style: none;
}.slider {width: 800px;height: 480px;background-color: gold;margin: 100px auto;overflow: hidden;position: relative;
}.slider .slider_box {width: 2400px;height: 480px;background-color: purple;display: flex;position: absolute;left: -800px;
}.slider .slider_box li {width: 800px;height: 480px;background-color: skyblue;
}.slider .slider_box li img {width: 800px;height: 480px;object-fit: cover;
}.btn_box {position: absolute;top: 215px;width: 95%;left: 2.5%;display: flex;justify-content: space-between;
}.btn_box li {width: 50px;height: 50px;background-color: rgba(200, 200, 200, 0.5);border-radius: 25px;cursor: pointer;text-align: center;line-height: 50px;
}.btn_box li:hover {background-color: rgba(255, 255, 255, 0.8);
}/* 圆点 */
.page {position: absolute;bottom: 20px;width: 10%;left: 45%;display: flex;justify-content: space-evenly;align-items: center;
}.page li {width: 14px;height: 14px;background-color: rgba(200, 200, 200, 0.5);border-radius: 7px;cursor: pointer;
}.page li.current {background-color: rgba(255, 255, 255, 0.8);width: 15px;height: 15px;border-radius: 6.5px;
}

JavaScript

var ul = document.querySelector('.slider_box')
ul.style.left = "0px"//切换函数
var change = function (parameter) {var newOffset = parseInt(ul.style.left) + parameterif (newOffset < -1600) {newOffset = 0} else if (newOffset > 0) {newOffset = -1600}ul.style.left = newOffset + "px"
}var current_page = 1
var page_list = document.querySelectorAll(".page li")
//页码样式变换的函数
var highLight = function () {// 移除所有高亮for (var j = 0; j < page_list.length; j++) {page_list[j].className = "";}// 添加当前高亮page_list[current_page - 1].className = "current";
}//上一张图片
var left_btn = document.querySelector(".left")
left_btn.onclick = function () {change(800)//页码切换if (current_page == 1) {current_page = 3;} else {current_page--;}//样式切换highLight()
}//下一张图片
var right_btn = document.querySelector(".right")
right_btn.onclick = function () {change(-800)//页码切换if (current_page == 3) {current_page = 1;} else {current_page++;}//样式切换highLight()
}//自动播放
var timer = setInterval(right_btn.onclick, 4000)//停止轮播
var btn_lists = document.querySelectorAll(".btn_box li")
for (var i = 0; i < btn_lists.length; i++) {btn_lists[i].onmouseenter = function () {clearInterval(timer)}btn_lists[i].onmouseleave = function () {timer = setInterval(right_btn.onclick, 4000)}
}// 任意页码切换
for (var i = 0; i < page_list.length; i++) {page_list[i].onclick = function () {clearInterval(timer);var target_page = parseInt(this.getAttribute("index"))change((current_page - target_page) * 800)current_page = target_pagehighLight()timer = setInterval(right_btn.onclick, 4000);}
}