Javascript 加载方格棋盘_Javascript_Html

Javascript 加载方格棋盘

javascript html

Javascript 加载方格棋盘,javascript,html,Javascript,Html,我有个问题。我试图在我的主页上做一个随机的棋盘布局（每次加载站点时，div都会切换位置）。这就是我想到的： <head> <script> function shuffelSquares(squarenumber){ for(var j, x, i = squarenumber.length; i; j = Math.floor(Math.random() * i), x = squarenumber[--i], squarenu

我有个问题。我试图在我的主页上做一个随机的棋盘布局（每次加载站点时，div都会切换位置）。这就是我想到的：

<head>
<script>

    function shuffelSquares(squarenumber){
        for(var j, x, i = squarenumber.length; i; j = Math.floor(Math.random() * i), x = squarenumber[--i],         squarenumber[i] = squarenumber[j], squarenumber[j] = x);
            return squarenumber;
    }

    </script>
</head>
<body>

<div class="background"></div>
<div class="chessBoard">

    <div class="menu">
        <li class="menu">PROJECTS</li>
        <li class="menu">CONTACT</li>
    </div>
    <script>

    var squareNumbers = ['1','2','3','4','5','6','7','8','9'];
    squareNumbers = shuffelSquares(squareNumbers);
    for(var i = 0; i<=squareNumbers.length-1; i++){
        console.log(squareNumbers[i]);
        div = document.createElement('div');
        div.setAttribute('id', 'square'+squareNumbers[i]);
        div.innerHTML = "<h1>" + squareNumbers[i] + "</h1>";
        console.log(div);
    }



    </script>
    <div id="square1"><h1>1</h1></div>
    <div id="square2"><h1>2</h1></div>
    <div id="square3"><h1>3</h1></div>
    <div id="square4"><h1>4</h1></div>
    <div id="square5"><h1>5</h1></div>
    <div id="square6"><h1>6</h1></div>
    <div id="square7"><h1>7</h1></div>
    <div id="square8"><h1>8</h1></div>
    <div id="square9"><h1>9</h1></div>
</div>


函数shuffelSquares（平方数）{
对于（var j，x，i=squarenumber.length；i；j=Math.floor（Math.random（）*i），x=squarenumber[--i]，squarenumber[i]=squarenumber[j]，squarenumber[j]=x）；
返回平方数；
}
项目
联系
变量平方数=['1'、'2'、'3'、'4'、'5'、'6'、'7'、'8'、'9']；
平方数=shuffelSquares（平方数）；
对于（var i=0；i您可以使用document.getElementById（squared.innerHTML=/…

下面是一个演示：
1
2.
3.
4.
点击我
document.getElementById（'btn'）。onclick=function（）{
对于（变量i=1；i<10；i++）{
document.getElementById（“square”+i）.innerHTML=“chess！”；
}
};
您可以尝试使用insertBefore
来获得结果，我创建了一个小演示，只需重新加载几次即可查看布局更改：
var article=document.querySelector（'article'）；
var elements=document.querySelectorAll（'div'）；
对于（var x=0；x
我建议您在跳转到JS.JS is（也是）之前，先回顾一下HTML基础知识关于元素操作，看到你的HTML标记你很难继续使用JS。例如，
元素不能作为
子元素。同时看到你使用err DIV和li的.menu
对元素进行分类的方式意味着你没有正确使用类名和选择器。还要记住h1如果你想让搜索引擎在你的对抗（SEO）中变得友好，那么应该是每页一个。是的，你是对的，但也不是。这只是一个原型/模型，我只是想在清理和验证我的代码之前让我的想法发挥作用。但是感谢你的输入，你有一些观点。是的，我将在我以后的设计中使用UK而不是div，因为它现在不会验证。。。
<div id="square1">1</div>
<div id="square2">2</div>
<div id="square3">3</div>
<div id="square4">4</div>
<button id="btn">click me</button>    

document.getElementById('btn').onclick = function() {
    for (var i = 1; i < 10; i++) {
        document.getElementById("square" + i).innerHTML = "chess!";    
    }
};

var article = document.querySelector('article');
var elements = document.querySelectorAll('div');
for(var x=0; x < elements.length; x++){
    var randomIndex = Math.floor(Math.random() * 9.99) + 1;
    var randomElement = document.querySelector('div:nth-child(' + randomIndex + ')');
    article.insertBefore(randomElement, elements[x]);
}