css 如何在每次访问新页面时Shuffle div

lmyy7pcs 于 12个月前发布在其他

关注(0)|答案(1)|浏览(111)

我有一段代码可以在重新加载的时候打乱我的div，但是我想在每次访问新页面的时候都打乱它。我不是jquery/JavaScript的Maven，所以来这里寻求一些建议。
这是我的代码

onload = function() {
  var parent = document.getElementById("shuffle");
  var frag = document.createDocumentFragment();
  while (parent.children.length) {
    frag.appendChild(parent.children[Math.floor(Math.random() * parent.children.length)]);
  }
  parent.appendChild(frag);
}

$(document).ready(function() {
  window.location.href = window.location.href;
});

#shuffle>div {
  float: left;
  line-height: 30px;
  width: 30px;
  text-align: center;
  background-color: steelblue;
  color: #fff;
  border-radius: 4px;
  margin: 3px;
}

#shuffle {
  max-width: 360px;
}

<div id="shuffle">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
</div>

jsfiddle
我试着添加这个，但它只是不断重新加载我的页面在卡特拉。我想只是尝试一些至少。但不认为这是正确的。

<script>
      $(document).ready(function() {
          window.location.href = window.location.href;
      });
</script>

型

css

来源：https://stackoverflow.com/questions/77507644/how-to-shuffle-div-on-each-new-page-visit

1条答案

按热度按时间

dced5bon1#

只需要使用jQuery来监听ready和load事件
test on jsfiddle

function shuffle(){
var parent = document.getElementById("shuffle");
  var frag = document.createDocumentFragment();
  while (parent.children.length) {
    frag.appendChild(parent.children[Math.floor(Math.random() * parent.children.length)]);
  }
  parent.appendChild(frag);
}
 // listen to ready and load events
 document.on("ready", shuffle);
 document.on("load", shuffle());

#shuffle > div {
    float: left;
    line-height: 30px;
    width: 30px;
    text-align: center;
    background-color: steelblue;
    color: #fff;
    border-radius: 4px;
    margin: 3px;
}
#shuffle {
    max-width: 360px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="shuffle">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
</div>

更新

如果你不想使用jquery，那么就用这个JavaScript代替

document.on("ready", shuffle);
 document.on("load", shuffle());

型

赞(0）回复(0）举报 12个月前

我来回答

css 如何在每次访问新页面时Shuffle div

1条答案

更新

相关问题

热门标签

最新问答