<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js匀速运动</title>
<style type="text/css">
body,div,span,ul{
margin: 0;
padding: 0;
}
#yundong{
background-color: pink;
width: 300px;
height: 300px;
position: absolute;
left:-300px;
}
#yundong span{
position: absolute;
left: 300px;
margin-top: 135px;
background-color:#93ec62;
height: 60px;
width: 30px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="yundong">
<span>匀速运动</span>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var oRun=document.getElementById("yundong");
oRun.onclick=function(e){
startmove();
e.stopPropagation();
}
document.onclick=function(){
removeit()
}
}
var timer=null;
function startmove(){
clearInterval(timer);
var oRun=document.getElementById("yundong");
timer=setInterval(function()
{
console.log(0);
if(oRun.offsetLeft==0)
{clearInterval(timer);}
else
{oRun.style.left=oRun.offsetLeft+10+'px'}
},30);
}
var notimer=null;
var oRun=document.getElementById("yundong");
function removeit(){
clearInterval(notimer);
clearInterval(timer)
notimer=setInterval(function()
{
console.log(1);
if(oRun.offsetLeft==-300)
{clearInterval(notimer);}
else
{oRun.style.left=oRun.offsetLeft-10+'px'}
},30);
}
</script>
</html>js uniform motion
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325370396&siteId=291194637
Recommended
Ranking