使用JSP 编写九九乘法表

使用JSP、JSTL和EL编写九九乘法表

在这里插入图片描述

代码

需要在项目工程添加 jstl.jarstandard.jar 包依赖。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<table>
		<c:forEach var="i" begin="1" end="9">
			<tr>
				<c:forEach var="j" begin="1" end="${ i }">
					<td style="border: 1px solid;">
						<c:out value="${i}x${j}=${i*j}"></c:out>
					</td>
				</c:forEach>
			</tr>
		</c:forEach>
	</table>
</body>
</html>

1. 基础版

在这里插入图片描述
代码粘上来格式乱了。

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>99乘法表</title>
<style type="text/css">
font {
	position: relative;
	left: 300px;
	font-size: 20px;
	font-weight: bold;
}
</style>
</head>
<body>
	<div>
		<%
			for (int i=1; i<=9; i++) {
				for (int j=1; j<=i; j++) {
		%>
		<font>
			<%
				out.println(i + " x " + j + " = " + (i*j));
			%>
			<%
				if (j==2 && i*j<10) {
			%>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<%
				} else {
			%>
			&nbsp;&nbsp;
			<%
				}
			%>
		</font>
		<%
				}
		%>
		<br>
		<%
			}
		%>
	</div>
</body>
</html>

2. 升级版

通过font标签设置颜色,自动刷新:
在这里插入图片描述

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>99乘法表-plus</title>
<style type="text/css">
font {
	position: relative;
	left: 300px;
	font-size: 20px;
	font-weight: bold;
}
</style>
</head>
<body>
	<div>
		<%
			int r, g, b, rgb=240;
			Random random = new Random();
			for (int i=1; i<=9; i++) {
				for (int j=1; j<=i; j++) {
					r = random.nextInt(rgb);
					g = random.nextInt(rgb);
					b = random.nextInt(rgb);
		%>
		<font style="color:rgb(<%=r%>,<%=g%>,<%=b%>);">
			<%
				out.println(i + " x " + j + " = " + (i*j));
			%>
			<%
				if (j==2 && i*j<10) {
			%>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<%
				} else {
			%>
			&nbsp;&nbsp;
			<%
				}
			%>
		</font>
		<%
				}
		%>
		<br>
		<%
			}
		%>
		<%
			response.setHeader("Refresh", "2");
		%>
	</div>
</body>
</html>

3. 升级版2

通过CSS来设置颜色。

<%@page import="java.util.Random"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>99乘法表-plus</title>
<style type="text/css">
font {
	position: relative;
	left: 300px;
	font-size: 20px;
	font-weight: bold;
}
<%
	int r, g, b, rgb=240;
	Random random = new Random();
	for (int i=1; i<=9; i++) {
		for (int j=1; j<=i; j++) {
			r = random.nextInt(rgb);
			g = random.nextInt(rgb);
			b = random.nextInt(rgb);
%>
	.f<%=i%><%=j%> {
		color: rgb(<%=r%>,<%=g%>,<%=b%>);
	}
<%
		}
	}
%>
</style>
</head>
<body>
	<div>
		<%
			for (int i=1; i<=9; i++) {
				for (int j=1; j<=i; j++) {
		%>
		<font class="f<%=i%><%=j%>">
			<%
				out.println(i + " x " + j + " = " + (i*j));
			%>
			<%
				if (j==2 && i*j<10) {
			%>
			&nbsp;&nbsp;&nbsp;&nbsp;
			<%
				} else {
			%>
			&nbsp;&nbsp;
			<%
				}
			%>
		</font>
		<%
				}
		%>
		<br>
		<%
			}
		%>
		<%
			response.setHeader("Refresh", "2");
		%>
	</div>
</body>
</html>
相关推荐
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页