<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js运动基础</title>
<style>
#div1{ width:200px; height:200px; background:yellow; position:absolute; top:50px; left:0;}
</style>
<script>
var timer=null;
function startMove()
{
var oDiv=document.getElementById('div1');
clearInterval(timer); //关闭之前开的定时器,防止定时器叠加速度逐渐变快,(如果没有关闭,在多次点击开始运动按钮,等同于同时开了多个定时器)
timer=setInterval(function ()
{
var speed=7; //当speed为 7,8,9....时运动到300处时,并不会停止,而是跳过继续运动
//if(oDiv.offsetLeft==300)
if(oDiv.offsetLeft>=300)
{
clearInterval(timer);
}
else
{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
</script>
</head>
<body>
<input type="button" id="btn" value="开始运动" οnclick="startMove()" />
<div id="div1"></div>
</body>
</html>
此次内容比较适合做运动导航,能够让网页显得更加美观,根据个人的设计让网页看起来更加新颖
js运动基础_完善版
最新推荐文章于 2018-11-21 09:24:49 发布