將百分號添加到進度條

我有一個非常簡單的進度條即時製作，一切工作除了一件事......百分號。我的代碼如下，我的問題是如何將百分號添加到此，而不會搞亂腳本。 - 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 2013-03-16 17:43:58

您需要更改這些兩行：

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

由於它的工作！儘快接受答案！ – 2013-03-16 17:43:15

@MoussaHarajli看到我的更新以及 – ryan 2013-03-16 17:45:29

將百分號添加到進度條

回答

相關問題