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之间的数字，循环继续，直到达到随机数之上。

循环的Javascript [循环没有停止]

3 个答案: