首页设计一个用于输入的页面，能够输入姓名，点击按钮时跳转到输出页面。设计一个输出页面，能够显示输入页面输入的姓名

设计一个用于输入的页面，能够输入姓名，点击按钮时跳转到输出页面。设计一个输出页面，能够显示输入页面输入的姓名

时间: 2024-01-21 13:17:22 浏览: 117

好的，我给您提供一个简单的 HTML 和 JavaScript 的代码，实现您的需求。输入页面代码： ```html <!DOCTYPE html> <html> <head> <title>输入姓名</title> </head> <body> <label for="nameInput">请输入姓名：</label> <input type="text" id="nameInput" name="name"><br><br> <button onclick="submitName()">提交</button> <script type="text/javascript"> function submitName() { var name = document.getElementById("nameInput").value; window.location.href = "output.html?name=" + name; } </script> </body> </html> ``` 输出页面代码： ```html <!DOCTYPE html> <html> <head> <title>输出姓名</title> </head> <body> <h1>您输入的姓名是：</h1> <p id="nameOutput"></p> <script type="text/javascript"> var name = getQueryVariable("name"); document.getElementById("nameOutput").innerHTML = name; function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&"); for (var i=0; i<vars.length; i++) { var pair = vars[i].split("="); if (pair[0] == variable) { return decodeURIComponent(pair[1].replace(/\+/g, "%20")); } } return ""; } </script> </body> </html> ``` 输入页面中，我们使用了一个文本输入框和一个提交按钮。当用户点击提交按钮时，我们获取到文本输入框中的姓名，并且使用 `window.location.href` 实现跳转到输出页面。在跳转的过程中，我们将姓名作为参数传递给输出页面。输出页面中，我们使用了一个标题和一个段落标签来显示用户输入的姓名。我们使用 JavaScript 中的 `getQueryVariable` 函数来获取输出页面中作为参数传递过来的姓名，并且将它显示在页面上。希望这个简单的代码能够满足您的需求。

阅读全文