Добавить знак процента в панель прогресса

У меня очень простой индикатор выполнения, и все работает, за исключением одного ... знака процента. Мой код ниже, и мой вопрос заключается в том, как добавить к нему знак процента, не испортив скрипт. - JsFiddle Добавить знак процента в панель прогресса

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="icon" href="Assets/IMG/Roz.png" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Apache Testing Server</title> 
<style type="text/css"> 
    #ProgressWrap { 
     height:30px; 
     width:300px; 
     border:1px solid #222; 
     text-align:center; 
     position:relative; 
    } 

    #ProgressStat { 
     height:30px; 
     width:0%; 
     background-color:#9CF; 
     position:absolute; 
     top:0px; 
     left:0px; 
    } 

    #ProgressPer { 
     width:100%; 
     height:30px; 
     line-height:30px; 
     position:absolute; 
     top:0px; 
     left:0px; 
     z-index:1000; 
    } 
</style> 

<script type="text/javascript"> 
window.onload = function() { 
    document.getElementById('ProgressPer').innerHTML = 0; 

    var Change = setInterval(function() { 
     var Per = document.getElementById('ProgressPer').innerHTML; 
     ++Per 
     if(Per == 101) 
     { 
      clearInterval(Change); 
     } 
     else 
     { 
      document.getElementById('ProgressPer').innerHTML = Per; 
      var Bar = document.getElementById('ProgressStat'); 
      Bar.style.width = Per + '%';  
     } 
    }, 50); 
} 
</script> 
</head> 

<body> 
    <div id="ProgressWrap"> 
     <div id="ProgressPer"></div> 
     <div id="ProgressStat"></div> 
    </div> 
</body> 
</html>

источник

2013-03-16 Moussa Harajli

[** скрипку **] (http://jsfiddle.net/qGjkf/5/) – adeneo

Вы должны изменить эти две строки:

var Per = document.getElementById('ProgressPer').innerHTML.replace('%','');

document.getElementById('ProgressPer').innerHTML = Per.toString() + '%';

See the fiddle.

В коде нет ничего плохого, но это не соответствует правилам стиля javascript. Кроме того, нет необходимости принимать значение innerHTML в ваших расчетах. Вот еще одна версия, которую следует рассмотреть в будущем.

var pct = 0, 
    change = setInterval(function() { 
    ++pct; 
    if (pct == 101) { 
     clearInterval(change); 
    } else { 
     document.getElementById('ProgressPer').innerHTML = pct.toString() + '%'; 
     var bar = document.getElementById('ProgressStat'); 
     bar.style.width = pct + '%'; 
    } 
}, 50);

источник

2013-03-16 17:40:52 ryan

Спасибо это сработало! плохо согласитесь ответить как можно скорее! –

@ MoussaHarajli также вижу мое обновление – ryan

Добавить знак процента в панель прогресса

ответ

Смежные вопросы