JavaScript 网页设计案例：动态用户信息展示_javascript做一个综合性的动态网站,比如社团管理系统,社团成员信息动态表格操作,-优快云博客

本文链接：https://blog.youkuaiyun.com/2404_89475753/article/details/144673508

下面我们将使用 JavaScript、HTML 和 CSS 构建一个简单的网页，其中包含动态用户信息展示和交互功能。用户可以输入名字和年龄，点击按钮后，页面将动态显示用户信息。

1. 项目需求

用户输入： 用户可以通过输入框填写自己的名字和年龄。
展示信息： 点击提交按钮后，页面将显示用户的姓名和年龄，并且可以动态更新。
基本样式： 页面将具有简洁的样式，输入框和按钮可交互。

2. 结构设计

使用 HTML 来构建网页结构。
使用 CSS 来设置基本样式，使页面看起来整洁。
使用 JavaScript 来处理用户交互并动态更新页面。

3. 代码实现

HTML 代码（`index.html`）

html

复制代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dynamic User Info</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <h1>Enter Your Information</h1> <form id="userForm"> <label for="name">Name:</label> <input type="text" id="name" placeholder="Enter your name" required> <br> <label for="age">Age:</label> <input type="number" id="age" placeholder="Enter your age" required> <br> <button type="submit">Submit</button> </form> <div id="userInfo" class="hidden"> <h2>User Information</h2> <p id="displayName"></p> <p id="displayAge"></p> </div> </div> <script src="script.js"></script> </body> </html>

CSS 代码（`styles.css`）

css

复制代码

/* General Styles */ body { font-family: Arial, sans-serif; background-color: #f4f7fc; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); padding: 20px; width: 300px; text-align: center; } h1 { color: #333; } form { display: flex; flex-direction: column; margin-bottom: 20px; } label { text-align: left; margin-top: 10px; font-size: 14px; } input { padding: 8px; margin: 5px 0; border-radius: 4px; border: 1px solid #ccc; } button { padding: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } button:hover { background-color: #45a049; } /* Hidden section for user info */ .hidden { display: none; } #userInfo { margin-top: 20px; background-color: #f9f9f9; padding: 10px; border-radius: 8px; border: 1px solid #ddd; }

JavaScript 代码（`script.js`）

javascript

复制代码

// Get the form and the div that will show user information const userForm = document.getElementById('userForm'); const userInfo = document.getElementById('userInfo'); const displayName = document.getElementById('displayName'); const displayAge = document.getElementById('displayAge'); // Event listener for form submission userForm.addEventListener('submit', function(event) { event.preventDefault(); // Prevent form from refreshing the page // Get values from the input fields const name = document.getElementById('name').value; const age = document.getElementById('age').value; // Check if both fields are filled if (name && age) { // Display the user information displayName.textContent = `Name: ${name}`; displayAge.textContent = `Age: ${age}`; // Show the user information div userInfo.classList.remove('hidden'); } else { alert('Please fill out both fields!'); } });

4. 代码解析

HTML 部分：
- 页面包括了一个表单，用户可以输入姓名和年龄。
- 在用户提交信息后，会显示一个包含用户姓名和年龄的区域。
- userInfo 区域使用了一个 hidden 类来在提交前隐藏。
CSS 部分：
- 页面通过 flexbox 布局将内容居中。
- 表单、按钮和显示区域的样式被精心设计，确保页面看起来简洁且用户友好。
- .hidden 类用于隐藏用户信息区域，直到用户提交表单后显示。
JavaScript 部分：
- 在用户提交表单时，通过 addEventListener 捕捉到 submit 事件。
- 使用 event.preventDefault() 防止表单默认的页面刷新行为。
- 获取用户输入的姓名和年龄，并进行验证，如果输入有效，则显示用户信息。