html让方块往下移动,JS控制方块自动移动

通过JS的setTimeout事件来控制一个小方块绕屏幕移动：

function autoMoveBox()

{

//debugger;

var windowHeight = window.innerHeight;

var windowWidth = window.innerWidth;

var box = document.getElementById("square");

var boxWidth = parseInt(box.style.width);

var boxHeight = parseInt(box.style.height);

var boxTop = parseInt(box.style.top);

var boxLeft = parseInt(box.style.left);

var size = 10;

//左上角，开始右移

if( (boxTop-boxHeight<=0) && (boxLeft+boxWidth)

{

box.style.left = boxLeft + size + "px";

}

else if((boxTop+boxHeight=windowWidth)

{

//右上角，开始下移

box.style.top = boxTop + size + "px";

}

else if((boxTop+boxHeight)>=windowHeight && (boxLeft- boxWidth)>0)

{

//右下角，开始左移

box.style.left = boxLeft - size + "px";

}

else if((boxTop-boxHeight)>=0 && (boxLeft-boxWidth)<=0)

{

//左下角，开始上移

box.style.top = boxTop - size + "px";

}

setTimeout('autoMoveBox()',50);

}

html让方块往下移动,JS控制方块自动移动相关推荐

JS控制方块自动移动
通过JS的setTimeout事件来控制一个小方块绕屏幕移动: <html> <style type="text/css"></style>&l ...
JS实战之使用键盘方向键控制方块的上下左右移动
使用键盘方向键控制方块的上下左右运动 <!DOCTYPE html> <html> <head><meta charset="UTF-8" ...
JS控制下的双层Tab切换
如题,JS控制下的双层Tab切换,其实只要想通了原理,实现起来很简单! <style type="text/css"> img{border:none;padding: ...
回归前端学习第23天-实现俄罗斯方块小游戏6（实现单机版2——键盘控制方块移动）
界面出现对应方块后,可自行控制其左右或快速下降的移动,上键可以实现方块形状的改变调整代码结构实现键盘控制方块移动 game.js中代码注意这里在SquareFactory中又写了个make函数, ...
.net 2.0 点击按钮用js控制是否回发关于vs2005的webproject补丁
.net 2.0 点击按钮用js控制是否回发点击按钮,对用户输入进行判断,如果用户输入的没有问题,就提交,反之就不能提交,这个可以用下面的js函数来完成 function check() { if( ...
frameset ajax,js控制frameSet示例
js控制frameSet示例 1:js修改frameset的cols属性来达到修改各个页面所占的宽高,例如隐藏当前frame页. 复制代码代码如下: window.parent.document.g ...
html滚动条自动下拉,[JS] jquery实现div随滚动条下拉浮动功能
1.简介 div浮动,当滚动条下拉时,将div浮动到固定位置上. 2.实现引用jquery.js略 1.html div加id="float".如浮动内容 2.css 样式.d ...
three.js使用OrbitControls.js控制几何体旋转、平移、缩放
附带一个可用的OrbitControls.js http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js ...
js控制网页动态效果
目录实现效果技术点导航文字高亮实现左侧菜单栏实现倒计时实现轮播图实现点击小圆点,高亮,图片跟随切换图自动播放小圆点冲突问题鼠标经过与离开效果实现实现效果前提:都必须用js来实现 ...
JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
JS常用正则表达式和JS控制输入框输入限制(数字.汉字.字符) 验证数字:^[0-9]*$ 验证n位的数字:^\d{n}$ 验证至少n位数 ...

html让方块往下移动,JS控制方块自动移动

html让方块往下移动,JS控制方块自动移动相关推荐

最新文章

热门文章