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 相关文章推荐
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jquery实现非叠加式的搜索框提示效果
Jan 07 Javascript
Javascript模拟加速运动与减速运动代码分享
Dec 11 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
微信小程序  简单实例(阅读器)的实例开发
Sep 29 Javascript
浅谈Node.js:理解stream
Dec 08 Javascript
Vue2.5通过json文件读取数据的方法
Feb 27 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
如何在vue里添加好看的lottie动画
Aug 02 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
JavaScript迭代器的含义及用法
Jun 21 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
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
event对象的方法 兼容多浏览器
2009/06/27 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
2016/04/11 Javascript
JS判断日期格式是否合法的简单实例
2016/07/11 Javascript
微信小程序 在Chrome浏览器上运行以及WebStorm的使用
2016/09/27 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
JS实现图片旋转动画效果封装与使用示例
2018/07/09 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
element-ui 文件上传修改文件名的方法示例
2019/11/05 Javascript
jQuery实现验证用户登录
2019/12/10 jQuery
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
[01:02:48]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 LGD vs OG
2018/04/02 DOTA
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python实现简单字典树的方法
2016/04/29 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
TensorFlow2.1.0安装过程中setuptools、wrapt等相关错误指南
2020/04/08 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
美国一家专业的太阳镜网上零售商:Solstice太阳镜
2016/07/25 全球购物
Sunglasses Shop瑞典:欧洲领先的太阳镜网上商店
2018/04/22 全球购物
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
计算机系本科生求职信
2014/05/31 职场文书
护士工作失误检讨书
2014/09/14 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
幼儿教师三分钟演讲稿
2019/06/21 职场文书
总结高并发下Nginx性能如何优化
2021/11/01 Servers
php去除deprecated的实例方法
2021/11/17 PHP
基于Python实现将列表数据生成折线图
2022/03/23 Python
MySQL 字符集 character
2022/05/04 MySQL