html代码
简单地设置一个宽100px,高100px,背景色为红色的div盒子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='box1'></div>
</body>
</html>
css代码
div{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 0;
}
js代码
window.onload = function(){
// 获取盒子标签
var box1 = document.getElementById('box1')
// div盒子的横坐标
var leftnum = 0;
// 标志盒子的移动方向:0向右移,1向左移
var flag = 0;
function myfunc2() {
// 当div盒子移到屏幕最右边时,设置flag为1使盒子向左移
if (leftnum>1150) {
flag = 1;
}
// 当div盒子移到屏幕最左边时,设置flag为0使盒子向右移
if (leftnum<5) {
flag = 0;
}
// 右移时横坐标加一
if (flag==0) {
leftnum += 1;
}
// 左移时横坐标减一
if (flag==1) {
leftnum -= 1;
}
// js设置div坐标
box1.style.left = leftnum + 'px';
}
// 定时器设置每2毫秒移动一次
setInterval(myfunc2,2)
}
效果展示