為什么我的關閉定時器不起效果
var timer=null;
function startMove(){
var divv=document.getElementById("div1");
setInterval(function(){
if (divv.offsetLeft==0) {
clearInterval(timer);
}else{
divv.style.left=divv.offsetLeft+10+'px';
}
},30)
}
1 回答
舉報
0/150
提交
取消
2017-02-24
function startMove() {
????????????var divv = document.getElementById("div1");
? ? ? ? ? ? clearInterval(timer);//最開始需要清空一下，否則以前執行會留有緩存
? ? ? ? ? ? timer = setInterval(function() { //指定timer的值，否則要怎么清空
? ? ? ? ? ? ? ? if (divv.offsetLeft == 0) {
? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? divv.style.left = divv.offsetLeft + 10 + 'px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
//如果這樣還是解決不了問題說明css有問題，是不是添加了border之類的屬性等等。
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>定時器</title>
? ? <style type="text/css">
? ? *{padding: 0;
? ? ?margin: 0}
? ? div {
? ? ? ? position: absolute;
? ? ? ? left: -200px;
? ? ? ? width: 400px;
? ? ? ? height: 50px;
? ? ? ? background: #59B24F;
? ? }
? ? </style>
? ? <script type="text/javascript">
? ? window.onload = function() {
? ? ? ? var divv = document.getElementById("div1");
? ? ? ? divv.onmouseover = function() {
? ? ? ? ? ? startMove();
? ? ? ? }
?? ? ? ?var timer = null;
? ? ? ? function startMove() {
? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? timer = setInterval(function() {
? ? ? ? ? ? ? ? if (divv.offsetLeft == 0) {
? ? ? ? ? ? ? ? ? ? clearInterval(timer);
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? divv.style.left = divv.offsetLeft + 1 + 'px';
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }, 30)
? ? ? ? }
? ? }
? ? </script>
</head>
<body>
? ? <div id="div1"></div>
</body>
</html>