84669 人が学習中
152542 人が学習中
20005 人が学習中
5487 人が学習中
7821 人が学習中
359900 人が学習中
3350 人が学習中
180660 人が学習中
48569 人が学習中
18603 人が学習中
40936 人が学習中
1549 人が学習中
1183 人が学習中
32909 人が学習中
闭关修行中......
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>toggle</title> <script type="text/javascript"> window.onload = function(){ var x,y,speed,ar1,y1,s,yh,timer,animationRunning=false; x = document.getElementById('bt'); y = document.getElementById('co'); s = function(ar1,y1,yh){ if(animationRunning){ return; } clearInterval(timer); var target=((ar1===-1)?0:yh); timer = setInterval(function(){ animationRunning=true; if(y1.offsetHeight<5){ speed= Math.ceil((target-5)/5); }else{ speed = Math.ceil((target-y1.offsetHeight)/5); } if(y1.offsetHeight===target){ animationRunning=false; clearInterval(timer); return; } y1.style.height = y1.offsetHeight + speed + "px"; },20) }; x.onclick = function(){ if(y.offsetHeight===0){ s(1,y,400); }else{ s(-1,y,400) } } } function test(e,number){ console.log(number); } </script> </head> <body> <button type="button" id="bt">Event</button> <p id="co" style="background-color:red;width:200px;height:0;"> </p> <input name="sdf" onkeyup="return test(this,value);"/> </body> </html>
那就不要直接判断相等
y1.offsetHeight>yh
window.onload = function(){ var x,y,speed,ar1,y1,s,yh,timer; x = document.getElementById('bt'); y = document.getElementById('co'); s = function(ar1,y1,yh){ clearInterval(timer); timer = setInterval(function(){ speed = ar1*(yh-y1.offsetHeight)/5;(这里做下处理,当速度小于某值的时候等于某值) speed = speed?Math.ceil(speed):Math.floor(speed); if (y1.offsetHeight===yh){ console.log(y1.offsetHeight) clearInterval(timer); }else{ y1.style.height = y1.offsetHeight + speed + "px"; } },20) } x.onclick = function(){ if(y.offsetHeight < 5){ s(1,y,400); }else{ s(1,y,0) //改个传参就行了 } } }
window.onload = function() { var x, y, speed, ar1, y1, s, yh, timer; x = document.getElementById('bt'); y = document.getElementById('co'); s = function(ar1, y1, yh) { clearInterval(timer); timer = setInterval(function() { speed = ar1 * (yh - y1.offsetHeight) / 5; console.log(speed); speed = speed ? Math.ceil(speed) : Math.floor(speed); console.log(speed); speed == -0 ? speed = -(y1.offsetHeight) : ''; //当speed减少为-0的时候,直接变成p高度使p减少为0。否则无法取消定时器。 if (y1.offsetHeight === yh) { clearInterval(timer); } else { y1.style.height = y1.offsetHeight + speed + "px"; } }, 20) } x.onclick = function() { if (y.offsetHeight < 5) { s(1, y, 500); } else { s(1, y, 0) } } }
那就不要直接判断相等