本文介绍了JavaScript新手在学习setInterval和clearInterval时遇到的问题，即clearInterval无法停止元素的移动。代码示例中展示了如何创建一个红色DIV的循环移动效果，并尝试通过stop()函数调用clearInterval来暂停移动，但效果不理想。问题可能在于clearInterval的使用时机不正确。
js自学小白，最近学习到 setinterval() 和 clearinterval()方法。很好奇我的clearinterval()为啥不能够暂停它的转动。🙂；；；；
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body{
margin:0px;
padding:0px;
}
.rltvC{
height:800px;
width:800px;
position:relative;
}
.abslC{
height:100px;
width:100px;
background-color:red;
position:absolute;
}
.abslC1{
height:80px;
width:80px;
background-color:white;
position:absolute;
left:350px;
top:350px;
}
.abslC1 > button{
font-size:19px;
}
</style>
</head>
<body>
<div id="rltv" class="rltvC">
<div id="abslC" class="abslC">
</div>
</div>
<div class="abslC1">
<button type="button" onclick="moveleft()">转动这个红色的DIV</button>
<button type="button" onclick="stop()">停止这个红色的DIV</button>
</div>
</body>
<script>
function moveleft(){
var a = document.getElementById('abslC');
var pos = 0;
var pos2 = 0;
var pos3 = 700;
var pos4 = 700;
var id = setInterval(frame,0.1);
function frame(){
if(pos == 701){
clearInterval
}else{
if(pos < 700){
pos++;
a.style.left = pos + "px";
}else{
if(pos2 < 700){
pos2++;
a.style.top = pos2 + "px";
}else{
if(pos3 > 0){
pos3--;
a.style.left = pos3 + "px";
}else{
if(pos4 > 0){
pos4--;
a.style.top = pos4 + "px";
}else{
pos = 0;
pos2 = 0;
pos3 = 700;
pos4 = 700;
}
}
}
}
}
}
}
function stop(){
clearInterval(id);
}
</script>
</html> 现在比较晚了，自己先记录一下，之后再找问题。如果有前辈可以提醒一下也万分感谢。 /(ㄒoㄒ)/~~
扫一扫
762
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
