定时器的管理；
<!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>
</head>
<body>
<input id="btn1" type="button" value="往后" />
<input id="btn2" type="button" value="往前" />
<div id="div1"></div>
<script>
var oBtn1 = document.getElementById(‘btn1‘);
var oBtn2 = document.getElementById(‘btn2‘);
var oDiv = document.getElementById(‘div1‘);
oBtn1.onclick = function () {
clearInterval( oDiv.timer );
oDiv.timer = setInterval(function () {
var speed = parseInt(getStyle( oDiv, ‘left‘ )) + -12; // 步长
if ( speed < 10 ) {
speed = 10;
}
oDiv.style.left = speed + ‘px‘;
if ( speed == 10 ) {
clearInterval( oDiv.timer );
}
}, 30);
};
oBtn2.onclick = function () {
clearInterval( oDiv.timer );
oDiv.timer = setInterval(function () {
var speed = parseInt(getStyle( oDiv, ‘left‘ )) + 12; // 步长
if ( speed > 800 ) {
speed = 800;
}
oDiv.style.left = speed + ‘px‘;
if ( speed == 800 ) {
clearInterval( oDiv.timer );
}
}, 30);
};
function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; }
</script>
</body>
</html>
时间： 2024-10-06 12:34:34