javascript - 根据标签值html增加图像边距

Question

我有一个位于屏幕底部的图像，我想根据标签的值增加它的边距(将它移到顶部)。

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

标签 id="countdown"经常更新。

本质上，是否可以根据 id="countdown"的值向上移动图像(增加 "bottom:0;"的值)？

Answer 1

我不确定标签的值是如何改变的。 在更新标签内容的同时更新标志样式可能会更容易。

这是一个帮助您入门的示例: 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);
});

如果这不是一个选项，请查看我的其他答案。