2

私は非常に単純なプログレスバーを作成していますが、パーセント記号を除いてすべてが機能します。私のコードは以下のとおりです。私の質問は、スクリプトを台無しにすることなく、これにパーセント記号を追加する方法です。- Jsフィドル

コード:

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

1 に答える 1

4

次の 2 行を変更する必要があります。

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

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

フィドルを参照してください

コードに問題はありませんが、実際には 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-16T17:40:52.927 に答える