JaveScript 运动之缓冲运动

最新推荐文章于 2022-04-14 22:17:01 发布

----Neal----

最新推荐文章于 2022-04-14 22:17:01 发布

阅读量340

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/u014661569/article/details/45913551

版权

java 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

HTML 代码

<!DOCTYPE html>
<html>
<head>
<title>bufferSport.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../css/bufferSport.css">
<script type="text/javascript" src="../js/bufferSport.js"></script>
</head>
<body>
<input type="button" value="Start Run" id="btn">
<input type="button" value="Restore" id="btn2">
DIV1<input type="text" id="txtx">DIV2<input type="text" id="txty">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>

js代码

/**
Math.ceil() 向上取整
Math.floor() 向下取整
*/
window.onload = function(){
var btn1 = document.getElementById('btn');
var btn2 = document.getElementById('btn2');
var div1 = document.getElementById('div1');
var div3 = document.getElementById('div3');
var txtx = document.getElementById('txtx');
var tety =document.getElementById('txty');
var timer = null;
btn1.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var speed1 = (400-div1.offsetLeft)/40;
speed1 = speed1>0?Math.ceil(speed1):Math.floor(speed1);
div1.style.left = div1.offsetLeft+speed1+'px';
var speed2 = (250-div3.offsetLeft)/40;
speed2 = speed2>0?Math.ceil(speed2):Math.floor(speed2);
div3.style.left = div3.offsetLeft+speed2+'px';

txtx.value = div1.style.left;
txty.value = div3.style.left;
},20);
};
btn2.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
var speed1 = (0-div1.offsetLeft)/40;
speed1 = speed1>0?Math.ceil(speed1):Math.floor(speed1);
div1.style.left = div1.offsetLeft+speed1+'px';
var speed2 = (700-div3.offsetLeft)/40;
speed2 = speed2>0?Math.ceil(speed2):Math.floor(speed2);
div3.style.left = div3.offsetLeft+speed2+'px';

txtx.value = div1.style.left;
txty.value = div3.style.left;
},20);
};
}