wordpress ping服务列表山西seo和网络推广
具体练习代码如下:
说明:以下代码实现了简单的使用按钮控制div,燃div左右移动,或者移动到固定的位置,以及在移动过程中暂停移动。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">#box{width: 100px;height: 100px;background-color: red;position: absolute;left: 0;}</style><script type="text/javascript">window.onload = function(){var btnr = document.getElementById("btnr");var btnl = document.getElementById("btnl");var box = document.getElementById("box");var timer;btnl.onclick = function(){clearInterval(timer);timer = setInterval(function(){//获取box原来的left值var oldVal = parseInt(getStyle(box,"left"));//在旧值的基础上增加var newVal = oldVal - 20;//将newVal赋值给box的对应样式box.style.left = newVal + "px";},50);};btnr.onclick = function(){clearInterval(timer);timer = setInterval(function(){//获取box原来的left值var oldVal = parseInt(getStyle(box,"left"));//在旧值的基础上增加var newVal = oldVal + 20;if(newVal > 500){newVal = 500;}//将newVal赋值给box的对应样式box.style.left = newVal + "px";//让div在移动到500px除停下if(newVal == 500){clearInterval(timer);}},50);};var btnz = document.getElementById("btnz");btnz.onclick = function(){clearInterval(timer);};//封装函数获取任意元素的任意样式,obj:元素名,name:样式名function getStyle(obj,name){if(window.getComputedStyle){return getComputedStyle(obj,null)[name];}else{return obj.currentStyle[name];}}};</script>
</head>
<body><button id="btnl">点击按钮让div往左移动</button><button id="btnr">点击按钮让div往右移动</button><button id="btnz">暂停移动</button><div id="box"></div>
</body>
</html>
如果以上内容对你有帮助,动动小手点个赞吧!