Question

我有一个非常简单的进度条我正在制作，一切都有效，除了一件事......百分号。我的代码如下，我的问题是如何在不弄乱脚本的情况下为此添加百分号。 - 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>

Answer 1

您需要更改这两行：

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

将百分号添加到进度条

1 个答案: