---
title: Tip Calculator
localeTitle: 电脑类型
---
## 提示计算器
小费计算器是一种计算器，可根据总账单的百分比计算小费。
## 第1步 - HTML：
我们创建一个表单以输入首选金额：
```html
Tip Calculator
```
## 第2步 - CSS：
您可以根据需要设计样式。您还可以使用CSS隐藏结果，并在用户填写表单后通过JavaScript显示结果：
```css
#results {
display:none;
}
```
## 第3步：JavaScript：
我们添加onchange事件。当用户与表单交互时，会发生onchange事件。
此操作将执行一个函数，该函数根据百分比提示计算最终的帐单金额，然后返回结果。
```javascript
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 Results
document.getElementById('results').style.display='block'
}
```
您可以在[Codepen.io](https://codepen.io/voula12/pen/djrZGw)上看到一个工作示例及其代码。