javascript
如何使用HTML，CSS和JavaScript构建技巧计算器
A Tip Calculator is a calculator that calculates a tip based on the percentage of the total bill.
小費計算器是根據總賬單的百分比計算小費的計算器。
Let's build one now.
讓我們現在建立一個。
第1步-HTML： (Step 1 - HTML:)
We create a form in order to enter the preferred amount:
我們創建一個表格以輸入首選金額：
<!doctype html> <html lang="en"><head><title>Tip Calculator</title><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"></head><body class="bg-dark"><div class="container"><div class="row"><div class="col-md-6 mx-auto"><div class="card card-body text-center mt-5"><h1 class="heading display-5 pb-3">Tip Calculator</h1><form id="tip-form"><div class="form-group"><div class="input-group"><span class="input-group-addon">$</span><input type="number" class="form-control" id="billTotal" placeholder="Total Bill"></div></div><div class="form-group tipPersent"><div class="input-group"><label for="">Tip:</label><input type="range" class="form-control" id="tipInput" value="0"><span class="input-group-addon" id="tipOutput"></span></div></div></form><hr><!-- RESULTS --><div id="results" class="pt-4"><h5>Results</h5><div class="form-group"><div class="input-group"><span class="input-group-addon">Tip amount</span><input type="number" class="form-control" id="tipAmount" disabled></div></div><div class="form-group"><div class="input-group"><span class="input-group-addon">Total Bill with Tip</span><input type="number" class="form-control" id="totalBillWithTip" disabled></div></div></div></div></div></div></div><!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script></body> </html>第2步-CSS： (Step 2 - CSS:)
You design the style however you want. You can also use CSS to hide the results and show them through JavaScript after the user fills in the form:
您可以根據需要設計樣式。 您還可以使用CSS隱藏結果，并在用戶填寫表單后通過JavaScript顯示結果：
#results {display:none;}步驟3：JavaScript： (Step 3: JavaScript:)
We add an onchange event. The onchange event occurs when the user interacts with the form.
我們添加一個onchange事件。 當用戶與表單交互時，會發生onchange事件。
This action will execute a function that computes the final bill amount based on the percentage tip, then returns the results.
該操作將執行一個函數，該函數根據百分比提示計算最終的帳單金額，然后返回結果。
document.querySelector('#tip-form').onchange = function(){var bill = Number(document.getElementById('billTotal').value);var tip = document.getElementById('tipInput').value;document.getElementById('tipOutput').innerHTML = `${tip}%`;var tipValue = bill * (tip/100)var finalBill = bill + tipValue console.log(finalBill) var tipAmount = document.querySelector('#tipAmount') var totalBillWithTip = document.querySelector('#totalBillWithTip')tipAmount.value = tipValue.toFixed(2);totalBillWithTip.value =finalBill.toFixed(2);//Show Resultsdocument.getElementById('results').style.display='block' }You can see a working example and its code on Codepen.io.
您可以在Codepen.io上看到一個有效的示例及其代碼。
翻譯自: https://www.freecodecamp.org/news/how-to-build-a-tip-calculator-with-html-css-and-javascript/
總結
以上是生活随笔為你收集整理的如何使用HTML，CSS和JavaScript构建技巧计算器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 梦到别人结婚啥意思
- 下一篇： 归约归约冲突_JavaScript映射，