js-ip地址池

<div class="ip_spread" style="margin-top: 20px;">
							<div>
								<div style="float: left;">
									<span class="gray"></span>
									<span class="btn_text">未占线</span>
								</div>
								<div style="float: left;">
									<span class="outline"></span>
									<span class="btn_text">离线</span>
								</div>
								<div style="float: left;">
									<span class="inline"></span>
									<span class="btn_text">在线</span>
								</div>
								<div>
									<span class="cannot"></span>
									<span class="btn_text">不可分配IP</span>
								</div>
							</div>
							<div id="row"></div>
						</div>

//计算出地址池的数据
var row = []
	function ipaddress(ipStart, ipEnd) {
		console.log("row",row)
		console.log(ipStart, ipEnd)
		row=[]
		var num = ipEnd[3]
		var colCount = 36
		let i0 = 1,
			i1 = 1,
			i2 = 1,
			i3 = 1;
		if (ipEnd[0] - ipStart[0] > 0) {
			i0 = ipEnd[0] - ipStart[0] + 1;
		}
		if (ipEnd[1] - ipStart[0] > 1) {
			i1 = ipEnd[1] - ipStart[1] + 1;
		}
		if (ipEnd[2] - ipStart[2] > 0) {
			i2 = ipEnd[2] - ipStart[2] + 1;
		}
		if (ipEnd[3] - ipStart[3] > 0) {
			i3 = ipEnd[3] - ipStart[3] + 1;
		}
		let row1 = (i0 * i1 * i2 * i3) / (colCount + 1);
		for (let j = 0; j < row1; j = j + num + 1 / (colCount + 1)) {
			for (let k = 0; k <= num; k++) {
				let label = [ipStart[0], ipStart[1], ipStart[2], k];
				if (label.join(".") == ipEnd.join(".")) {
					row.push(label.join("."));
					break;
				}
				row.push(label.join("."));
			}
			if (ipStart[2] > num) {
				ipStart[1] = ipStart[1] + 1;
				ipStart[2] = 0;
				if (ipStart[1] > num) {
					ipStart[0] = ipStart[0] + 1;
					ipStart[1] = 0;
					ipStart[2] = 0;
				} else {
					ipStart[1] = ipStart[1] + 1;
				}
			} else {
				ipStart[2] = ipStart[2] + 1;
			}
		}
		let data = [];
		for (let i = 0; i < row.length; i = i + (colCount + 1)) {
			let data1 = [];
			for (let j = i; j < i + (colCount + 1); j++) {
				if (j < row.length) data1.push(row[j]);
			}
			data.push(data1);
		}
		row = data;
	}

//渲染地址池	
function table(id, green, red, grey) {
		content = document.getElementById(id);
		for (var i = 0; i < row.length; i++) {
			var div = document.createElement("div");
			div.className = "row1"
			content.appendChild(div)
			var div1 = document.createElement("div");
			div1.innerText = row[i][0]
			div1.className = "label1"
			div.appendChild(div1)
			var context = document.createElement("div");
			context.className = "context";
			content.appendChild(context)
			for (var j = 0; j < row[i].length; j++) {
				// console.log(row[i][j])
				var num = document.createElement("div");
				num.className = "number";
				for (var z = 0; z < green.length; z++) {
					if (row[i][j] == green[z]) {
						num.className = "green";
					}
				}
				for (var y = 0; y < red.length; y++) {
					if (row[i][j] == red[y]) {
						num.className = "red";
					}
				}
				for (var y = 0; y < grey.length; y++) {
					if (row[i][j] == grey[y]) {
						num.className = "grey";
					}
				}
				num.innerText = row[i][j].split(".")[3]
				context.appendChild(num)
			}

		}

	}

//ajax调用
function seg(segment_id,seg_name,seg_sum){
		$.ajax({
			url: "json/seg.json",
			type: "get",
			data:{
				"id":segment_id
			},
			success: function(req) {
				console.log(segment_id,seg_name,seg_sum)
				var green=[]
				var red=[]
				var End=+seg_sum+2
				var scan = seg_name.replace(/\./g, ",")
				scan = scan.split(",")
				var ipStart = scan[0] + "," + scan[1] + "," + scan[2] + "," + "0"
				ipStart=ipStart.split(",")
				var ipEnd = scan[0] + "," + scan[1] + "," + scan[2] + "," +End
				ipEnd=ipEnd.split(",")
				var ipStart1 = scan[0] + "." + scan[1] + "." + scan[2] + "." + "0"
				ipStart1=ipStart1.split(",")
				var ipEnd2 = scan[0] + "." + scan[1] + "." + scan[2] + "." +End
				ipEnd2=ipEnd2.split(",")
				ipaddress(ipStart, ipEnd)
				$("#row").html("")
				for(var i=0;i<req.down.length;i++){
					green.push(req.on[i].ip)
					red.push(req.down[i].ip)
				}
				var grey = ipStart1.concat(ipEnd2);
				table("row",green,red,grey)
				
			},
		})
	}



//json格式
{
	"down":[
		{
			"ip":"10.8.8.39"
		},
		{
			"ip":"10.8.8.20"
		},
		{
			"ip":"10.8.8.15"
		}
	],
	"on":[
		{
			"ip":"10.8.8.10"
		},
		{
			"ip":"10.8.8.30"
		},
		{
			"ip":"10.8.8.60"
		}
	]
}

//css样式 
.ip_spread{
    border: 1px solid transparent;
    overflow:scroll;
    height: 400px;
}
.row1{
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 50px;
}
.label1 {
  position: absolute;
  width: 80px;
  left: 0;
  text-align: right;
}
.content1 {
  position: absolute;
  left: 130px;
  right: 0;
  text-align: left;
}
.number {
  display: inline-block;
  width: 36px;
  height:36px;
  /* padding: 2px; */
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid gainsboro;
  text-align: center;
  line-height: 30px;
  background-color: #dcdcdc;
}
.green {
  background-color: #008000;
  display: inline-block;
  width: 36px;
  height:36px;
 /* padding: 2px; */
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid #008000;
  text-align: center;
  line-height: 30px;

}
.red {
  background-color: #A60000;
  display: inline-block;
  width: 36px;
  height:36px;
 /* padding: 2px; */
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid #A60000;
  text-align: center;
  line-height: 30px;

}
.grey{
  background-color: #8C8C8C;
  display: inline-block;
  width: 36px;
  height:36px;
 /* padding: 2px; */
  border-radius: 5px;
  margin-right: 5px;
  border: 1px solid #8C8C8C;
  text-align: center;
  line-height: 30px;

}
.white {
  background-color: #fff;
}

.ip_search{
     border: 1px solid gainsboro;
     padding: 10px;
     margin-bottom: 20px;

}

.context{
	margin-left: 7%;
	margin-top: 0.5%;
}

.gray{
	background-color: #dcdcdc;
	 display: inline-block;
	 width: 15px;
	  height:15px;
	 /* padding: 2px; */
	  border-radius: 2px;
	  margin-left: 5px;
	  margin-top: 5px;
	 border: 1px solid gainsboro;
	 text-align: center;
	 line-height: 30px;
}
.outline{
	background-color: #A60000;
	 display: inline-block;
	 width: 15px;
	 height:15px;
	/* padding: 2px; */
	 border-radius: 2px;
	 margin-left: 5px;
	 margin-top: 5px;
	 border: 1px solid  #A60000;
	 text-align: center;
	 line-height: 30px;
}
.inline{
	background-color: #008000;
	 display: inline-block;
	width: 15px;
	 height:15px;
	/* padding: 2px; */
	 border-radius: 2px;
	 margin-left: 5px;
	 margin-top: 5px;
	 border: 1px solid #008000;
	 text-align: center;
	 line-height: 30px;
}
.cannot{
	background-color: #8C8C8C;
	 display: inline-block;
	width: 15px;
	 height:15px;
	/* padding: 2px; */
	 border-radius: 2px;
	 margin-left: 5px;
	 margin-top: 5px;
	 border: 1px solid #8C8C8C;
	 text-align: center;
	 line-height: 30px;
}
.page-header, .btn_text, .label1{
	font-size: 16px;
}