js实现方块上下左右移动效果

2019-11-19 15:46:11

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了js实现方块移动的具体代码，供大家参考，具体内容如下

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title></title>     <style type="text/css">       #box{         width: 50px;         height: 50px;         position: absolute;         background: palevioletred;       }     </style>   </head>   <body>     <div id="box" style = "left: 0; top: 50px;"></div>     <button id = "btn">stop</button>   </body>   <script type="text/javascript">     var speed = 10;     var flag = true;     var interId;          function moveLeft(){       var oldLeft = parseInt(box.style.left);        if(oldLeft >= window.innerWidth-50 || oldLeft < 0){         speed *= -1;       }       box.style.left = oldLeft + speed + "px";       }          function moveTop(){       var oldTop = parseInt(box.style.top);        if(oldTop >= window.innerHeight-50 || oldTop < 0){         speed *= -1;       }       box.style.top = oldTop + speed + "px";      }          function onOff(rand){ //     var rand = random();       if (flag) {         btn.innerHTML = "start";         clearInterval(interId);         flag = false;       } else{         btn.innerHTML = "stop";         if (rand == 1) {           interId = setInterval("moveLeft()",50); //         flag = true;         } else{           interId = setInterval("moveTop()",50); //         flag = true;         }                 flag = true;       }     }          btn.onclick =onOff;          //产生一个1-2的随机数     function random(){       rand = parseInt(Math.random() * 2 + 1);       alert(rand);        if (rand == 1) {         interId = setInterval("moveLeft()",50);       } else{         interId = setInterval("moveTop()",50);       }     }          random();        </script> </html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Canvas放置反弹效果随机图形(实例)

下一篇：JavaScript中一些特殊的字符运算