燃气公司客户前端代码

以下是一个简单的燃气公司客户前端代码示例：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>燃气公司客户信息</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>燃气公司客户信息</h1>

  <div id="customer-form">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>

    <label for="address">地址：</label>
    <input type="text" id="address" name="address" required>

    <label for="meter-reading">燃气表读数：</label>
    <input type="number" id="meter-reading" name="meter-reading" required>

    <button id="submit-btn" onclick="submitForm()">提交</button>
  </div>

  <div id="customer-list">
    <h2>客户列表</h2>
    <ul id="list"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码（styles.css）：

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

#customer-form {
  margin-bottom: 20px;
}

#customer-form label {
  display: block;
  margin-bottom: 5px;
}

#customer-form input[type="text"],
#customer-form input[type="number"] {
  width: 200px;
  padding: 5px;
  font-size: 16px;
}

#submit-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

#customer-list h2 {
  margin-bottom: 10px;
}

#list {
  list-style-type: none;
  padding: 0;
}

#list li {
  margin-bottom: 5px;
}

JavaScript代码（script.js）：

function submitForm() {
  var name = document.getElementById("name").value;
  var address = document.getElementById("address").value;
  var meterReading = document.getElementById("meter-reading").value;

  var customer = {
    name: name,
    address: address,
    meterReading: meterReading
  };

  addCustomerToList(customer);
  clearForm();
}

function addCustomerToList(customer) {
  var list = document.getElementById("list");
  var listItem = document.createElement("li");
  listItem.innerHTML = "姓名：" + customer.name + "，地址：" + customer.address + "，燃气表读数：" + customer.meterReading;
  list.appendChild(listItem);
}

function clearForm() {
  document.getElementById("name").value = "";
  document.getElementById("address").value = "";
  document.getElementById("meter-reading").value = "";
}

这个前端代码包括一个表单，用于输入客户的姓名、地址和燃气表读数。用户可以点击"提交"按钮将客户信息添加到下方的客户列表中。点击"提交"按钮时，会调用submitForm()函数，该函数获取表单中的值，并创建一个包含客户信息的对象。然后，它调用addCustomerToList()函数将客户信息添加到列表中，并调用clearForm()函数清空表单