我想在jsp中设置一个居中的九宫格,并在里面放入一到九九个数字,并且生成一个随机的一到九的数字anser,当点击九宫格中的数字会与anser比对,不相等这个数字就变成NG,相等则跳转至Success.jsp中并在Success.jsp中显示成功和重玩
时间: 2024-06-04 15:11:06 浏览: 29
以下是一个实现上述功能的JSP代码:
<%@ page language="java" %>
<%@ page import="java.util.Random" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格游戏</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 400px;
height: 400px;
margin: 0 auto;
padding: 10px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.box {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
margin: 10px;
border: 1px solid #ccc;
font-size: 40px;
cursor: pointer;
}
.ng {
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<%
Random rand = new Random();
int answer = rand.nextInt(9) + 1; // 生成随机答案
for (int i = 1; i <= 9; i++) {
if (i == answer) {
out.print("<div class=\"box\" id=\"box" + i + "\" onclick=\"checkAnswer(" + i + ")\">" + i + "</div>");
} else {
out.print("<div class=\"box ng\">" + i + "</div>");
}
}
%>
</div>
<script>
function checkAnswer(num) {
if (num == <%= answer %>) {
alert("成功!");
location.href = "Success.jsp";
} else {
document.getElementById("box" + num).classList.add("ng");
}
}
</script>
</body>
</html>
在上述代码中,首先使用Random类生成一个随机数作为答案,然后使用一个for循环生成九个数字方格,其中答案对应的方格添加了一个点击事件checkAnswer(num),其他方格添加了一个类名ng以便于样式控制。
checkAnswer(num)函数用于检查点击的数字是否与答案相等,如果相等则跳转至Success.jsp页面,否则将点击的方格添加ng类名以改变样式。在Success.jsp页面中可以显示成功和重玩按钮等内容。