Javascript 如何在每次页面加载时随机化div元素？站点名称更多信息更多信息更多信息更多信息更多信息更多信息更多信息_Javascript_Html_Random

Javascript 如何在每次页面加载时随机化div元素？站点名称更多信息更多信息更多信息更多信息更多信息更多信息更多信息

javascript html random

Javascript 如何在每次页面加载时随机化div元素？站点名称更多信息更多信息更多信息更多信息更多信息更多信息更多信息,javascript,html,random,Javascript,Html,Random,如何使div类“col-lg-4 col-sm-6 col-xs-12”出现在每次加载页面时的随机顺序？我添加了一个带有下面是代码，但它不工作。我正在脱机创建此页面，需要吗下载javascript，让它像我在引导时一样工作 <!DOCTYPE html> <html lang="en"> <head> <title>Site Name</title> <meta charset="utf-8"> <meta na

如何使div类“col-lg-4 col-sm-6 col-xs-12”出现在每次加载页面时的随机顺序？我添加了一个带有下面是代码，但它不工作。我正在脱机创建此页面，需要吗下载javascript，让它像我在引导时一样工作

<!DOCTYPE html>
<html lang="en">
<head>
<title>Site Name</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-theme.css" rel="stylesheet" />
<script type="text/javascript" src="script.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">

 </div>
<div class="navhead" id="myNavbar">
  <ul class="nav navbar-nav">
    <a>Site Name</a>
    <a href="#">Home</a>
    <a href="#">Under $20</a>
    <a href="#">Under $100</a>
    <a href="#">Ballin</a>
    <a href="#">For Him</a>
    <a href="#">For Her</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </ul>
</div>
</div>

</nav>


<div class="container-fluid">

<div class="row">
<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

<div class="col-lg-4 col-sm-6 col-xs-12" style="border: 2px solid black; width: 350px; height: 450px;"><a href="######" target="_blank"><p style="font-size: 20px;" align="center">######</p><img src="######.jpg"><p>######</p><p style="font-size: 20px;">######<button type="button" style="float: right;">More info</button></p></div>

 </div>
</div>

</body>
</html>

var卡=$（“.col-lg-4 col-sm-6 col-xs-12”）；
对于（变量i=0；i

请尝试使用此代码

var parent=document.querySelector（“.container fluid.row”）；
对于（变量i=0；i





更多信息2
更多信息3
更多信息4

更多信息6
更多信息7
请尝试使用此代码

var parent=document.querySelector（“.container fluid.row”）；
对于（变量i=0；i





更多信息2
更多信息3
更多信息4

更多信息6
更多信息7
可以使用数组洗牌方法，如中所示

var$cont=$（“#content”），
itemsArr=$cont.children（）.get（）；
$cont.append（无序移动（itemsArr））
函数洗牌（a）{
变量j，x，i；
对于（i=a.length；i；i--）{
j=Math.floor（Math.random（）*i）；
x=a[i-1]；
a[i-1]=a[j]；
a[j]=x；
}
返回a；
}

项目#1
项目#2
项目#3
项目4
项目#5
项目#6
项目7
项目8
项目9
项目#10
可以使用数组洗牌方法，如中所示

var$cont=$（“#content”），
itemsArr=$cont.children（）.get（）；
$cont.append（无序移动（itemsArr））
函数洗牌（a）{
变量j，x，i；
对于（i=a.length；i；i--）{
j=Math.floor（Math.random（）*i）；
x=a[i-1]；
a[i-1]=a[j]；
a[j]=x；
}
返回a；
}

项目#1
项目#2
项目#3
项目4
项目#5
项目#6
项目7
项目8
项目9
项目#10
我似乎无法实现此功能，是否需要下载javascript？我必须下载bootstrap才能获得响应效果。默认情况下浏览器支持Javascript。是的，你需要下载bootstrap来正确显示页面样式。我似乎无法实现这一点，我需要下载javascript吗？我必须下载bootstrap才能获得响应效果。默认情况下浏览器支持Javascript。是的，你需要下载bootstrap来正确显示页面样式。我很想使用它，因为我可以看到它在你的示例中起作用，但我无法让它在浏览器控制台中正常工作任何错误？加载jQuery.js和文档中的代码准备好了吗？
？对不起，我是新手，我在哪里加载jQuery.js？当我刷新页面时，控制台不显示任何内容尝试将代码包装在$（function（）{/*code here*/}）
中我很想使用它，因为我可以看到它在您的示例中起作用，但我无法使它在浏览器控制台中正常工作任何错误？加载jQuery.js和文档中的代码准备好了吗？
？对不起，我是新手，我在哪里加载jQuery.js？当我刷新页面时，控制台不显示任何内容尝试将代码包装在$（function（）{/*code here*/}）
var cards = $(".col-lg-4 col-sm-6 col-xs-12");
for(var i = 0; i < cards.length; i++){
var target = Math.floor(Math.random() * cards.length -1) + 1;
var target2 = Math.floor(Math.random() * cards.length -1) +1;
cards.eq(target).before(cards.eq(target2));
}