利用web前端生成一段网吧管理系统用户状态代码
时间: 2023-08-24 11:04:56 浏览: 50
以下是一个简单的网吧管理系统用户状态的代码,使用 HTML、CSS 和 JavaScript 实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>网吧管理系统 - 用户状态</title>
<style>
.container {
margin: 20px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
.status {
margin: 10px;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
.status p {
font-size: 16px;
line-height: 1.5;
margin: 0 0 10px;
}
.status .online {
color: green;
}
.status .offline {
color: red;
}
.status .warning {
color: orange;
}
</style>
</head>
<body>
<div class="container">
<h1>网吧管理系统 - 用户状态</h1>
<div class="status online">
<p>用户名:张三</p>
<p>状态:在线</p>
<p>上机时间:2021-07-01 10:00:00</p>
<p>剩余时间:2 小时 30 分钟</p>
</div>
<div class="status offline">
<p>用户名:李四</p>
<p>状态:离线</p>
<p>上机时间:2021-07-02 14:00:00</p>
<p>离线时间:1 小时 20 分钟</p>
</div>
<div class="status warning">
<p>用户名:王五</p>
<p>状态:警告</p>
<p>上机时间:2021-07-03 12:00:00</p>
<p>剩余时间:10 分钟</p>
</div>
</div>
</body>
</html>
```
这段代码包含一个容器 `.container` 和三个用户状态 `.status`。每个用户状态包含用户名、状态、上机时间、以及剩余时间或离线时间的信息。用户状态的颜色根据状态不同而不同,可以通过 CSS 的类 `.online`、`.offline` 和 `.warning` 来实现。