定时器，setInterval

最新推荐文章于 2022-07-14 16:30:47 发布

qq_27891995

最新推荐文章于 2022-07-14 16:30:47 发布

阅读量149

点赞数

分类专栏： js基础文章标签：定时器 setInterval

本文链接：https://blog.csdn.net/qq_27891995/article/details/85157527

版权

js基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		#div1{
			background: red;
			height: 100px;
			width:100px;
			filter:alpha(opacity:30);
			opacity:0.3;
			-moz-opacity:0.3;
			-khtml-opacity:0.3;
		}
	</style>
	<script type="text/javascript">
		window.onload=function (){
			var oDiv=document.getElementById('div1');
		//alert(getComputedStyle(oDiv,false).opacity);
			oDiv.onmouseover=function ()
			{
				startMove(100);
			};
			oDiv.onmouseout=function ()
			{
				startMove(30);
			};
		}
		var i=0;
		function startMove(iTarget)
		{
			var timer=null;
			var oDiv=document.getElementById('div1');
			var speed=0;
			var opa=getComputedStyle(oDiv,false).opacity*100;
			clearInterval(timer);
			
			 timer= setInterval(function()
					{
						i++;
						console.log(i);
						var opa=getComputedStyle(oDiv,false).opacity*100;

						if(opa<iTarget){
							speed=10;	
						}else if(opa>iTarget){
							speed=-10;
						}
						 if(opa==iTarget){
							clearInterval(timer);
						}else{
							document.getElementById('txt').value='iTarget:'+iTarget+','+'speed:'+speed+','+'opa:'+opa+'timer'+timer;
						  // alert('iTarget:'+iTarget+','+'speed:'+speed+','+'opa:'+opa);
						opa+=speed;
						oDiv.style.opacity=opa/100;
						
						}
					},30);

		}
	</script>
</head>
<body>
	<div id="div1"></div>
<input id="txt" style='width:600px' type="text" name="">

</body>
</html>