if语句有else与无else的区别

最新推荐文章于 2023-08-18 16:39:01 发布

转载最新推荐文章于 2023-08-18 16:39:01 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yuehenying/p/6640950.html

本文介绍了一个简单的JavaScript动画案例，通过鼠标悬停事件控制一个红色方块从左侧移动到可见区域的过程。利用定时器逐步调整元素的位置，实现了平滑的速度动画效果。

<!DOCTYPE html>
<head>
	<title>js速度动画</title>
	<meta charset="utf-8">
<style>
	*{
		margin:0px;
		padding:0px;
	}
	#div1{
		width:200px;
		height:200px;
		background-color:red;
		position:relative;
		left:-200px;
	}
	#div1 span{
		width:20px;
		height:50px;
		position:absolute;
		left:200px;
		top:75px;
		background-color:blue;
	}
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseover = function(){
		startMove();
	}
}
var timer = null;
function startMove(){
	clearInterval(timer);
	var oDiv = document.getElementById('div1');
	timer = setInterval(function(){
		if(oDiv.offsetLeft == 0){
			clearInterval(timer);
		}else{
			oDiv.style.left = oDiv.offsetLeft+1+'px';
		}	
	},30)
}
</script>
</head>
<body>
	<div id="div1">
		<span id="share">分享</span>
	</div>
</body>
</html>

　　有else的时候，进入哪个语句的判断会同时进行，因此方块会在left为0时停下。而当无else的时候，即使left为0取消了定时器，下面位置改变依然会执行

转载于:https://www.cnblogs.com/yuehenying/p/6640950.html