站内比例实现

最新推荐文章于 2023-06-08 16:40:48 发布

cengzi

最新推荐文章于 2023-06-08 16:40:48 发布

阅读量98

点赞数

分类专栏：学习笔迹文章标签： Java XHTML HTML

学习笔迹专栏收录该内容

12 篇文章 0 订阅

订阅专栏

回顾三：实现站内比例显示

一、简单的java类

package com.test;

public class TestOne {

	public int getDataOfBl() {
		//某一类目的总数
		//所有类目的总数
		//计算该类所占比例，并返回(结果值)

		//这里只是测试数据
		return 20;   
	}
}

PS：具体的方法不写，只写最基本的

二、页面显示实现

<%@ page language="java" import="java.util.*,com.test.TestOne" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>站内比例的显示</title>
<style>
*{
	margin:0; padding:0;
}
body{
	font-size:12px;
}
</style>
<script>
	window.onload = function(){

		var zs = document.getElementById("data").value; 
		var z = parseInt(zs);

		if(z <= 90){
			$("pant").style.backgroundColor = "red";
		}

		if(z <= 50){
			$("pant").style.backgroundColor = "yellow";
		}

		if(z <= 20){
			$("pant").style.backgroundColor = "green";
		}
		$("pant").innerHTML = z + "%";
		$("pant").style.width = z + "px";
	}	
	function $(id){
		return document.getElementById(id);
	}
</script>
</head>

<body>
<%
     TestOne t1=new TestOne();
%>
<input type="hidden" id="data" value="<%=t1.getDataOfBl() %>"/>
<div style="width:100px;border:solid 1px black; height:21px;">
	<div style="background-color:#FF0000; width:0px; height:21px; text-align:center; line-height:21px;" id="pant"></div>
</div>
</body>
</html>

PS：功能较为简单，mark一下，免得忘记

cengzi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
站内比例实现

回顾三：实现站内比例显示一、简单的java类[code="java"]package com.test;public class TestOne { public int getDataOfBl() { //某一类目的总数 //所有类目的总数 //计算该类所占比例，并返回(结果值) //这里只是测试数据 return 20; ...
复制链接

扫一扫

专栏目录