循環Java代碼[循環不會停止]

Question

我真的試圖找出為什么for循環一次又一次地循環。 我的問題是為什么第一個循環一次又一次認為x為1？

結果顯示具有隨機進度的進度條的隨機計數（img元素為進度）。 但是它應該只顯示1，因為x是1。有人可以告訴我答案是什么嗎？

function progress(){

    var min = 0;
    var max = 10;
    /*var x = Math.floor(Math.random() * (max - min)) + min;*/
    var x = 1;


    var main_div = document.createElement('div');
    main_div.className = "main_div";
    document.body.appendChild(main_div);

    for(var i = 0; i < x; i++){

        var einfuegen = document.createElement('div');
        einfuegen.className = 'statusbar';
        main_div.appendChild(einfuegen);    

        var einfuegen2 = document.createElement('img');
        einfuegen2.id = 'bild';
        einfuegen2.name = 'bild';
        einfuegen2.src = 'project_status.gif';  

        var zielort = document.getElementsByClassName('statusbar')[i];
        zielort.appendChild(einfuegen2);

        var min = 0;
        var max = 100;
        var x = Math.floor(Math.random() * (max - min)) + min;
        document.getElementsByTagName('img')[i].style.width = x+"%"; 


    }

}

Answer 1

您要在此處更改x ：

var x = Math.floor(Math.random() * (max - min)) + min;

因此，循環將在0到100之間循環隨機次數。

使用不同的變量名作為進度條的值，並為此使用進度條的最大值和最小值：

var value = Math.floor(Math.random() * (maxValue - minValue)) + minValue;
document.getElementsByTagName('img')[i].style.width = value+"%"; 

造成混淆的原因是JSLint建議在函數頂部聲明所有變量的原因：

function progress(){
    var min = 0,
        max = 10,
        x = 1,
        i,
        main_div = document.createElement('div'),
        einfuegen,
        einfuegen2,
        zielort,
        minValue = 0,
        maxValue = 100,
        value;

    // rest of function...
}

上面的變量列表很長，因為它同時具有循環外部和循環內部的值。 解決方案是將代碼分解為單獨的函數：

function progress(){
    var min = 0,
        max = 10;
        x = 1,
        main_div = document.createElement('div'),
        i;

    main_div.className = "main_div";
    document.body.appendChild(main_div);

    for(i = 0; i < x; i += 1){
        mainDiv.appendChild(makeProgressBar());    
    }
}

function makeProgressBar() {
    var einfuegen = document.createElement('div'),
        einfuegen2 = document.createElement('img'),
        min = 0,
        max = 100,
        x = Math.floor(Math.random() * (max - min)) + min;

    einfuegen.className = 'statusbar';

    einfuegen2.id = 'bild';
    einfuegen2.name = 'bild';
    einfuegen2.src = 'project_status.gif';  

    einfuegen.appendChild(einfuegen2);

    einfuegen2.style.width = x+"%"; 

    return einfuegen;
}

這也將有助於防止變量名沖突。

Answer 2

您需要為循環中的變量使用一些不同的名稱

var min = 0;
var max = 100;
var x = Math.floor(Math.random() * (max - min)) + min;

它應該是

var min1 = 0;
var max1 = 100;
var x1 = Math.floor(Math.random() * (max1 - min1)) + min1;

當您在循環條件中使用x並在循環內部對其進行修改時，會導致循環故障。

Answer 3

x從1開始，但是您可以像這樣在循環中更改它：

var x = Math.floor(Math.random() * (max - min)) + min;

它返回0-100之間的數字，循環繼續進行，直到達到隨機數以上。