JavaScript定时器管理开关设置,回调函数

最新推荐文章于 2024-07-15 16:14:38 发布

Lvdon9

最新推荐文章于 2024-07-15 16:14:38 发布

阅读量595

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37995109/article/details/85802845

版权

JavaScript 专栏收录该内容

106 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>无标题文档</title>
		<style>
			#div1 {
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top: 50px;
				left: 30px;
			}
		</style>
		<script src="js/miaov.js"></script>
		<script>
		</script>
	</head>

	<body>
		<input id='btn1' type="button" value="往前" />
		<input id='btn2' type="button" value="往后" />
		<div id="div1"></div>
	</body>
	<script>
		var oBtn1 = document.getElementById('btn1');
		var oBtn2 = document.getElementById('btn2');
		var oDiv = document.getElementById('div1');
		oDiv.timer = null;
		oBtn2.onclick = function() {
			doMove(oDiv,'left',12,800);
			
		}

		oBtn1 .onclick = function() {
			doMove(oDiv,'left',-12,10);
		}
		//有可能给你传回调函数有可能不传
		function doMove(obj,attr,dir,target,endFn){
			clearInterval(obj.timer);
			//alert(getStyle(oDiv,'left'));
			obj.timer = setInterval(function() {
				var speed = parseInt(getStyle(obj, attr))+dir
				if(speed>target&&dir>0 ||speed<target&&dir<0){
					speed=target;
				}
				obj.style[attr] = speed + 'px';
				if(speed==target){
					clearInterval(obj.timer);
				}
				if(endFn){
					endFn();
				}
			}, 30)
		}
		//获取谁  样式名称
		function getStyle(obj, attr) {
			//如果认识                                //IE6.7.8
			return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]
		}
		
		
		//点击按钮， 直着走， 然后走到头，拐弯--回调函数
		doMove(oDiv,'left',12,900,function(){
			doMove(oDiv,'top',12,900);
		});
	</script>

</html>

Lvdon9

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript定时器管理开关设置,回调函数

&lt;!DOCTYPE HTML&gt;&lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫

专栏目录