使用html,js,css实现学生管理界面

发布于 2024-06-12 21:20:18

创建一个简单的学生管理界面可以通过HTML来构建结构，CSS用于样式设计，JavaScript用来增加交互性。以下是一个基础的学生管理界面的示例代码：

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>学生管理界面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>学生管理</h1>
        <input type="text" id="studentName" placeholder="输入学生姓名">
        <input type="number" id="studentAge" placeholder="输入学生年龄">
        <button onclick="addStudent()">添加学生</button>
        <ul id="studentList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    font-family: Arial, sans-serif;
}

.container {
    width: 80%;
    margin: auto;
    padding-top: 20px;
}

input[type="text"],
input[type="number"] {
    display: block;
    margin-bottom: 10px;
    width: 300px;
    padding: 5px;
}

button {
    padding: 5px 10px;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
}

JavaScript (script.js)

function addStudent() {
    var name = document.getElementById('studentName').value;
    var age = document.getElementById('studentAge').value;

    // 简单的错误检查
    if (!name || !age) {
        alert("姓名和年龄都是必填项。");
        return;
    }

    // 创建一个新的列表项
    var li = document.createElement('li');
    li.textContent = `学生姓名: ${name}, 学生年龄: ${age}`;

    // 将新列表项添加到列表中
    document.getElementById('studentList').appendChild(li);

    // 清空输入框
    document.getElementById('studentName').value = '';
    document.getElementById('studentAge').value = '';
}

这个示例实现了一个基本的学生管理界面，允许用户输入学生的姓名和年龄，然后点击“添加学生”按钮将学生信息添加到列表中。CSS用来增加一些基本的样式，使界面更加友好。

请注意，为了简单起见，上述代码中并没有实现数据持久化功能，当页面刷新或者关闭时，添加的学生信息将会丢失。在实际应用中，您可能需要使用数据库或其他存储解决方案来保存数据。