设计一个用于输入的页面,能够输入姓名,点击按钮时跳转到输出页面。 设计一个输出页面,能够显示输入页面输入的姓名。
时间: 2024-01-21 15:17:31 浏览: 14
好的,我可以帮你设计这样的页面。这里我假设你想使用 HTML 和 JavaScript 来实现页面,以下是代码示例:
输入页面(index.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>输入页面</title>
</head>
<body>
<label for="name">请输入姓名:</label>
<input type="text" id="name" name="name"><br><br>
<button onclick="submitName()">提交</button>
<script>
function submitName() {
var name = document.getElementById("name").value;
window.location.href = "output.html?name=" + name;
}
</script>
</body>
</html>
```
输出页面(output.html):
```html
<!DOCTYPE html>
<html>
<head>
<title>输出页面</title>
</head>
<body>
<h1>您输入的姓名是:</h1>
<h2 id="name"></h2>
<script>
var name = getParameterByName("name");
document.getElementById("name").innerHTML = name;
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return "";
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
</body>
</html>
```
在输入页面中,我们使用一个文本框来输入姓名,然后通过 JavaScript 中的 `submitName` 函数来处理提交操作。在该函数中,我们获取文本框中的值,并将其作为参数传递给输出页面的 URL。这里我们使用了 `window.location.href` 属性来实现页面跳转。
在输出页面中,我们通过 JavaScript 中的 `getParameterByName` 函数来获取 URL 中的参数值,并将其显示在页面上。该函数使用了正则表达式来获取指定名称的参数值。同时,我们在页面中使用了一个空的 `<h2>` 元素来显示姓名,该元素中的内容将在页面加载时动态更新。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)