编程 Javascript

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

Posted in Javascript onAugust 17, 2017

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

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

- Author -

蒲小若

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery中ajax学习笔记3

Oct 16 Javascript

javascript实现跳转菜单的具体方法

Jul 05 Javascript

jQuery 回车事件enter使用示例

Feb 18 Javascript

SWFObject基本用法实例分析

Jul 20 Javascript

详解AngularJS过滤器的使用

Mar 11 Javascript

使用postMesssage()实现iframe跨域页面间的信息传递

Mar 29 Javascript

使用Script元素发送JSONP请求的方法

Jun 12 Javascript

jQuery简单获取DIV和A标签元素位置的方法

Feb 07 Javascript

React学习笔记之事件处理（二）

Jul 02 Javascript

详解用webpack的CommonsChunkPlugin提取公共代码的3种方式

Nov 09 Javascript

在Vue环境下利用worker运行interval计时器的步骤

Aug 01 Javascript

node.js域名解析实现方法详解

Nov 05 Javascript

JavaScript中一些特殊的字符运算

Aug 17 #Javascript

在 Angular 中使用Chart.js 和 ng2-charts的示例代码

Aug 17 #Javascript

JS 中LocalStorage和SessionStorage的使用

Aug 17 #Javascript

jQuery的时间datetime控件在AngularJs中的使用实例(分享)

Aug 17 #jQuery

详解JS中的柯里化(currying)

Aug 17 #Javascript

JavaScript实现简单评论功能

Aug 17 #Javascript

vue绑定class与行间样式style详解

Aug 16 #Javascript