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:

我们创建一个表格以输入首选金额：

          
        
        
        
        
               
    
      
     
        
      
          
       
            
        
Tip Calculator
            
        
              
         
 
          
 
           $ 
            
          
 
         
              
         
 
          
 
           Tip: 
            
            
          
 
         
            
        
            
        
            
                    
        
              
         
Results
              
         
 
          
 
           Tip amount 
            
          
 
         
              
         
 
          
 
           Total Bill with Tip 
            
          
 
         
            
        
          
       
        
      
      
     
    
    
    
        
                  

第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 + tipValueconsole.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'}

You can see a working example and its code on .

您可以在上看到一个有效的示例及其代码。

翻译自: