装机DIY-配件价格比较

计算机配件价格比较

🚀🚀🚀🚀最近无事总刷到DIY装机视频，自己也有兴趣，同时这段时间也在学前端，发现每次比较价格都有重新搜，重新计算，且不同配置也不好比较，所以写了个粗略版本的计算器，先看效果。

在这里插入图片描述

这个基于HTML、CSS和JavaScript的网页旨在帮助用户比较不同渠道和品牌的计算机配件价格。

该页面提供了输入框和下拉菜单，让用户输入CPU、主板、显卡、内存条、硬盘、电源和机箱等配件的价格信息，并根据输入的数据生成一个汇总表格，展示了每个配件的渠道、品牌和价格，并计算了所有配件的总价格。

一、界面功能

选择渠道和品牌: 用户可以通过下拉菜单选择不同的渠道和品牌。
输入价格: 提供了价格输入框，方便用户输入各个配件的价格信息。
计算价格: 点击“计算价格”按钮后，网页会将用户输入的价格数据汇总，生成一个表格展示总价格以及每个配件的详细信息。

二、改进空间

虽然这个网页提供了基本的功能，但仍有改进的空间：

增加更多配件选项: 包括更多类型的配件，使得网页更全面。
优化用户界面: 改善界面设计和交互，提高用户体验。
自动获取价格功能: 整合数据获取功能，使用户能够自动获取最新价格。

这个网页是一个简单但有潜力的起点，通过进一步优化和扩展，可以为用户提供更加全面和便捷的计算机配件价格比较服务。

三、源码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>计算机配件装机价格</title>
  <style>
    table {
      border-collapse: collapse;
      border: 1px solid #dfe2e5;
      margin-bottom: 20px;
    }

    th,
    td {
      border: 1px solid #dfe2e5;
      padding: 6px 13px;
    }

    th {
      background-color: #f3f4f6;
      font-weight: bold;
    }

    td {
      background-color: #fff;
    }

    tbody tr:nth-child(even) td {
      background-color: #f6f8fa;
    }

    select,
    input[type="number"],
    input[type="text"],
    button {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      margin-bottom: 5px;
    }

    button {
      background-color: #0366d6;
      color: white;
      cursor: pointer;
    }

    button:hover {
      background-color: #065fd4;
    }

    #outputTablesContainer {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      /* 图片间隔 */
    }

    .active {
      /* 添加你想要的样式 */
      border-collapse: separate;
      border-spacing: 0;
    }

    .active th {
      background-color: #0366d6;
      color: white;
      font-weight: bold;
    }

    .active td {
      background-color: #f3f4f6;
      color: #333;
    }

    .active tbody tr:nth-child(even) td {
      background-color: #fff;
    }

    .active .total td {
      text-align: center;
      font-weight: bold;
      background-color: #f3f4f6;
      color: #333;
    }
  </style>
</head>

<body>
  <div id="box" style="width: auto;height: 330px;">
    <div>
      <table id="inputTable">
        <tr>
          <th>名称</th>
          <th>渠道</th>
          <th>品牌</th>
          <th>价格</th>
        </tr>
        <tr>
          <td>CPU</td>
          <td>
            <select id="cpuChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>

          <td><input type="text" id="cpuBrand"></td>
          <td><input type="number" id="cpuPrice"></td>
        </tr>
        <tr>
          <td>主板</td>
          <td>
            <select id="motherboardChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="motherboardBrand"></td>
          <td><input type="number" id="motherboardPrice"></td>
        </tr>
        <tr>
          <td>显卡</td>
          <td>
            <select id="gpuChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="gpuBrand"></td>
          <td><input type="number" id="gpuPrice"></td>
        </tr>
        <tr>
          <td>内存条</td>
          <td>
            <select id="ramChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="ramBrand"></td>
          <td><input type="number" id="ramPrice"></td>
        </tr>
        <tr>
          <td>硬盘</td>
          <td>
            <select id="hddChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="hddBrand"></td>
          <td><input type="number" id="hddPrice"></td>
        </tr>
        <tr>
          <td>电源</td>
          <td>
            <select id="psuChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="psuBrand"></td>
          <td><input type="number" id="psuPrice"></td>
        </tr>
        <tr>
          <td>机箱</td>
          <td>
            <select id="caseChannel">
              <option value="拼多多" selected>拼多多</option>
              <option value="淘宝">淘宝</option>
              <option value="京东">京东</option>
              <!-- 添加更多选项，如果需要的话 -->
            </select>
          </td>
          <td><input type="text" id="caserand"></td>
          <td><input type="number" id="casePrice"></td>
        </tr>
      </table>
      <button id="cacl">计算价格</button>
    </div>
    <hr>

  </div>



  <!-- 输出结果表格 -->
  <div id="outputTablesContainer" style="margin-top: 100px;"></div>
  <script>
    class MyTable {
      constructor(channel, brand, price) {
        this.channel = channel;
        this.brand = brand;
        this.price = price;
      }
    }
    function generateTable(headers, data, totalPrice) {
      let table = document.createElement('table');
      table.classList.add('active')
      let thead = document.createElement('thead');
      let tbody = document.createElement('tbody');
      let tr = document.createElement('tr');
      // 添加表头
      headers.forEach(header => {
        let th = document.createElement('th');
        th.appendChild(document.createTextNode(header));
        tr.appendChild(th);
      });

      thead.appendChild(tr);
      table.appendChild(thead);

      // 添加数据行
      for (let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr');
        for (let val in data[i]) {
          let td = document.createElement('td');
          td.textContent = data[i][val]
          tr.appendChild(td);
        }
        tbody.appendChild(tr);
      }
      let trLast = document.createElement('tr');
      let trLastTd = document.createElement('td');
      trLastTd.colSpan = headers.length
      trLastTd.textContent = "总价:" + totalPrice
      trLast.appendChild(trLastTd)

      trLast.classList.add('total')
      tbody.appendChild(trLast)

      table.appendChild(tbody);
      // 找到需要放置表格的 <div>
      const tableContainer = document.getElementById('outputTablesContainer');
      tableContainer.appendChild(table);
    }



    function getData() {
      let cpuPrice = parseFloat(document.getElementById("cpuPrice").value);
      let motherboardPrice = parseFloat(document.getElementById("motherboardPrice").value);
      let gpuPrice = parseFloat(document.getElementById("gpuPrice").value);
      let ramPrice = parseFloat(document.getElementById("ramPrice").value);
      let hddPrice = parseFloat(document.getElementById("hddPrice").value);
      let psuPrice = parseFloat(document.getElementById("psuPrice").value);
      let casePrice = parseFloat(document.getElementById("casePrice").value);
      let cpuChannel = document.getElementById("cpuChannel").value;
      let cpuBrand = document.getElementById("cpuBrand").value;
      let motherboardChannel = document.getElementById("motherboardChannel").value;
      let motherboardBrand = document.getElementById("motherboardBrand").value;
      let gpuChannel = document.getElementById("gpuChannel").value;
      let gpuBrand = document.getElementById("gpuBrand").value;
      let ramChannel = document.getElementById("ramChannel").value;
      let ramBrand = document.getElementById("ramBrand").value;
      let hddChannel = document.getElementById("hddChannel").value;
      let hddBrand = document.getElementById("hddBrand").value;
      let psuChannel = document.getElementById("psuChannel").value;
      let psuBrand = document.getElementById("psuBrand").value;
      let caseChannel = document.getElementById("caseChannel").value;
      let caseBrand = document.getElementById("caserand").value;
      let totalPrice = cpuPrice + motherboardPrice + gpuPrice + ramPrice + hddPrice + psuPrice + casePrice
      const headers = ['渠道', '品牌', '价格'];
      const tableData = [];
      tableData.push(new MyTable(cpuChannel, cpuBrand, cpuPrice))
      tableData.push(new MyTable(motherboardChannel, motherboardBrand, motherboardPrice))
      tableData.push(new MyTable(gpuChannel, gpuBrand, gpuPrice))
      tableData.push(new MyTable(ramChannel, ramBrand, ramPrice))
      tableData.push(new MyTable(hddChannel, hddBrand, hddPrice))
      tableData.push(new MyTable(psuChannel, psuBrand, psuPrice))
      tableData.push(new MyTable(caseChannel, caseBrand, casePrice))

      console.log(tableData)
      generateTable(headers, tableData, totalPrice)
    }

    document.querySelector('#cacl').addEventListener('click', function () {
      getData()
    })

  </script>
</body>

</html>