js-定时器应用--实现连续性的运动-向右

最新推荐文章于 2024-10-10 10:50:43 发布

¡Venceremo

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量210

点赞数

分类专栏： javascript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127539553

版权

javascript 专栏收录该内容

133 篇文章 0 订阅

订阅专栏

控制元素持续的向右运动，并运动到对应的位置停止

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#box1 {
				height: 100px;
				width: 100px;
				background-color: red;
				margin-top: 20px;
				position: absolute;
				/* 	IE没有指定值的时候容易获取auto 所以我们最好指定 */
				left: 0px;
			}
		</style>
		<script>
			window.onload = function() {
					// setTimeout()	
					// clearTimeout()
					//
					var btn01 = document.getElementById("btn01");
					var box1 = document.getElementById("box1");
					//保存定时器的标识
					var timer;
					btn01.onclick = function() {
						//希望开启的时候关闭前一个定时器
						//clearInterval(timer);
						var dir = parseInt(getStyle(box1, "left")); //获取原来的样式值
						//alert(dir)

						var timer = setInterval(function() {
								dir = dir + 17;
								if(dir>=600){
									dir=600;
								}
								box1.style.left = dir + "px";
								if (dir == 600) {//正好才会买组
									clearInterval(timer);
									}
									
								}, 30); 

						}
						//obj获取的元素 name 样式名
						function getStyle(obj, name) {
							if (window.getComputedStyle) {
								return getComputedStyle(obj, null)[name]; //正常 
							}
							return obj.currentStyle[name]; //IE8--
						}
					};
		</script>
	</head>
	<body>
		<button id="btn01">点击按钮以后box1向右移动</button>

		<div id="box1"></div>
		<div style="width: 0; height: 1000px; border-left: 1px solid black;: 1px black solid; position: absolute; left: 600px;"></div>
	</body>
</html>