运用js,css,html编写一个简单的选课系统,每门科目人数上限20人,
时间: 2024-02-25 19:53:07 浏览: 28
好的,我可以为您提供一个简单的选课系统的示例代码。以下是使用HTML、CSS和JavaScript实现的选课系统的代码。
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>选课系统</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>选课系统</h1>
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br><br>
<label for="subject">科目:</label>
<select id="subject" name="subject">
<option value="math">数学</option>
<option value="english">英语</option>
<option value="physics">物理</option>
</select><br><br>
<input type="button" value="选课" onclick="register()">
</form>
<div id="message"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
h1 {
text-align: center;
}
form {
margin: 0 auto;
width: 50%;
}
label {
display: inline-block;
width: 80px;
}
input[type="text"], select {
width: 200px;
}
input[type="button"] {
margin-left: 80px;
}
#message {
margin-top: 20px;
text-align: center;
font-weight: bold;
}
```
JavaScript代码:
```javascript
function register() {
var name = document.getElementById("name").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message");
// 检查是否已经选过该科目
if (localStorage.getItem(name + ":" + subject) !== null) {
message.innerHTML = "您已经选过该科目";
return;
}
// 检查该科目是否已经满员
var count = localStorage.getItem(subject);
if (count !== null && count >= 20) {
message.innerHTML = "该科目已满员";
return;
}
// 选课成功
localStorage.setItem(name + ":" + subject, "true");
if (count === null) {
localStorage.setItem(subject, 1);
} else {
localStorage.setItem(subject, parseInt(count) + 1);
}
message.innerHTML = "选课成功";
}
```
这段代码实现了一个简单的选课系统,包括姓名、科目和选课按钮。当用户点击选课按钮时,JavaScript代码会检查该用户是否已经选过该科目,以及该科目是否已经满员。如果选课成功,代码会将选课信息存储在浏览器的localStorage中。
需要注意的是,这段代码并没有使用数据库来存储选课信息,而是使用了浏览器的localStorage。这种方法只适用于小规模的系统,如果需要处理大量数据,建议使用数据库来存储信息。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)
![](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)