使用JavaScript创建一个利润和损失计算器

在本文章中，我们将使用HTML、CSS和JavaScript来创建一个利润和损失计算器，以添加基本功能并设计布局。利润和损失计算器主要用于计算在销售特定价格或商品后收到的金额或百分比。如果销售后收到的金额（销售价格）大于实际金额（成本价格），则被认为是利润，否则是损失。我们将成本价格表示为CP，销售价格表示为SP。

使用的公式：

利润： (SP) – (CP)
利润百分比： 利润/CP x 100
损失： (SP) – (CP)
损失百分比： 损失/CP x 100

步骤：

在body标签中，使用基本的HTML创建计算器的设计和布局。
使用CSS属性进行样式设置，如对齐、大小、背景等。
使用JavaScript调用函数来计算利润和损失。

示例： 我们将使用上述步骤来创建一个计算器。

HTML

<div class="plcalculate"> 
    <h1>Profit and Loss Calculator</h1> 
    <p> 
        Cost Price(CP) : 
        <input class="cost__price" type="number" /> 
    </p> 
  
    <p> 
        Selling Price(SP) : 
        <input class="selling__price" type="number" /> 
    </p> 
  
    <button onclick="Calculate()">Calculate</button> 
  
    <h2 class="profit__loss"></h2> 
    <h2 class="profit__loss__percentage"></h2> 
    <h2 class="nothing"></h2> 
  
</div>

CSS 代码:

CSS

body { 
  background-color: rgb(99, 226, 99); 
  font-family: Verdana; 
} 
.plcalculate { 
  text-align: center; 
  background-color: rgb(102, 155, 22); 
  width: 500px; 
  margin-left: auto; 
  margin-right: auto; 
  padding: 10px; 
} 
h2 { 
  color: white; 
}

JavaScript：

JavaScript

function Calculate() { 
  const CP = document.querySelector(".cost__price").value; 
  const SP = document.querySelector(".selling__price").value; 
  
  const profit__loss = document.querySelector(".profit__loss"); 
  const percentage = document.querySelector(".profit__loss__percentage"); 
  const nothing = document.querySelector(".nothing"); 
  
  profit__loss.innerHTML = ""; 
  percentage.innerHTML = ""; 
  nothing.innerHTML = ""; 
  
  if (SP > CP) { 
    const profit = SP - CP; 
    const profit_percent = ((profit / CP) * 100).toFixed(2); 
  
    profit__loss.innerHTML = "Profit : " + profit; 
    percentage.innerHTML = "Profit Percentage : " + profit_percent; 
  } 
  if (SP < CP) { 
    const loss = CP - SP; 
    const loss_percent = ((loss / CP) * 100).toFixed(2); 
  
    profit__loss.innerHTML = "Loss : " + loss; 
    percentage.innerHTML = "Loss Percentage : " + loss_percent; 
  } 
  if (SP == CP) { 
    nothing.innerHTML = "No Profit No Loss"; 
  } 
};

解释： 当用户在输入框中输入CP和SP金额并点击计算按钮时，会触发Calculate()函数，使用onclick事件属性。在这个函数中，我们使用DOM querySelector()方法通过类名选择输入框中的值并存到一个变量中。如果SP金额大于CP金额，则Calculate()函数将计算利润和利润百分比，否则将计算亏损和亏损百分比，然后使用innerHTML属性显示文本。

完整代码：

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Profit and Loss Calculator</title> 
    <style> 
        body{ 
            background-color: rgb(99, 226, 99); 
            font-family: Verdana; 
        } 
        .plcalculate{ 
            text-align: center; 
            background-color: rgb(102, 155, 22); 
            width: 500px; 
            margin-left: auto; 
            margin-right: auto; 
            padding: 10px; 
        } 
        h2{ 
            color: white; 
        } 
    </style> 
</head> 
<body> 
    <div class="plcalculate"> 
        <h1>Profit and Loss Calculator</h1> 
  
        <p>Cost Price(CP)   : 
            <input class="cost__price" type="number"  /> 
        </p> 
  
        <p>Selling Price(SP)   : 
            <input class="selling__price" type="number" /> 
        </p> 
  
        <button onclick="Calculate()">Calculate</button> 
  
        <p> 
              <h2 class="profit__loss"></h2> 
            <h2 class="profit__loss__percentage"></h2> 
            <h2 class="nothing"></h2> 
        </p> 
    </div> 
  
    <script> 
        function Calculate(){ 
        const CP= document.querySelector(".cost__price").value; 
        const SP= document.querySelector(".selling__price").value; 
          
        const profit__loss=document.querySelector(".profit__loss"); 
        const percentage=document.querySelector(".profit__loss__percentage"); 
        const nothing=document.querySelector(".nothing"); 
  
        profit__loss.innerHTML=""; 
        percentage.innerHTML=""; 
        nothing.innerHTML=""; 
  
        if(SP>CP){ 
            const profit=SP - CP; 
            const profit_percent= ((profit/CP)*100).toFixed(2); 
  
            profit__loss.innerHTML="Profit : "+ profit; 
            percentage.innerHTML="Profit Percentage : "+ profit_percent; 
        } 
        if(SP<CP){ 
            const loss=CP - SP; 
            const loss_percent= ((loss/CP)*100).toFixed(2); 
  
            profit__loss.innerHTML="Loss : "+ loss; 
            percentage.innerHTML="Loss Percentage : "+ loss_percent; 
        } 
        if(SP==CP){ 
            nothing.innerHTML="No Profit No Loss"; 
        } 
    } 
    </script> 
</body> 
</html>