<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>方块自动移动</title>
<style>
body {
margin: 0;
}
#box {
width: 100px;
height: 100px;
border: 1px solid rgb(83, 83, 83);
text-align: center;
line-height: 100px;
font-size: 18px;
border-radius:50px;
position: absolute;
top: 300px;
left: 100px;
}
</style>
</head>
<body>
<div id="box">
单击移动
</div>
<script>
var box = document.getElementById('box');
box.addEventListener('click', isMove);
//定义一个标识-标识时停止还是移动
var flag = false;//表示停止
var t;//定时器的表示
//判断当前方块的状态
function isMove() {
if (!flag) {//如果停止就移动
//将标识设置为true-表示移动
flag = true;
box.innerHTML = "单击停止"
move();
} else {//如果移动就停止
flag = false;
box.innerHTML = "单击移动"
stop();
}
}
//实现方块移动逻辑
function move() {
//1获取当前方块的left样式属性值
var style = window.getComputedStyle(box);
var left = parseInt(style.left);
//2增加left样式属性值
left++;
//3利用内联样式覆盖外联样式
box.style.left = left + 'px';
//设置定时器
t = setTimeout(move, 20);
}
//实现方块停止逻辑
function stop() {
clearTimeout(t)
}
</script>
</body>
</html>
11-13
487
487
09-21
257
257
11-15
1353
1353
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
