随机没有生成(1-9)使用9 <div>而没有没有复制,,,,, </div>

时间:2013-12-21 14:01:34

标签: javascript html

我试图在9个div中生成随机数(1-9)。如何避免号码声誉?但它不起作用,为什么我不能得到输出?提前致谢。 这是我的代码:

<html>
<head>
<title>Random_No</title>
<link rel="stylesheet" type="text/css" href="rno.css">
<script src="rno.js" ></script>
</head>

<body class="outer" onload=random()>
<div id="input1" ></div>
<div id="input2" ></div>
<div id="input3" ></div>
<div id="input4" ></div>
<div id="input5" ></div>
<div id="input6" ></div>
<div id="input7" ></div>
<div id="input8" ></div>
<div id="input9" ></div>
<script>
function random()
{
var a=new Array("input1","input2","input3","input4","input5","input6","input7","input8","input9");
x=a.length;
var ran=new Array();
for(var i=0;i<x;i++)
{
   ran[i]=Math.floor(Math.random()*9);
}

for(var i=0 ; i<x ; i++)
{
   document.getElementById("a[i]").innerHTML=ran[i];
}
}
</script>
</body>
</html>

6 个答案:

答案 0 :(得分:1)

替换

document.getElementById("a[i]").innerHTML=ran[i];

通过

document.getElementById(a[i]).innerHTML=ran[i];

并且...为什么有2个循环?

答案 1 :(得分:1)

因为您只想要一小组随机化而没有重复的项目并且每一项都采用,所以Fisher-Yates shuffle在这里非常有效。

var inputs = [], i;
for (i = 1; i < 10; ++i) // get each input
    inputs.push(document.getElementById('input' + i));

function shuffleArray(a) { // Fisher-Yates shuffle, no side effects
    var i = a.length, t, j;
    a = a.slice();
    while (--i) t = a[i], a[i] = a[j = ~~(Math.random() * (i+1))], a[j] = t;
    return a;
}

inputs = shuffleArray(inputs); // shuffle

for (i = 0; i < 9; ++i) // give values (already shuffled)
    inputs[i] = i + 1;  // there will be no repeats because we're counting up

答案 2 :(得分:0)

您需要更改

document.getElementById("a[i]").innerHTML = ran[i];

document.getElementById(a[i]).innerHTML = ran[i];

因为在a[i]周围加上引号会使它找到一个id为“a [i]”的元素

答案 3 :(得分:0)

您可以使用某些数组方法将元素映射到另一个数组中,对其进行随机数并在基本上一个链式操作中注入随机数:

var divs = document.getElementsByTagName('div');
[].map.call(divs, function(e, i) {
    return i;
}).sort(function() {
    return (Math.round(Math.random())-0.5);
}).forEach(function(r, i) {
    divs[i].innerHTML = r;
});

DEMO: http://jsfiddle.net/EsGL3/

答案 4 :(得分:0)

从集合生成randoms的另一种方法 -

<!doctype html>
<html lang="en">
<head>
<meta charset= "utf-8">
<title>Random_No</title>

</head>
<body >
<div id= "input1"></div>
<div id= "input2"></div>
<div id= "input3"></div>
<div id= "input4"></div>
<div id= "input5"></div>
<div id= "input6"></div>
<div id= "input7"></div>
<div id= "input8"></div>
<div id= "input9"></div>
<script>
function random_no(){
    var  i=0, ran=[1,2,3,4,5,6,7,8,9];
    while(i<9){     
        document.getElementById("input"+(++i)).innerHTML= 
        ran.splice(Math.floor(Math.random()*ran.length),1);
    }
}
onload=random_no;
</script>

</body>
</html>

答案 5 :(得分:-1)

您可以将Array.sort()与随机比较器一起使用来重新排序值:

JSFIDDLE

function random()
{
    var x = 9,
        ids = [ 'input1', 'input2', 'input3',
                'input4', 'input5', 'input6',
                'input7', 'input8', 'input9'
              ],
        values = [1,2,3,4,5,6,7,8,9],
        i = 0;
    Array.sort( values, function(a,b){ return Math.random() < 0.5 ? 1 : -1; });
    for( ; i < x; ++i)
    {
        document.getElementById( ids[i] ).innerHTML = values[i];
    }
}