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 相关文章推荐
js的event详解。
Sep 06 Javascript
基于jquery的拖动布局插件
Nov 25 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
详解vue2.0脚手架的webpack 配置文件分析
May 27 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
Mar 01 Javascript
小程序云开发实现数据库异步操作同步化
May 18 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中批量替换文件名的实现代码
2011/07/20 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
详解Laravel设置多态关系模型别名的方式
2019/10/17 PHP
JS 有名函数表达式全面解析
2010/03/19 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
Bootstrap插件全集
2016/07/18 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
浅析如何利用angular结合translate为项目实现国际化
2016/12/08 Javascript
AngularJS入门教程之路由机制ngRoute实例分析
2016/12/13 Javascript
Nodejs异步回调之异常处理实例分析
2018/06/22 NodeJs
JS+php后台实现文件上传功能详解
2019/03/02 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
Vue防止白屏添加首屏动画的实例
2019/10/31 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
原生js实现碰撞检测
2020/03/12 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
Vue自定义组件双向绑定实现原理及方法详解
2020/09/03 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python读写配置文件的方法
2015/06/03 Python
用Python实现数据的透视表的方法
2018/11/16 Python
详解python运行三种方式
2019/05/13 Python
对Python函数设计规范详解
2019/07/19 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
Html5 webview元素定位工具的实现
2020/08/07 HTML / CSS
德国咖啡批发商:Coffeefair
2019/08/26 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
实习教师自我鉴定
2013/12/09 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
欢迎领导检查标语
2014/06/27 职场文书
商业门面租房协议书
2014/11/25 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
小学教师师德师风承诺书
2015/04/28 职场文书