方块在页面左右来回移动

最新推荐文章于 2021-10-07 10:05:26 发布

lyx_lyq

最新推荐文章于 2021-10-07 10:05:26 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/lyx_lyq/article/details/51090151

jQuery 专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
}
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<input type="button" value="移动" onclick="move()"/>
<div id="div1" style="" ></div>
<script>
var length=1;
function move(){
var div1=document.getElementById("div1");
if(isNaN(parseInt(div1.style.left)))
div1.style.left="1px";
else
div1.style.left=parseInt(div1.style.left)+length+"px";
if((parseInt(div1.style.left)+div1.offsetWidth>=document.body.offsetWidth)
|| parseInt(div1.style.left)<=0){
length*=-1;
}
setTimeout(move, 10);
}
</script>
</body>
</html>