js运动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box" onclick="move()">
            盒子
        </div>
        <div id="">
            <button type="button" onclick="stopBoxMove()">停止</button>
        </div>
        <div id="">
            <button type="button" onclick="boxInit()">复位</button>
        </div>
        <div id="">
            <button type="button" onclick="boxReverse()">反向</button>
        </div>
        <div id="">
            <button type="button" onclick="boxRotate()">旋转</button>
        </div>
        

        <script type="text/javascript">
            var box = document.getElementById("box");
            box.style.left = '10px';
            box.style.top = '10px';
            box.style.position = 'relative';

            var reverseFlag = 0;
            var count = 1;

            var interval_1;

            function move() {
                interval_1 = setInterval(boxSite, 100);
            }


            function boxSite() {
                box.style.left = parseInt(box.style.left) + 10 + 'px';
                box.style.top = parseInt(box.style.top) + 10 + 'px';
            }
            
            function boxReverse() {
                stopBoxMove();
                interval_1 = setInterval(boxReverse1, 100);
            }
            
            function boxReverse1() {
                box.style.left = parseInt(box.style.left) - 10 + 'px';
                box.style.top = parseInt(box.style.top) - 10 + 'px';
            }

            function stopBoxMove() {
                clearInterval(interval_1);
            }

            function boxInit() {
                box.style.left = '10px';
                box.style.top = '10px';
            }
                
            function boxRotate(){
                stopBoxMove();
                interval_1 = setInterval(boxRotate1, 100);
            }    
                
            function boxRotate1(){
                
                console.log(count);
                console.log(reverseFlag);
                
                if (reverseFlag == 0) {
                    boxSite();
                }else{
                    boxReverse1();
                }
                count++;
                if(count == 5){
                    count = 0;        
                    if(reverseFlag == 0){
                        reverseFlag = 1;
                    }else{
                        reverseFlag = 0;
                    }
                            
                }
            }
        </script>

    </body>
</html>

 

posted @ 2022-05-12 11:04  qx和世界  阅读(38)  评论(0)    收藏  举报