主机磁盘占用情况监控纯CSS DIV_磁盘占用怎么用css实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gaogaoshan/article/details/38263137

本文介绍如何利用纯CSS技术实现对主机磁盘占用情况的可视化监控，通过CSS实现直观的DIV展示，无需JavaScript或其他编程语言，提供了一种简洁的系统监控解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="../jslib/jquery-1.8.3.js"></script>
<!-- (192.168.11.217:6688/resMg/report/disk2.jsp?currentPage=1&&v_ip=192.168.14.180&&hostName=Aix) -->
<title>主机磁盘占用情况监控</title>

<style type="text/css">
	
	tr { height: 35px ; }
	
	.mount_point_td { width: 100px; font-weight: bolder;}
	.allDisk_td { width: 100px; font-weight: bolder; text-align: right;}
	
	.all_td { width: 800px; }
	
	.use_div{ background-color: red ; float: left ; height: 30px ; overflow: hidden; }
	
	.can_use_div{ background-color: green; float: left ; height: 30px ; overflow: hidden; text-align: right;}
</style>


</head>

<body>

	<%
		String v_ip=request.getParameter("v_ip").toString();
		String hostName=request.getParameter("hostName").toString();
		String currentPage=request.getParameter("currentPage");
		if(currentPage==null || currentPage.equals(""))currentPage="1";
	%>	
	
	
<script type="text/javascript">
		var useDisk = [ 110, 220, 330, 40, 550, 6600, 7  ];
		var allDisk = [ 1000, 2000, 30000, 4000, 5000, 60000, 7000  ];
		var diskName = [ 'oradata1', 'oradata2', 'oradata3', 'oradata4','oradata5', 'oradata6', 'oradata7' ];
		
		$(function(){
			
			var goPage=$("#currentPage").text();
			getChartData(goPage,'<%=v_ip%>');  
			
    		for ( var i = 0; i < diskName.length; i++) {//创建多个图表实例
				appendDiv(i);
			}
		});
		
		//动态创建div
		function appendDiv(i) {
			var $html_tr = "<tr>"+
								"<td class='mount_point_td'>"+diskName[i]+"</td>"+
								"<td class='all_td'>"+
									"<div class='use_div' 	  style='width: "+ use_percent(i)	  +"%  ;'>"+useDisk[i]+"</div>"+
									"<div class='can_use_div' style='width: "+ can_use_percent(i) +"%  ;'>"+(allDisk[i]-useDisk[i])+"</div>"+
								"</td>"+
								"<td class='allDisk_td'>"+allDisk[i]+"</td>"+
							"</tr>";
			
			$("#my_table").append($html_tr);
		}
		
		function use_percent(i){
			return (useDisk[i]/allDisk[i])*100;
		}
		function can_use_percent(i){
			return (((allDisk[i]-useDisk[i]))/allDisk[i])*100;
		}
		
</script>

<script type="text/javascript">

	function nextPage(){// $("#currentPage").text();
		var currentPage=$("#currentPage").text();var totalPage=$("#totalPage").text();
		if( currentPage!=totalPage){
			currentPage=parseInt(currentPage)+1;
			window.location.href="${pageContext.request.contextPath}/report/disk.jsp?currentPage="+currentPage+"&&v_ip=<%=v_ip%>"+"&&hostName=<%=hostName %>"; 
		}
	}
	
	function prePage(){
		var currentPage=document.getElementById("currentPage").innerHTML;
		if( currentPage!=1 ){
			currentPage=currentPage=parseInt(currentPage)-1;
			window.location.href="${pageContext.request.contextPath}/report/disk.jsp?currentPage="+currentPage+"&&v_ip=<%=v_ip%>"+"&&hostName=<%=hostName %>"; 
		}
	}
	
	
	function getChartData(goPage,v_ip) {
		//通过Ajax获取数据
			$.ajax({
				type : "post",
				async : false, //同步执行
// 				url : "${pageContext.request.contextPath}/report/charts_data_test.json",
				url : "${pageContext.request.contextPath}/disk/diskData",
				data : {goPage:goPage,v_ip:v_ip},
				dataType : "json", //返回数据形式为json
				success : function(result) {
					if (result) {
						useDisk = result.useDisk;
						allDisk = result.allDisk;
						diskName = result.diskName;
						document.getElementById("currentPage").innerHTML=result.currentPage;
						document.getElementById("totalPage").innerHTML=result.totalPage;
					}
				},
				error : function(errorMsg) {
					alert("不好意思，大爷，图表请求数据失败啦!");
				}
			});
		}
		

</script>

<h3 style=" text-align:center;">主机磁盘占用情况监控</h3>
	<div style="padding-left: 60px ; padding-right: 120px">
		<div style="width: 100%; padding-left: 50px">
			<div style=" font-size:17px ">
				<div>主机名：<%=hostName %>【<%=v_ip %>】</div>
			</div>
			<div style="padding-left: 33%">
				<button onclick="prePage()">上一页</button>
				当前页:<label id="currentPage"><%=currentPage %></label>     
					<label>/</label>
				总页数:<label id="totalPage"> </label> 
				<button onclick="nextPage()">下一页</button>
			</div>
		</div>
	</div>
	
	
	<center style="padding-top: 30px">
		<span style="width: 70px; background-color: red ; "> 已用空间</span>
		<span style="width: 70px; background-color: green ;" > 可用空间</span>
		<span style="width: 70px; " > 单位MB</span>
		
		<table id="my_table"></table>
	</center>
	
	
</body>
</html>