如何在有数据的情况下实现换一组且不重复随机

首先你需要做一个数据隐藏的 div 这个div中存储中所有的tms手动填写的数据； 显示层也需要有 还有对应的 出发点 下面是生成的测试dom

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div id="clic">点这里变换随机数</div>
<div class="show" >
	<ul id="show">
    	
    </ul>
</div>
<div  hidden>
	<ul id="hidden">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>49</li>
        <li>50</li>
    </ul>
</div>
<script>
 
//刷新页面更换组信息
function gg_Refresh(arrJaon){
	//arrJson格式 {host:'',spcoe:'',point:'',mark:'',packetNumber:}
	//host :展示区域显示分组; 
	//spcoe: 隐藏区域显示分组 ;
        //point: 出发显示分组显示分组 ;
	//mark: 单个模块标签 建议用li构成 ;
	//packetNumber:分组个数 方便求取组元素;
	this.hostObj = this.gg_Id(arrJaon.host);
	this.spcoeObj = this.gg_Id(arrJaon.spcoe);
	this.pointObj = this.gg_Id(arrJaon.point);
	var spoce = this.spcoeObj;
	this.markObj = this.gg_Tag(spoce,arrJaon.mark);
	this.len = this.markObj.length;
	this.packetNumber = arrJaon.packetNumber;
	this.alreadyArr = [];//已经抽选数组
	this.remainArr = [];//剩余数组	
}
//初始化运行函数
gg_Refresh.prototype.init = function(){
	var that = this;
	that.remain();
	that.stochastic();
	that.tigger();	
}
//随机拿去并记录拿去序号
gg_Refresh.prototype.stochastic = function(){
	var that = this;
	var arr = [];
	that.hostObj.innerHTML = "";
	 
	while(arr.length < that.packetNumber){
		var temp = 0;
		var num = that.oneNum();
		if(that.alreadyArr.length == that.len){
			that.remainArr = that.alreadyArr;
			that.alreadyArr = [];
		}
		var record = 0;
		for(;temp < arr.length; temp++){
			if(arr[temp]==num){
				record = 1;
			}	
		}
		if(record == 0){
			arr.push(num);
		}
	}
	that.rendering(arr);		
}
//随机抽取不重合函数 
gg_Refresh.prototype.oneNum = function(){
	var that = this;
	var num = "";
	var Num = "";
	num =parseInt(Math.random()*that.remainArr.length);
	Num = that.remainArr[num];
	that.remainArr.splice(num,1);
	that.alreadyArr.push(num);
	return Num ;
}
//剩余数组存储 一开始为初始值全部数组
gg_Refresh.prototype.remain = function(){
	var temp = 0;
	var that = this;
	for(;temp < that.len; temp++){
		that.remainArr.push(temp);
	}
}
//渲染页面
gg_Refresh.prototype.rendering = function(arr){
	var that =this;
	var temp = 0;
	for(;temp < arr.length;temp++){
		var x = that.markObj[arr[temp]].cloneNode(true);;
		that.hostObj.appendChild(x);
	}
}
//点击轮换
gg_Refresh.prototype.tigger = function(){
	var that = this;
	that.pointObj.onclick = function(){
		that.stochastic();	
	}	
}
gg_Refresh.prototype.gg_Id = function (id){return document.getElementById(id);};//获取id对象
gg_Refresh.prototype.gg_Tag = function (obj, mark){return obj.getElementsByTagName(mark);};//获取标签对象

var jsonString = {host:'show',spcoe:'hidden',point:'clic',mark:'li',packetNumber:4}
var gg_refresh = new gg_Refresh(jsonString);
gg_refresh.init();
</script>
</body>
</html>`
posted @ 2013-11-19 15:06  学前班_随风  阅读(310)  评论(0)    收藏  举报