启用JavaScript写一个网站写一个资产管理系统网站
时间: 2023-08-10 18:02:47 浏览: 52
好的,以下是一个简单的资产管理系统网站的前端代码,基于HTML、CSS和JavaScript实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>资产管理系统</title>
<style>
/* 样式表 */
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
}
table {
border-collapse: collapse;
margin: 20px auto;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
}
th {
background-color: #f2f2f2;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
cursor: pointer;
}
.alert {
padding: 20px;
background-color: #f44336;
color: white;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>资产管理系统</h1>
<table>
<thead>
<tr>
<th>资产编号</th>
<th>资产名称</th>
<th>资产类型</th>
<th>购入日期</th>
<th>购入价格</th>
</tr>
</thead>
<tbody id="asset-list">
<!-- 资产列表 -->
</tbody>
</table>
<button onclick="showAddAssetForm()">添加资产</button>
<div id="add-asset-form" style="display: none;">
<h2>添加资产</h2>
<div class="form-group">
<label for="asset-no">资产编号:</label>
<input type="text" id="asset-no">
</div>
<div class="form-group">
<label for="asset-name">资产名称:</label>
<input type="text" id="asset-name">
</div>
<div class="form-group">
<label for="asset-type">资产类型:</label>
<input type="text" id="asset-type">
</div>
<div class="form-group">
<label for="purchase-date">购入日期:</label>
<input type="text" id="purchase-date">
</div>
<div class="form-group">
<label for="purchase-price">购入价格:</label>
<input type="text" id="purchase-price">
</div>
<input type="submit" value="添加资产" onclick="addAsset()">
</div>
<div id="alert" class="alert" style="display: none;"></div>
<script>
// 假设已经有一些资产数据,放在一个数组中
var assets = [
{no: "0001", name: "电脑", type: "办公设备", date: "2021-01-01", price: 5000},
{no: "0002", name: "打印机", type: "办公设备", date: "2021-02-01", price: 1500},
{no: "0003", name: "桌子", type: "办公家具", date: "2021-03-01", price: 1000},
{no: "0004", name: "椅子", type: "办公家具", date: "2021-04-01", price: 800},
{no: "0005", name: "投影仪", type: "会议设备", date: "2021-05-01", price: 3000},
];
// 初始化页面,显示资产列表
function init() {
var table = document.getElementById("asset-list");
for (var i = 0; i < assets.length; i++) {
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + assets[i].no + "</td><td>" + assets[i].name + "</td><td>" + assets[i].type + "</td><td>" + assets[i].date + "</td><td>" + assets[i].price + "</td>";
table.appendChild(tr);
}
}
// 显示添加资产表单
function showAddAssetForm() {
var form = document.getElementById("add-asset-form");
form.style.display = "block";
}
// 添加资产
function addAsset() {
var no = document.getElementById("asset-no").value;
var name = document.getElementById("asset-name").value;
var type = document.getElementById("asset-type").value;
var date = document.getElementById("purchase-date").value;
var price = document.getElementById("purchase-price").value;
// 检查输入是否合法
if (no === "" || name === "" || type === "" || date === "" || price === "") {
var alert = document.getElementById("alert");
alert.innerHTML = "请填写所有资产信息!";
alert.style.display = "block";
return;
}
// 创建新的资产对象,并添加到数组中
var asset = {no: no, name: name, type: type, date: date, price: price};
assets.push(asset);
// 在表格中添加新的行
var table = document.getElementById("asset-list");
var tr = document.createElement("tr");
tr.innerHTML = "<td>" + no + "</td><td>" + name + "</td><td>" + type + "</td><td>" + date + "</td><td>" + price + "</td>";
table.appendChild(tr);
// 显示成功消息,并清空表单
var alert = document.getElementById("alert");
alert.innerHTML = "资产添加成功!";
alert.style.display = "block";
document.getElementById("asset-no").value = "";
document.getElementById("asset-name").value = "";
document.getElementById("asset-type").value = "";
document.getElementById("purchase-date").value = "";
document.getElementById("purchase-price").value = "";
}
// 在页面加载完成后初始化
window.onload = function() {
init();
};
</script>
</body>
</html>
```
以上代码实现了一个简单的资产管理系统网站,包括一个资产列表、一个添加资产表单和一个错误提示框。在页面加载完成后,会通过 JavaScript 初始化资产列表,将预设的资产数据按照表格的形式显示出来。当用户点击“添加资产”按钮时,会显示添加资产表单。用户填写完所有资产信息并点击“添加资产”按钮后,会将新的资产对象添加到数组中,并在表格中添加一行新的数据。如果用户未填写所有资产信息,则会显示一个错误提示框,提示用户填写完整资产信息。添加资产成功后,会显示一个成功消息,并清空表单。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)
![](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)