zoukankan      html  css  js  c++  java
  • 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对应的内容都不同 自己灵活运用

    既不回头,何必不忘; 既然无缘,何须誓言; 今日种种,逝水无痕; 明夕何夕,君已陌路;
  • 相关阅读:
    shutdown(0)和shutdown(1)
    MAC Pro 同时安装 Python2 和 Python3
    Linux常用命令大全(非常全!!!)
    ReentrantLock和synchronized的区别
    ReentrantLock和synchronized的区别
    ReentrantLock和synchronized的区别
    ReentrantLock和synchronized的区别
    Java反射与注解
    Java反射与注解
    Java反射与注解
  • 原文地址:https://www.cnblogs.com/zyjfire/p/11045959.html
Copyright © 2011-2022 走看看