装机DIY-配件价格比较

2024-03-16 06:30
文章标签 比较 价格 配件 diy 装机

本文主要是介绍装机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.lengthtrLastTd.textContent = "总价:" + totalPricetrLast.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 + casePriceconst 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>

在这里插入图片描述
在这里插入图片描述

这篇关于装机DIY-配件价格比较的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/814588。

相关文章

百度/小米/滴滴/京东，中台架构比较

百度/小米/滴滴/京东，中台架构比较

小米中台建设实践 01 小米的三大中台建设：业务+数据+技术 业务中台--从业务说起 在中台建设中，需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况，判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等，再结合其业务发展历程及业务现状，整理了中台架构的核心方法论，一是企业如何共享服务，二是如何为业务提供便利。
阅读更多...
关键字synchronized、volatile的比较

关键字synchronized、volatile的比较

关键字volatile是线程同步的轻量级实现，所以volatile性能肯定比synchronized要好，并且volatile只能修饰于变量，而synchronized可以修饰方法，以及代码块。随着JDK新版本的发布，synchronized关键字的执行效率上得到很大提升，在开发中使用synchronized关键字的比率还是比较大的。多线程访问volatile不会发生阻塞，而synchronize
阅读更多...
stl的sort和手写快排的运行效率哪个比较高？

stl的sort和手写快排的运行效率哪个比较高？

STL的sort必然要比你自己写的快排要快，因为你自己手写一个这么复杂的sort，那就太闲了。STL的sort是尽量让复杂度维持在O(N log N)的，因此就有了各种的Hybrid sort algorithm。 题主你提到的先quicksort到一定深度之后就转为heapsort，这种是introsort。 每种STL实现使用的算法各有不同，GNU Standard C++ Lib
阅读更多...
研究生生涯中一些比较重要的网址

研究生生涯中一些比较重要的网址

Mali GPU相关： 1.http://malideveloper.arm.com/resources/sdks/opengl-es-sdk-for-linux/ 2.http://malideveloper.arm.com/resources/tools/arm-development-studio-5/ 3.https://www.khronos.org/opengles/sdk/do
阅读更多...
性能测试工具 wrk,ab,locust,Jmeter 压测结果比较

性能测试工具 wrk,ab,locust,Jmeter 压测结果比较

前言 在开发服务端软件时，经常需要进行性能测试，一般我采用手写性能测试代码的方式进行测试，那有什么现成的好的性能测试工具吗？ 性能测试工具 wrk,ab,locust,Jmeter 压测结果比较 详见： 性能测试工具 wrk,ab,locust,Jmeter 压测结果比较 Jmeter性能测试 入门
阅读更多...
MongoDB学习—（6）MongoDB的find查询比较符

MongoDB学习—（6）MongoDB的find查询比较符

首先，先通过以下函数向BookList集合中插入10000条数据 function insertN(obj,n){var i=0;while(i<n){obj.insert({id:i,name:"bookNumber"+i,publishTime:i+2000})i++;}}var BookList=db.getCollection("BookList")调用函数，这样，BookList
阅读更多...
超声波清洗机哪个品牌比较好一点的？清洁力强的超声波清洗机品牌

超声波清洗机哪个品牌比较好一点的？清洁力强的超声波清洗机品牌

随着生活水平的不断提升和幸福感的增强，珠宝、饰品和眼镜等物品已成为许多家庭的常备之物。然而，这些贵重细小的物件易于积聚微尘与隐形细菌，长此以往可能悄悄影响家人的健康，毕竟细菌是肉眼难以察觉的隐患。超声波清洗机应运而生，它以高科技手段有效地解决了这一隐忧，深层清洁，守护家人免受微小污染物的潜在威胁。不过现在市面上超声波清洗机品牌挺多的，究竟有哪些品牌的超声波清洗机比较好一点呢？接下来就为大家带来四款
阅读更多...
【JavaScript】版本号和日期时间的比较

【JavaScript】版本号和日期时间的比较

JS使用 ‘>’ 运算符比较两个字符串大小时，会把字符串转换为ASCII码依次比较。 比较标准时间格式可以直接使用 ’ > ’ 比较； (2018-07-20格式)
阅读更多...
俩个float数之间比较大小

俩个float数之间比较大小

需求：俩个标识金额的浮点数比较大小。 问题：相等无法成立。经过var_dump()打印，俩个浮点数数值 一样大。 解决：把标识金额的浮点数乘以100，抓换成整形，在做比较。即可使相等成立
阅读更多...
UIFrameWork-基于UGUI-如何比较设计优劣

UIFrameWork-基于UGUI-如何比较设计优劣

一、简化需求 1、从界面1打开界面2，屏蔽界面1事件响应。 2、关闭界面2，恢复界面1的事件响应。 二、暴力方案 1、对象1设置屏蔽自身事件响应，对象1通知对象2显示。 2、对象1设置恢复自身事件响应，对象2通知对象1显示。 三、UIFrameWork方案 1、对象1通知管理器对象要打开的界面信息（字符串），管理器对象通知对象1屏蔽事件响应，管理器通知对象2显示。 2、对象2通知管
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2