Question

我有一个位于屏幕底部的图像，我想根据标签的值增加其边距（将其移向顶部）。

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

标签ID =“倒计时”经常更新。

基本上，是否可以根据id =“倒计时”的值向上移动图像（增加“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);
});

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

Answer 2

由于您表示必须从标签中获取值，所以这是一种方法：

＆＃13;

$(function(){
  $('label').bind('DOMSubtreeModified', function() {
  	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]){
    	  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(){ 
  	$('label').html('countdown: '+i);
    i--;
    if(i === 0){
    	i= 100;
    }
  }, 100);
  
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: