Vergrößern des Bildrands basierend auf einem Label-Wert html

Question

Ich habe ein Bild, das am unteren Rand des Bildschirms ist und ich möchte seine Ränder basierend auf dem Wert eines Labels erhöhen (nach oben verschieben).

<img src="flag.png" 
style=" margin-left:50%; 
     position:absolute; 
     margin-top:50%; 
     bottom:0px; 
     "> 
<label id="countdown" > countdown: </label> 

Label ID = "Countdown" wird häufig aktualisiert.

Im Wesentlichen ist es möglich, das Bild nach oben zu verschieben (erhöhen Sie den Wert von "unten: 0;") basierend auf dem Wert der ID = "Countdown"?

Answer 1

Ich bin mir nicht sicher, wie der Wert des Etiketts geändert wird. Es ist möglicherweise einfacher, das Flagstyling zu aktualisieren, wenn Sie den Etiketteninhalt aktualisieren.

Hier ist ein Beispiel für den Einstieg: https://jsfiddle.net/fztkjb89/

$(function() { 
    var initialCountDown = 100; 
    var countDown = initialCountDown; 


    setInterval(function(){ 
    // update label 
    $('#counter').text(countDown); 

    // update image style 
    $('img').css('bottom', initialCountDown-countDown); 

    // progress countdown 
    countDown--; 

    // reset counter 
    if (countDown == 0){ 
     countDown = initialCountDown; 
    } 
    }, 100); 
}); 

Wenn dies nicht möglich ist, überprüfen Sie meine andere Antwort aus.

Answer 2

Da Sie angegeben, dass Sie den Wert aus dem Etikett bekommen muss, ist hier ein Weg, es zu tun:

$(function(){ 
 
    $('label').bind('DOMSubtreeModified', function() { 
 
    \t var labelText = $('label').html(); 
 
    // use regex to get the number from the label string 
 
    var matches = labelText.match(/\d+$/); 
 
    // event fires with empty text and new contents 
 
    // only update the flag when we have labelText and a valid number 
 
    if(labelText && matches[0]){ 
 
    \t var countDownNumber = parseInt(matches[0]); 
 
     // I use 100 - countdown here, but 
 
     // you would propably have some calculation to determine the height of your flag here. 
 
     $('.flag').css('bottom', 100-countDownNumber) 
 
    } 
 
    }); 
 
    
 
    
 
    // separate code to update the label 
 
    var i = 100; 
 
    setInterval(function(){ 
 
    \t $('label').html('countdown: '+i); 
 
    i--; 
 
    if(i === 0){ 
 
    \t i= 100; 
 
    } 
 
    }, 100); 
 
    
 
})

.flag{ 
 
    width: 30px; 
 
    margin-left:50%; 
 
    position:absolute; 
 
    margin-top:50%; 
 
    bottom:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<img class="flag" src="http://www.thedayibecameapirate.com/wp-content/uploads/2012/05/Flag3.png"> 
 

 
<label id="countdown" > countdown: <span id="counter"></span></label>