js实现方块上下左右移动效果_js上下移动列表 - CSDN文库

147 浏览量更新于2023-05-11 1 收藏 28KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

js实现方块上下左右移动效果实现方块上下左右移动效果

主要为大家详细介绍了js实现方块上下左右移动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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);

}

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38534344

粉丝: 0
资源: 916

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈