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對應的內容都不同 自己靈活運用