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