js如何实现div的循环排序
<divclass="box_0531"id="box_0531"><divclass="cont1"id="cont1"></div><divclass="cont2"...
<div class="box_0531" id="box_0531">
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
</div>
想JS 控制box_0531下的多个DIV的位置顺序变换，
比如说，刷新一次后可以这样，
<div class="box_0531" id="box_0531">
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
</div>
再刷新一次后可以这样，
<div class="box_0531" id="box_0531">
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
</div>
三次刷新显示这样
<div class="box_0531" id="box_0531">
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
</div>
请问JS如何实现？ 展开
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
</div>
想JS 控制box_0531下的多个DIV的位置顺序变换，
比如说，刷新一次后可以这样，
<div class="box_0531" id="box_0531">
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
</div>
再刷新一次后可以这样，
<div class="box_0531" id="box_0531">
<div class="cont3" id="cont3">
</div>
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
</div>
三次刷新显示这样
<div class="box_0531" id="box_0531">
<div class="cont4" id="cont4">
</div>
<div class="cont1" id="cont1">
</div>
<div class="cont2" id="cont2">
</div>
<div class="cont3" id="cont3">
</div>
</div>
请问JS如何实现？ 展开
5个回答
展开全部
如果想要实现这样的效果的话那box_0531这个div里面的内容应该由js生成，排好序然后再push进去，这样才行。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box_0531" id="box_0531">
<div class="cont1" id="cont1">1</div>
<div class="cont2" id="cont2">2</div>
<div class="cont3" id="cont3">3</div>
<div class="cont4" id="cont4">4</div>
</div>
</body>
<script>
let arr = [];
document.querySelectorAll("div").forEach(item => {
if (item.getAttribute("id").indexOf("cont") != -1) {
arr.push(item);
}
})
if (!localStorage.getItem("num")) {
localStorage.setItem("num", 0)
} else {
if (localStorage.getItem("num") == arr.length - 1) {
localStorage.setItem("num", 0)
} else {
localStorage.setItem("num", parseInt(localStorage.getItem("num")) + 1)
}
}
let num = localStorage.getItem("num");
document.querySelector("#box_0531").innerHTML = "";
arr.concat(arr.splice(0, num)).forEach(item => {
document.querySelector("#box_0531").appendChild(item)
})
</script>
</html>
请采纳
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用Vue.js来实现，这样子是最简单的，先定义一个数组，然后每次刷新打乱数组排序，然后遍历这个数组，把数组里的元素填入class和id里
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
页面一旦刷新就不会知道上次的顺序了，可以随机产生一个顺序，
可以把里面的4个div写在页面，在js中box_0531这个div，然后把那4个按随机出来的顺序插入。
可以把里面的4个div写在页面，在js中box_0531这个div，然后把那4个按随机出来的顺序插入。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
用个循环语句控制div的循环。
循环语句用js写。？
然后刷新页面
循环语句用js写。？
然后刷新页面
追问
不然要用什么写呢
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
