我想在jsp中设置一个居中的九宫格来放九个数字,并且点击后验证正确还是错误,正确跳转到页面Success.jsp,错误点击的数字变成NG
时间: 2024-06-12 11:05:57 浏览: 9
首先,在JSP页面中创建一个div,设置宽度和高度,设置样式为居中。
```
<div style="width: 300px; height: 300px; margin: 0 auto; text-align: center;">
```
然后,在该div中创建九个div,每个div代表一个数字,设置样式为方块状,设置数字,设置点击事件。
```
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(1)">1</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(2)">2</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(3)">3</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(4)">4</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(5)">5</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(6)">6</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(7)">7</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(8)">8</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(9)">9</div>
```
其中,每个数字的点击事件都调用了一个名为checkNumber的函数,并传递了该数字作为参数。
接下来,编写checkNumber函数,该函数判断传递进来的数字是否为正确的数字,如果是,就跳转到Success.jsp页面,如果不是,则将该数字的样式修改为“NG”。
```
<script>
function checkNumber(num) {
if (num == 5) {
window.location.href = "Success.jsp";
} else {
var div = document.getElementsByTagName("div")[num-1];
div.style.backgroundColor = "red";
div.innerHTML = "NG";
}
}
</script>
```
在该函数中,首先判断传递进来的数字是否为5,如果是,就通过window.location.href跳转到Success.jsp页面。
如果不是,就获取该数字对应的div元素,将其背景色修改为红色,将其文本内容修改为“NG”。
最终的JSP页面代码如下:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>九宫格</title>
</head>
<body>
<div style="width: 300px; height: 300px; margin: 0 auto; text-align: center;">
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(1)">1</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(2)">2</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(3)">3</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(4)">4</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(5)">5</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(6)">6</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(7)">7</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(8)">8</div>
<div style="width: 90px; height: 90px; display: inline-block; border: 1px solid black; cursor: pointer;" onclick="checkNumber(9)">9</div>
</div>
<script>
function checkNumber(num) {
if (num == 5) {
window.location.href = "Success.jsp";
} else {
var div = document.getElementsByTagName("div")[num-1];
div.style.backgroundColor = "red";
div.innerHTML = "NG";
}
}
</script>
</body>
</html>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)