javascript 小方块平移
2024-10-12 06:19:57
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div class="box" style="width:100px; height:100px; background-color:red; position:absolute; top: 0; left: 0;">
<!--要移动的小盒子-->
</div>
<button style="position:absolute; top:200px;">
开始
</button> <script>
var div = document.getElementsByClassName("box")[0];//选择要移动的盒子
var btn = document.getElementsByTagName("button")[0]; var timer = null;
btn.onclick = function () {//在按钮上绑定点击事件，点击按钮，盒子开始移动
var speed = 5;
clearInterval(timer);//每次运行的时候，先把上一个定时器给停止了，不然同个时间段会执行多次，会导致速度越来越快 timer = setInterval(function () {//每次执行都会把唯一标识返回到timer 想要停止就得清除唯一标识 div.style.left = div.offsetLeft + speed + "px";
//获取当前盒子的 left 加上我们设置的速度 加上 px 再赋给 小盒子
}, 50)//每50毫秒执行一次
} </script>
</body> </html>
升级版
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head> <body>
<div class="box" style="width:100px; height:100px; background-color:red; position:absolute; top: 0; left: 1400px;">
<!-- Left设置小盒子在右边 -->
</div>
<button style="position:absolute; top:200px;">
开始
</button> <span style="position:absolute; left:700px; top:0; height:100px; width:0; border:1px solid black;"></span> <script>
var div = document.getElementsByClassName("box")[0];
var btn = document.getElementsByTagName("button")[0];
var span = document.getElementsByTagName('span')[0];
var timer = null; //定时器的唯一标识
btn.onclick = function () { UniformMotion(div, 700)
} function UniformMotion(dom , target){ //第一个参数，要运动的dom，第二个要停止的位置
var speed = target - dom.offsetLeft > 0 ? 7 : -7; //判断要运动的盒子在左边还是在右边 timer = setInterval(function () {
if (Math.abs(target - dom.offsetLeft) < Math.abs(speed)) {
clearInterval(timer);
dom.style.left = target + "px";
}else{
dom.style.left = dom.offsetLeft + speed + "px";
} }, 50)
}
</script>
</body> </html>
最新文章
- 长按TextField或TextView显示中文的粘贴复制
- android中xml tools属性详解
- Win8.1 安装Express 框架
- [GodLove]Wine93 Tarining Round #4
- 使用AsyncTask实现文件下载并且在状态中显示下载进度
- TortoiseGit 添加邮箱 失败保存配置
- Unicode : RLO
- POJ1222 高斯消元法解抑或方程
- android之硬件访问服务框架
- Lintcode--005（最长公共子序列）
- excel中自动变为插入语句的写法
- 从源码理解Spring原理，并用代码实现简易Spring框架
- [css 揭秘]：CSS揭秘 技巧（二）：多重边框
- 推荐学习git
- html中src与href的区别
- ThinkingInJava 学习 之 0000002 操作符
- [SCOI2010]字符串
- SecureFXPortable中文乱码
- redis_常见问题
- Google揭露SHA-1碰撞，加速数据重删字节对比