js 碰撞运动

浏览数：25 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>碰撞运动</title>
    <style>
        #div1
        {
            width:100px;
            height:100px;
            background:red;
            position:absolute;
        }
    </style>
    
    <script type="text/javascript">
        window.onload = function(){
            var oBtn = document.getElementById("btn");
            
            oBtn.onclick = function(){
                move();
            }
        
        }
        
    
        var timer = null;
        
        var speedX = 6;
        var speedY = 8;
        
        function move(){
            
            clearInterval(timer);
            
            timer = setInterval(function(){
                
                var oDiv = document.getElementById("div1");
                
                var l = oDiv.offsetLeft + speedX ;
                var t = oDiv.offsetTop + speedY;
                
                if(t >= document.documentElement.clientHeight-oDiv.offsetHeight)
                {
                    speedY*=-1;
                    t = document.documentElement.clientHeight - oDiv.offsetHeight;
                }
                else if(t<=0)
                {
                    speedY*=-1;
                    t=0;
                }
                
                if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
                {
                    speedX*=-1;
                    l = document.documentElement.clientWidth - oDiv.offsetWidth;
                }
                else if(l<=0)
                {
                    speedX*=-1;
                    l = 0;
                }
                
                oDiv.style.left = l+‘px‘;
                oDiv.style.top = t +‘px‘;

                
            },30);
        }
    </script>
</head>
<body>
   <input type="button" id="btn" value="运动" />
   <div id="div1">
    </div>
    <span style="width:1px;height:300px;background:black;left:300px"></span>
</body>
</html>