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 动态添加事件代码
Nov 30 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 Javascript
初学js 新节点的创建 删除 的步骤
Jul 04 Javascript
Textarea与懒惰渲染实现代码
Jan 04 Javascript
JavaScript全排列的六种算法 具体实现
Jun 29 Javascript
javascript使用call调用微信API
Dec 15 Javascript
原生JS取代一些JQuery方法的简单实现
Sep 20 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
Nov 30 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
Angular7创建项目、组件、服务以及服务的使用
Feb 19 Javascript
layer.alert自定义关闭回调事件的方法
Sep 27 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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超级全局变量数组小结
2012/10/04 PHP
php不允许用户提交空表单(php空值判断)
2013/11/12 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
js鼠标经过tab选项卡时实现切换延迟
2017/03/24 Javascript
vue组件如何被其他项目引用
2017/04/13 Javascript
js中的事件委托或是事件代理使用详解
2017/06/23 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
2020/02/16 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
2020/07/21 Javascript
python字符串,数值计算
2016/10/05 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python matlibplot绘制3D图形
2018/07/02 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Anconda环境下Vscode安装Python的方法详解
2020/03/29 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
女性时尚在线:IVRose
2019/02/23 全球购物
巴西葡萄酒商店:Divvino
2020/02/22 全球购物
办公室文秘自我鉴定
2013/09/21 职场文书
房地产员工找工作的自我评价
2013/11/15 职场文书
简历里的自我评价
2014/01/31 职场文书
关于环保的建议书
2014/05/12 职场文书
餐厅周年庆活动方案
2014/08/25 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年卫生监督工作总结
2015/05/21 职场文书
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技