点击按钮控制div前后运动——定时器应用

来源：互联网发布：mac 的破折号编辑：程序博客网时间：2024/06/16 12:46
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>点击按钮控制div前后运动——定时器应用</title><style>#div1{ width: 100px; height: 100px; background: #ccc; position: absolute; left: 30px; top: 50px;}</style></head><body><input type="button" id="btn1" value="向后" /><input type="button" id="btn2" value="向前" /><div id="div1"></div><script>// 封装获取非行间样式函数function getStyle(obj,attr){return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,false)[attr];};window.onload = function(){// 获取样式var oBtn1 = document.getElementById('btn1');var oBtn2 = document.getElementById('btn2');var oDiv = document.getElementById('div1');// alert(getStyle( oDiv, 'left' ));//测试getStyle函数// 向前运动oBtn2.onclick = function(){// 先清除定时器clearInterval(oDiv.timer);// 再开启定时器【这里是将timer作为oDiv的一个属性，避免再去它定义这个变量】oDiv.timer = setInterval(function(){// 获取div的距离 getStyle(oDiv,'left')获取到的是字符串，用parseInt转成整型var dis = parseInt(getStyle(oDiv,'left')) + 11;// 判断如果距离大于500，就把500赋给disif(dis > 500){dis = 500;}// 获取div距离左边的距离【每隔30毫秒，距离增加11】oDiv.style.left = dis + 'px';console.log(dis);//控制台输出距离变化// 如果距离左边的距离等于500，清除定时器if(dis == 500){clearInterval(oDiv.timer);}},30);};// 向后运动oBtn1.onclick = function(){// 先清除定时器clearInterval(oDiv.timer);// 再开启定时器【这里是将timer作为oDiv的一个属性，避免再去它定义这个变量】oDiv.timer = setInterval(function(){// 获取div距离左边的距离var dis = parseInt(getStyle(oDiv,'left')) - 11;// 判断如果距离小于10，就把10赋给disif(dis < 10){dis = 10;}// 获取div距离左边的距离【每隔30毫秒，距离减少11】oDiv.style.left = dis + 'px';console.log(dis); //控制台输出距离变化// 如果距离左边的距离等于10，清除定时器if(dis == 10){clearInterval(oDiv.timer);}},30);};};</script></body></html>
复制代码，本地运行查看效果
0 0