JS push 到指定位置停止
677人浏览 2023-10-23 14:38:00
一、HTML
<div id="div1"></div>
<input id="btn1" type="button" value="开始移动" />
<div id="div2"></div>
二、CSS
*{margin: 0;padding: 0;}
#div1{
width: 100px;height: 90px;background: red;
position: absolute;left: 0;top: 50px;
}
#div2{
width: 1px;height: 200px;background: black;
position: absolute;left: 300px;top: 0;
}
三、javascript
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
var timer=null;
oBtn.onclick=function(){
clearInterval(timer);
timer=setInterval(function(){
if (oDiv.offsetLeft>=300) {
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+5+'px';
}
},30)
}
}
四、最终效果
相关推荐
-
用PHP读取Excel、CSV文件2025-04-05 00:55:03 -
php替换字符你知道么，基础之数据类型--字符串2025-04-05 00:52:06 -
mysql insert 有哪4种形态？2025-04-05 00:40:40 -
php架构之CGI、FastCGI、php-fpm有什么关系？原来这么简单
php架构之CGI、FastCGI、php-fpm有什么关系？原来这么简单2025-04-05 00:37:41 -
php中抽象类和接口的对比2025-04-05 00:24:27