setInterval与函数作用于

最新推荐文章于 2024-05-01 15:56:17 发布

qq_27891995

最新推荐文章于 2024-05-01 15:56:17 发布

阅读量283

点赞数

分类专栏： js基础文章标签： setInterval 函数作用域作用域

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

版权

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);
			};
		}
		function startMove(iTarget)
		{
			var timer=null;
			var oDiv=document.getElementById('div1');
			var speed=0;
			var opa=getComputedStyle(oDiv,false).opacity*100;
			clearInterval(timer);
			 var time1 = new Date().getTime();
			 timer= setInterval(function()
					{
						var time2 = new Date().getTime();
						console.log("setInterval执行的差值时间："+(time2-time1)+','+time1+','+time2+','+timer);
						var opa2=getComputedStyle(oDiv,false).opacity*100;
						console.log('speed:'+speed+','+'iTarget:'+iTarget+','+'opa:'+opa+','+'opa2:'+opa2);
						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;
						console.log('iTarget:'+iTarget+','+'speed:'+speed);
						opa+=speed;
						oDiv.style.opacity=opa/100;
						console.log(iTarget);
						var time3= new Date().getTime();
						console.log('time3:'+time3);
						console.log('--------------------------');
						}
					},30);
		}
	</script>
</head>
<body>
	<div id="div1"></div>
<input id="txt" style='width:600px' type="text" name="">

</body>
</html>

qq_27891995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setInterval与函数作用于

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;style type="text/css"&gt; #div1{ background: red; height: 10
复制链接

扫一扫

专栏目录