首页编写一个JavaScript程序实现，通过键盘输入将你自己的姓名、学号、性别等信息存入并输出到网页

编写一个JavaScript程序实现，通过键盘输入将你自己的姓名、学号、性别等信息存入并输出到网页

时间: 2024-12-23 17:15:14 浏览: 9

在JavaScript中，你可以创建一个简单的HTML页面配合JavaScript来实现这个功能。首先，创建一个HTML表单用于用户输入，然后添加一个按钮触发数据提交。下面是一个基本的示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人信息录入</title> <style> #info { margin-bottom: 20px; } </style> </head> <body> <h1>请输入您的信息:</h1> <form id="personalInfoForm"> <label for="name">姓名:</label><br> <input type="text" id="name" name="name"><br> <label for="studentId">学号:</label><br> <input type="text" id="studentId" name="studentId"><br> <label for="gender">性别:</label><br> <select id="gender" name="gender"> <option value="male">男</option> <option value="female">女</option>  </select><br> <button onclick="submitData()">提交</button> </form> <div id="infoDisplay"></div> <script> function submitData() { const formData = { name: document.getElementById('name').value, studentId: document.getElementById('studentId').value, gender: document.getElementById('gender').value }; // 将数据清空以便下一次输入 document.getElementById('name').value = ''; document.getElementById('studentId').value = ''; // 输出数据到网页 document.getElementById('infoDisplay').innerHTML = `姓名: ${formData.name}, 学号: ${formData.studentId}, 性别: ${formData.gender}`; } </script> </body> </html> ``` 在这个例子中，当用户点击"提交"按钮时，`submitData()`函数会被调用，获取输入框中的值，并将其显示在`<div id="infoDisplay">`元素中。

阅读全文