201-05-03 js中的动画效果

js动画—一个小球来回移动

< !DOCTYPE html>
< html>
< head>
< title>js动画< /title>在这里插入代码片
< meta charset=“utf-8”>
< style type=“text/css”>
*{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: purple;
}
< /style>
< /head>
< body>
< div id=“ball”>< /div>
< /body>
< script type=“text/javascript”>
//获取元素
var ball = document.getElementById(‘ball’);
//有一个确定需要修改的属性 margin=left
//确认当前要变化的属性的初始值并定义一个变量作为初始值
var num = 0;
//定一个方向
var der = 1;
//使用定时器
setInterval(function(){
if(num >= 500 || num < 0){
der *= -1;
}
num +=der;
//赋值
ball.style.marginLeft = num + ‘px’;
},10);

< /script>
< /html>