進度條文本不顯示

此流星客戶端代碼嘗試在進度條的中央設置文本，但文本未顯示在屏幕上，儘管它顯示在檢查面板中。在Chrome和Safari上試用無濟於事。任何建議如何解決這個問題？ THX進度條文本不顯示

lib = (function() { 
    return Object.freeze({ 
    'clickInfo': function() { 
     Meteor.setTimeout(function() { 
      let bar = document.getElementById('bar'); 
      bar.style.visibility = 'visible'; 
      lib.progressBarStart(bar); 
     }, 50); 

    }, 
    'progressBarStart': function (bar) { 
     if (bar && bar.value < 70) { 
     if (Session.get('inProgress')) { 
      setTimeout(function() { 
      bar = document.getElementById('bar'); 
      lib.progressBarStart(bar); 
      }, 1000); 
      bar.value += 1; 
     } 
     } else if (Session.get('inProgress')) { 
     bar.innerHTML = 'Result will be emailed'; // <== text failed to show 
     } 
    } 
    }); 
}());

#bar { 
    width: 100%; 
    height: 1.5rem; 
    visibility: hidden; 
    text-align: center; 
    color: white; 
    -webkit-appearance: none; 
    -moz-appearance: none; 
}

<progress id="bar" value="0" max="70"></progress>

來源

2017-08-11 Fred J.

https://stackoverflow.com/a/32781763/5047454爲我修復了它。 –

使用:before僞元素CSS來顯示文本。我希望這可以幫助你

progress::before { 
    content: 'Result will be emailed'; 
    position:relative; 
    top:5px; 
}

有益的小提琴https://jsfiddle.net/96z0gwv7/1/

的Jquery：

$('#bar').addClass('done');

的CSS：

progress.done::before{ 
    content: 'Result will be emailed'; 
    position:relative; 
    top:5px; 
}

來源

2017-08-11 06:31:41 PraveenKumar

然後'$（'＃bar'）.addClass（'progress：before'）;'而不是'bar.innerHTML ='結果將通過電子郵件發送';'沒有工作 –

它的CSS代碼不是 – PraveenKumar

。正如你在我的JS代碼中注意到的。它只需要在特定時間出現。 –

進度條不應該顯示任何文本。我建議添加另一個元素（例如<div>）並將其顯示在進度條的位置（或頂部）。

來源

2017-08-11 07:30:09 Styx

你可以給JS代碼一個'p'元素可以放置在酒吧的頂部，文字在酒吧的中心？或者按照你的建議放置它的位置？ –

進度條文本不顯示

回答

相關問題