脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现方块移动

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

 更新时间：2017年08月17日 09:11:02   作者：蒲小若  
这篇文章主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

 本文实例为大家分享了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/html光标定位的实现代码

    js/html光标定位的实现代码

    光标定位，想必大家有所了解吧，在本文将为大家介绍的是通过自定义函数来实现标签元素的定位，感兴趣的朋友可以了解下
    2013-09-09
  • 如何利用JS通过身份证号获取当事人的生日、年龄、性别

    如何利用JS通过身份证号获取当事人的生日、年龄、性别

    身份证可以识别一个人的信息，下面就介绍一下如何利用js通过身份证号码获取当事人的年龄和性别
    2016-01-01
  • 用JS实现根据当前时间随机生成流水号或者订单号

    用JS实现根据当前时间随机生成流水号或者订单号

    本文通过实例代码给大家介绍了基于JS实现根据当前时间随机生成流水号或者订单号的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2018-05-05
  • JavaScript运动原理基础知识详解

    JavaScript运动原理基础知识详解

    这篇文章主要介绍了JavaScript运动原理基础知识详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • JS实现的JSON数组去重算法示例

    JS实现的JSON数组去重算法示例

    这篇文章主要介绍了JS实现的JSON数组去重算法,结合实例形式分析了javascript针对json数组的遍历、判断实现去重复功能相关操作技巧,需要的朋友可以参考下
    2018-04-04
  • JS实现简单的点赞与踩功能示例

    JS实现简单的点赞与踩功能示例

    这篇文章主要介绍了JS实现简单的点赞与踩功能,涉及javascript针对页面元素动态操作相关实现技巧,需要的朋友可以参考下
    2018-12-12
  • js option删除代码集合

    js option删除代码集合

    javascript删除option选项的多种方法，方便大家选用。
    2008-11-11
  • 详细教你微信公众号正文页SVG交互开发技巧

    详细教你微信公众号正文页SVG交互开发技巧

    这篇文章主要介绍了详细教你微信公众号正文页SVG交互开发技巧，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • js与vue如何实现自动全屏显示效果

    js与vue如何实现自动全屏显示效果

    这篇文章主要给大家介绍了关于js与vue如何实现自动全屏显示效果的相关资料,在vue项目中做一个可以控制页面全屏展示的效果,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-12-12
  • JavaScript实现单图片上传并预览功能

    JavaScript实现单图片上传并预览功能

    这篇文章主要为大家详细介绍了JavaScript实现单图片上传并预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论