如何使用 HTML 和 JavaScript 创建重量转换器？ - 芒果文档

📌 相关文章

📜 如何使用 HTML 和 JavaScript 创建重量转换器？

📅 最后修改于: 2021-11-08 06:07:22 🧑 作者: Mango

介绍：

我们日常生活中通常所说的“重量”，理论上是指质量，它计算的是物体中物质的数量。但是我们可以通过简单地乘以或除以地球的重力加速度 g 来几乎互换地使用质量和重量，这是因为地球施加在我们身上的重力近似恒定。为了防止误解或不必要的混淆，我们谈论的是质量单位，但我们将它们称为重量单位。

重量转换器可帮助您在公斤、克、磅、盎司和石头之间进行转换。所有这些都是重量和质量的测量。这对于初学者在 javascript 中训练他们的逻辑非常有用。

创建权重转换器

第 1 步：添加 HTML

首先，您必须创建一个输入字段，以将一个重量测量值转换为另一个重量测量值。
```
  
  Kilograms
  
  
  
```
标签用作输入字段，用户可以在其中输入数据，占位符是指定简短提示的属性，用于描述用户输入的元素的预期值。

oninput是在元素获得用户输入时发生的事件，即当或元素的值发生更改时。在上面的代码中，这个属性包含值“kiloweightConvert(this.value)”，它在<strong>oninput</strong>事件触发时<strong>起作用</strong>。</p> <p>当元素的值发生更改时，会发生<strong>onchange</strong>事件。</p> <p>这两个事件是相似的，但不同的是<strong>oninput</strong>事件在元素的值改变后被激活，而<strong>onchange</strong>事件在元素失去焦点、内容改变后发生。 <strong>onchange</strong>事件也适用于 <select> 元素。</p> <p><strong>其次，为转换结果创建一个输出字段。</strong> </p> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"> <p>Pounds: <span id="Pounds"></span></p> <p>Ounces: <span id="Ounces"></span></p> <p>Grams: <span id="Grams"></span></p> <p>Stones: <span id="Stones"></span></p> </code></pre> </div> </div> <p> <strong><span></strong>标签是内联元素和内容的通用内联容器，用于标记文本的一部分，用于对内联元素进行分组和应用样式。</p> </li> <li> <p><strong>第 2 步：添加 JavaScript</strong></p> <p></p> <div class="_ap_apex_ad" id="1b4172cd-acc7-4363-9184-3fadd3cdabcf" style="min-height:280px"></div> <p></p> <p>现在，是时候使用 javascript 构建功能了。以下函数将评估值并返回结果。 </p> <div class="noIdeBtnDiv"> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace">//function that evaluate the value and returns result function kiloweightConvert(value) { document.getElementById("Pounds").innerHTML=value*2.2046; document.getElementById("Ounces").innerHTML=value*35.274; document.getElementById("Grams").innerHTML=value*1000; document.getElementById("Stones").innerHTML=value*0.1574; } </code></pre> </div> </div> <p>如果使用<strong>innerHTML</strong> ，则可以在不刷新页面的情况下修改页面内容。这将使网站对用户输入的响应速度更快。在 JavaScript 代码中， <strong>innerHTML</strong>属性还可以与<strong>getElementById()</strong>一起使用，以引用 HTML 元素并修改其内容。 <strong>getElementById()</strong>方法返回一个元素对象，该对象表示一个元素，其 id 属性与指定的字符串匹配。</p> </li> </ul> <p><strong>您还可以尝试以下测量方法来制作重量转换器。</strong></p> <p>要了解不同单位之间的转换，请随意使用下面给出的重量转换表。此转换表对于根据您的喜好设计重量转换器非常有用。 </p> <figure class="table"> <table> <tbody> <tr> <td colspan="2"><b>Pounds to other Measurements</b></td> <td colspan="2"><b>Ounces to other Measurements</b></td> </tr> <tr> <td><strong>Pounds to Kilograms</strong></td> <td>kilograms=lb/2.2046</td> <td><strong>Ounces to Pounds</strong></td> <td>pounds=oz*0.0625</td> </tr> <tr> <td><strong>Pounds to Ounces</strong></td> <td>ounces=lb*16</td> <td><strong>Ounces to Kilograms</strong></td> <td>kilograms=oz/35.274</td> </tr> <tr> <td><strong>Pounds to Grams</strong></td> <td>grams=lb/0.0022046</td> <td><strong>Ounces to Grams</strong></td> <td>grams=oz/0.035274</td> </tr> <tr> <td><strong>Pounds to Stones</strong></td> <td>stones=lb*0.071429</td> <td><strong>Ounces to Stones</strong></td> <td>stones=oz*0.0044643</td> </tr> </tbody> </table> </figure> <figure class="table"> <table> <tbody> <tr> <td colspan="2"><b>Grams to other Measurements </b></td> <td colspan="2"><b>Stones to other Measurements</b></td> </tr> <tr> <td><strong>Grams to Pounds</strong></td> <td>pounds=g*0.0022046</td> <td><strong>Stones to Pounds</strong></td> <td>ponds=st*14</td> </tr> <tr> <td><strong>Grams to Kilograms</strong></td> <td>kilograms=g/1000</td> <td><strong>Stones to Kilograms</strong></td> <td>kilograms=st/0.15747</td> </tr> <tr> <td><strong>Grams to Ounces</strong></td> <td>ounces=g*0.035274</td> <td><strong>Stones to Ounces</strong></td> <td>ounces=st*224</td> </tr> <tr> <td><strong>Grams to Stones</strong></td> <td>stones=g*0.00015747</td> <td><strong>Stones to Grams</strong></td> <td>grams=st/0.00015747</td> </tr> </tbody> </table> </figure> <p><b>示例：</b>下面给出了如何将值从千克转换为其他测量值： </p> <div class="hcb_wrap"> <pre class="prism line-numbers lang-html" data-lang="HTML"><code class="replace"><!DOCTYPE html> <html> <head> <title>Weight Converter</title>  <style> span { color: Green; } </style> </head> <body>  <h2 style="color: Green;">Weight Converter</h2> <p>Enter a value in the Kilograms field to convert :</p> <p>  <label>Kilograms</label>   <input id="Kilograms" type="number" placeholder="kilograms" oninput="kiloweightConvert(this.value)" onchange="kiloweightConvert(this.value)" /> </p>  <p>Pounds: <span id="Pounds"></span></p> <p>Ounces: <span id="Ounces"></span></p> <p>Grams: <span id="Grams"></span></p> <p>Stones: <span id="Stones"></span></p> <script> //function that evaluates the weight and return result function kiloweightConvert(value) { document.getElementById("Pounds").innerHTML = value * 2.2046; document.getElementById("Ounces").innerHTML = value * 35.274; document.getElementById("Grams").innerHTML = value * 1000; document.getElementById("Stones").innerHTML = value * 0.1574; } </script> </body> </html> </code></pre> </div> <p><b>输出：</b> <br/><img class="img-fluid" sizes="100vw" src="https://mangodoc.oss-cn-beijing.aliyuncs.com/geek8geeks/How_to_create_a_weight_converter_with_HTML_and_JavaScript_?_0.jpg" srcset="https://media.geeksforgeeks.org/wp-content/uploads/20200909180137/weightconverter.png,"/></p> <div class="_ap_apex_ad" id="82d2079a-8120-480f-9fc7-5cda825d56e7" style="min-height:280px"></div> <p></p></div> </article> </div> </div> </div> </div> </div> <footer> <div class="bg-white text-center pb-1"> <p class="text-body-tertiary pt-3 lh-lg text-opacity-50" id="footer-text">Copyright © 2020 - 2024 版权所有 <br> <a href="https://beian.miit.gov.cn/" target="_blank" class="text-opacity-50 text-body-tertiary mt-1 mb-1">蜀ICP备20006366号-1</a> <br> Made with ❤️ in Chengdu </p> </div> </footer>  <script src="https://unpkg.com/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>  <script src="https://cdn.jsdelivr.net/npm/@meilisearch/instant-meilisearch/dist/instant-meilisearch.umd.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4"></script> <script src="https://imangodoc.com/static/javascript/meili_custom.js"></script>  <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script> </body> </html>