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>

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

Javascript 相关文章推荐
jQuery MD5加密实现代码
Mar 15 Javascript
JS判断是否为数字,是否为整数,是否为浮点数的代码
Apr 24 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
从0开始学Vue
Oct 27 Javascript
jquery获取easyui日期控件的值实现方法
Nov 09 Javascript
Node.js实现连接mysql数据库功能示例
Sep 15 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
十分钟教你上手ES2020新特性
Feb 12 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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
You might like
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
input的focus方法使用
2010/03/13 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
2016/08/18 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
[44:58]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第二场
2018/04/06 DOTA
[49:08]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
python 自动去除空行的实例
2018/07/24 Python
python保存文件方法小结
2018/07/27 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python基于plotly模块实现的画图操作示例
2019/01/23 Python
python实现祝福弹窗效果
2019/04/07 Python
python3中property使用方法详解
2019/04/23 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
python实现数字炸弹游戏程序
2020/07/17 Python
Python爬取微信小程序Charles实现过程图解
2020/09/29 Python
详解Python+Selenium+ChromeDriver的配置和问题解决
2021/01/19 Python
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
体育教育专业自荐信范文
2013/12/20 职场文书
酒店出纳岗位职责
2013/12/29 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
市场营销方案范文
2014/03/11 职场文书
霸气队列口号
2014/06/18 职场文书
2014年应急管理工作总结
2014/11/26 职场文书
嘉宾邀请函
2015/01/31 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android