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对应的内容都不同自己灵活运用

转载于:https://www.cnblogs.com/zyjfire/p/11045959.html

JS 实现 DIV 遍历并随机替换DIV内容相关推荐

关于JS点击button之灵活替换改变内容方法
<p id="demo"> JavaScript 能改变 HTML 元素的内容. </p> <script> function myFuncti ...
html如何取单元格内容,JS获取表格内指定单元格html内容的方法
JS获取表格内指定单元格html内容的方法本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组, ...
JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色。
1.JS页面四个颜色不同的div,鼠标进入哪个div,页面背景颜色变成该div的颜色. <style>.colorChange {width: 100px;height: 100px;di ...
html js文本框文字列出,js实现文本框中输入文字页面中div层同步获取文本框内容的方法...
这篇文章主要介绍了js实现文本框中输入文字页面中div层同步获取文本框内容的方法,实例分析了javascript操作dom元素的技巧,需要的朋友可以参考下本文实例讲述了js实现文本框中输入文字页面中 ...
如何使用jQuery替换div的innerHTML？
本文翻译自:How to replace innerHTML of a div using jQuery? How could I achieve the following: 我怎样才能实现以下目标 ...
php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式通过设定contenteditable=t ...
html判断坐标,js判断鼠标位置是否在某个div中的方法
本文实例讲述了js判断鼠标位置是否在某个div中的方法.分享给大家供大家参考,具体如下: div的onmouseout事件让div消失时,会出现这样的情况,就是当鼠标移至div中的其它内容时,此时也判 ...
c# 替换html注释,C# 替换div标签
C# 替换div标签0 fillm2013.11.06浏览24次分享举报 e style="BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc ...
JQuery Dialog(JS模态窗口,可拖拽的DIV)
JQuery Dialog(JS模态窗口,可拖拽的DIV) 吴剑 2012-08-08 原创文章,转载必需注明出处:http://www.cnblogs.com/wu-jian/ 效果图调用示意图 ...

JS 实现 DIV 遍历并随机替换DIV内容

JS 实现 DIV 遍历并随机替换DIV内容相关推荐

最新文章

热门文章