0

I want the red box to be enlarged and then shrinked ,but the code underneath just makes it enlarge , please help me !!!!!

//calling the function in window.onload to make sure the HTML is loaded window.onload = function() { /* h and w are counters of height and width , and i set them all 0*/ var h = 0; var w = 0; var box = document.getElementById('box'); /* i'm trying to repeat function zoom every 10 milisecs */ var t = setInterval(zoom, 10); function zoom() { /* if h >=200 and w >= 200 , the function zoom will be stopped */ if(h >= 200 && w >=200) { clearInterval(t); } else { /* else height and width will increase and the output makes you fell like it is enlarging */ h += 5 ; w += 5 ; box.style.height = h; box.style.width = w; } } }; /* The code above only makes the red box enlarge , you know */ /* SO THE POINT IS HOW TO MAKE THE RED BOX SHRINK WHENEVER h =200 and w =200 */

28th Feb 2017, 1:54 PM
Thành Long
Thành Long - avatar
4 Antworten
+ 3
define an increment and change its sign (multiplying it by -1) every time the height equals the maximum or the minimum size. add the increment to height all the time. I left you an example in your future post. GREAT SCOTT!!!!
28th Feb 2017, 6:48 PM
seamiki
seamiki - avatar
+ 1
just write a new function named shrink, and call it just after clearInterval. function shrink will contain h-=5; w-=5;
28th Feb 2017, 3:03 PM
Arbaz Alam
Arbaz Alam - avatar
0
but in many code , the "t(setInterval)" is a loop which help my function zoom repeat every 100milisecs,if I use clearInterval then use function shrink , h and w only decrease 5 for 1 time because the loop has just been canceled
28th Feb 2017, 3:15 PM
Thành Long
Thành Long - avatar
0
but in my code , the "t(setInterval)" is a loop which help my function zoom repeat every 100milisecs,if I use clearInterval then use function shrink , h and w only decrease 5 for 1 time because the loop has just been canceled
28th Feb 2017, 3:15 PM
Thành Long
Thành Long - avatar