js基础_82、定时器练习
第一个练习自动切换图片
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#img1{
width:200px;
height: 200px;
}
</style>
<script>
//图片路径的数组
var imgs=["img/312507.jpg","img/323939.jpg","img/323960.jpg","img/324955.jpg","img/aaa.jpg",]
window.onload=function(){
var btn1=document.getElementById("begin");
var btn2=document.getElementById("stop");
var img1=document.getElementById("img1");
//当前图片的索引
var index=1;
//计时器的标识
var trimer="";
//按钮单击事件
btn1.onclick=function(){
/*
* 目前，我们每点击一次按钮，就会开启一个定时器，
* 点击多次就会开启多个定时器，并且单击多次时这里每次都把每个计时器的唯一标识重新赋值
* 给变量trimer，导致前面的计时器的唯一标识被覆盖了，第一个计时器的唯一标识一般为1，
* 后面的计时器为2。。。依次递增。所以开启了多个定时器，就导致了一直点击开始按钮会让图片的
* 切换速度变快，因为有多个定时器同时执行 ，并且暂停按钮只能清除最后一次开启的定时器，前面开启
* 的计时器就清除不了了。
* 所以，在开启定时器之前，需要将当前元素上的其它定时器清除
*/
//每次开启定时器前先清除上一次的定时器
clearInterval(trimer);
//开启计时器
trimer=setInterval(function(){
index=index%imgs.length;
img1.src=imgs[index];
index++;
},1000);
console.log(trimer);
};
btn2.onclick=function(){
//清除计时器
clearInterval(trimer);
};
}
</script>
</head>
<body>
<img id="img1" src="img/312507.jpg"/>
<input type="button" value="开始" id="begin" />
<input type="button" value="暂停" id="stop" />
</body>
</html>
在上面这个练习中
目前，我们每点击一次按钮，就会开启一个定时器， 点击多次就会开启多个定时器，并且单击多次时这里每次都把每个计时器的唯一标识重新赋值给变量trimer，导致前面的计时器的唯一标识被覆盖了，第一个计时器的唯一标识一般为1，后面的计时器为2。。。依次递增。所以开启了多个定时器，就导致了一直点击开始按钮会让图片的切换速度变快，因为有多个定时器同时执行 ，并且暂停按钮只能清除最后一次开启的定时器，前面开启的计时器就清除不了了。所以，在开启定时器之前，需要将当前元素上的其它定时器清除。
解决方向键移动div第一下卡顿的问题（解决误触行为)
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: aqua;
position: absolute;
}
</style>
<script>
window.onload=function(){
//38:上，40下，37左 39右
//dir表示当时键盘按下的是哪个键
var dir=0;
var box1=document.getElementById("box1");
//定义一个变量speed，用来存移动的速度
var speed=10;
var tirmer=setInterval(function(){
switch (dir){
case 38:
box1.style.top=box1.offsetTop-speed+"px";
break;
case 40:
box1.style.top=box1.offsetTop+speed+"px";
break;
case 37:
box1.style.left=box1.offsetLeft-speed+"px";
break;
case 39:
box1.style.left=box1.offsetLeft+speed+"px";
break;
}
},30)
document.onkeydown=function(event){
event=event||window.event;
if(event.ctrlKey){
speed=50;
}else{
//将速度恢复
speed=10;
}
//使dir的值等于按键的值。
dir=event.keyCode;
};
//当按键松开时，div不再移动
document.onkeyup=function(){
//取消移动
dir=0;
}
}
</script>
</head>
<body id="body">
<div id="box1">
按ctrl键可加速移动
</div>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构