我想阻止我的div移动

Question

I have a code which causes the waterlevel in a bottle to go up or down by clicking a button. however, it can't stop without clicking on stop. I need it to basically reset when it empties, and that the div of the waterlevel doesn't go below a certain point (or above a certain point). If you're interested in what I'm making; I'm making an alcohol simulator. So you'll basically see the waterlevel of an alcohol drink going down (ie 100 px), and 100 px down means that you can see the waterlevel(alcogol level) in the stomach with ie 50 px, and that equals 20 px in the blood circulation and 10 px in the brains. (just to get an idea.)

But if I click on the button of going down, the div will just leave the bottle and will have an endless journey. (js please, not jquery)

here's my JS code:

function move_img(str) {
var step=2 ; // change this to different step value
switch(str){
case "down":
var x=document.getElementById('i1').offsetTop;
x= x + step;
document.getElementById('i1').style.top= x - 1 + "px";
break;

case "up":
var x=document.getElementById('i1').offsetTop;
x= x -step;
document.getElementById('i1').style.top= x + "px";
break;

case "left":
var y=document.getElementById('i1').offsetLeft;
y= y - step;
document.getElementById('i1').style.left= y + "px";
break;

case "right":
var y=document.getElementById('i1').offsetLeft;
y= y + step;
document.getElementById('i1').style.left= y + "px";
break;
}
}


function auto(str) {
 myVar = setInterval(function(){ move_img(str); }, 2)  ;


}
setTimeout(function( ) { clearInterval( myVar ); }, 1);
function nana(){


}

Answer 1

Your fiddle doesn't work. You'll need to specify the height as well as the top attribute, and I believe top has to be above bottom. I've made an example here . The changes to your examples are:

//javascript
if (str == 'up' || str == 'down') {
    var top = el.offsetTop;
    var height = el.offsetHeight;  //get height to modify
    console.log(height);
    if (str == 'up') {
        top -= step;
        height += step;  //adjust height
    } else {
        top += step;
        height -=step;  //adjust height
    }
    if (top_max >= top && top >= 0) {  //make sure #i1 is inside #i
        document.getElementById('i1').style.top = top + "px";
        document.getElementById('i1').style.height = height + "px";  //modify height
    } else {
        clearInterval(myVar)
    }
//css
#i1 {
  width: 100px;
  display: inline-block;
  background:red;
  position: absolute;
  top: 150px;  //initial top
  bottom: 250px;  //as as bottom of #i
  height:100px;  //initial height

}