如何使用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上看到一个有效的示例及其代码。