2
回答
JavaScript之定时器双击特效
注册华为云得mate10,2.9折抢先购!>>>   
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: orange; left: 0px; position: absolute;}
</style>

<script>

function css(obj,attr,val){

    if(!val){

        if(obj.currentStyle){
            
            return obj.currentStyle[attr];
            
        }else{
            
            return getComputedStyle(obj,false)[attr];
            
        }
    
    }else{
        
        obj.style[attr]=val;
        
    }

}    


window.onload=function(){

    var oDiv=document.getElementById('div1');
    var timer=null;
    
    oDiv.onclick=function(){
        timer=setInterval(function(){
            var iLeft=parseInt(css(oDiv,'left'))+10;
            css(oDiv,'left',iLeft+'px');
            clearInterval(timer);
        },500);    
    };    
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

双击“口子”会一直移动下去,双击时间间隔在设定了500毫秒内。

<无标签>
举报
共有2个答案 最后回答: 5年前

我帮你改了一下代码,主要是双击造成bug,定时器没有及时清除造成的。

你看看我给你改的代码:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>无标题文档</title> 
<style> 
#div1 {width: 100px; height: 100px; background: orange; left: 0px; position: absolute;} 
</style> 

<script> 

function css(obj,attr,val){ 

    if(!val){ 

        if(obj.currentStyle){ 
             
            return obj.currentStyle[attr]; 
             
        }else{ 
             
            return getComputedStyle(obj,false)[attr]; 
             
        } 
     
    }else{ 
         
        obj.style[attr]=val; 
         
    } 

}     


window.onload=function(){ 

    var oDiv=document.getElementById('div1'); 
    var timer=null; 
     
    oDiv.onclick=function(){ 
        clearInterval(timer); 
        timer=setInterval(function(){ 
            var iLeft=parseInt(css(oDiv,'left'))+10; 
            css(oDiv,'left',iLeft+'px'); 
            clearInterval(timer); 
        },500);     
    };  
}; 
</script> 
</head> 

<body> 
<div id="div1"></div> 
</body> 
</html>
--- 共有 1 条评论 ---
看世界之多彩哈哈,明白了 谢了~! 5年前 回复
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算 表达式
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
--- 共有 1 条评论 ---
看世界之多彩单击与双击出现不同效果,我不理解双击时的效果! 5年前 回复
顶部