JS 实现 DIV 遍历并随机替换DIV内容
不多说 直接贴代码
<script> //获取所有的 DIV var divArr = document.getElementsByClassName('biaoqianbox'); //获取长度 var jsonLength = divArr.length; //等待添加给 DIV 的内容 数组形式 每个键对应的值都不同 var jsonArr = {}; for( var i = 0; i <= jsonLength; i++) { jsonArr[i] = getdes(); } //执行添加动作 var textNode; for (var i = 0; i < jsonLength; i++) { textNode = document.createTextNode(jsonArr[i]); //divArr[i].append(textNode); //这是追加 以字符串形式展示 相转化为html代码用下面的 divArr[i].innerHTML = textNode.data; } //随机获取对应内容 可自行更改 我这里的需求是这样的 function getdes(){ var arr = ["荐","惠","热","尾"]; var items = ['1','2','3','4','5','6','7','8','9','0','10','11','12','13','14','15','16','17']; //随机一个 var index = Math.floor((Math.random()*arr.length)); //随机多个 var indexs = getRandomArrayElements(items, 3); //数组 jsonArr 的健对应的内容 var html = "<li class='liangdian biaoqian'>"+arr[index]+"</li><li class='biaoqian'>"+indexs[0]+"</li><li class='biaoqian'>"+indexs[1]+"</li><li class='biaoqian'>"+indexs[2]+"</li>"; //回调 return html; } //随机取多个 function getRandomArrayElements(arr, count) { var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index; while (i-- > min) { index = Math.floor((i + 1) * Math.random()); temp = shuffled[index]; shuffled[index] = shuffled[i]; shuffled[i] = temp; } return shuffled.slice(min); } </script>
效果如下图,每个DIV对应的内容都不同 自己灵活运用
既不回头,何必不忘;
既然无缘,何须誓言;
今日种种,逝水无痕;
明夕何夕,君已陌路;