如何使用 HTML CSS JavaScript 创建薪酬角色管理网页？

在本文中，我们将使用 Javascript 制作一个薪酬角色管理网页。在这个项目中，我们将学习和清除基本 javascript 的概念。

先决条件：该项目的先决条件是 -

• ES6 Javascript
• 查询选择器

方法：为了创建我们的支付角色管理网页，我们将获取输入的账单金额并处理错误情况，以便如果有人使用账单金额的负值或超过给定金额时会引发错误。然后我们将应用我们的主要逻辑来显示可能返回给用户的最小数量的笔记的输出作为输出（表）。该网页实际上将计算客户将获得的最小票据数量作为余额回报。假设账单金额为 500 并且您有 2000 卢比，因此它计算要返回给用户的最少纸币数量。

基本设置：打开 VS Code 并从驱动器中打开一个文件夹，您要在其中创建此项目并提供名称（文件夹名称）。打开后创建以下文件：

• index.js
• 索引.html
• 样式.css

项目结构：应该是这样的：

第 1 步：首先我们将在index.html中创建一个 HTML 结构。这是主索引页面，它连接到style.css文件用于样式化和index.js用于网站中的逻辑操作。

HTML 文件基本上包含三个部分：

• 标题
• 输入部分
• 表（输出）

在标题部分，我们有标题，在输入部分，我们有两个来自用户的输入，一个是账单金额，另一个是用户给出的金额。在最后一部分中，我们有一个表格来显示要返回给用户的最少笔记数。

index.html

  

    
    
    

  

    

        

                Pay Role Management
            
        

            Enter the bill amount and the cash given
            by the customer and know minimum number 
            of notes to return
        
  
        
            Enter the bill amount
        
        
        
             Cash Given
        
        
        Check
        

        
  
        
            
            
                
                
                
                
                
                
                
                
            
            
                
                
                
                
                
                
                
                
            
        

                Return Change
            
No of Notes
Notes
2000
500
100
20
10
5
1
    

  

第 2 步：现在在 javaScript 文件中，我们将获取按钮的 id 并输入数字并输出数字到内部 Html。剩余现金的逻辑部分是提供尽可能少的纸币数量。

1. 计算ie输入金额的剩余值-.bill金额。
2. 处理错误。
3. 在 notes 数组中运行一个循环并计算最小的音符数。 trunc() 是 javascript 中的一个函数 截断（切断）点和它右边的数字。
4. 最后，我们的输出根据笔记的索引（noOfNotes）显示。

index.js

var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];
  
function errorHandle(error) {
    errMsg.style.display = "block";
    errMsg.innerText = error;
}
  
function hideMessage() {
    errMsg.style.display = "none";
}
  
function clickHandler() {
    hideMessage();
    if (inputBill.value < 0) {
        errorHandle("Please Enter a positive value");
    } else {
        var remaining = cashGiven.value - inputBill.value;
        if (remaining < 0) {
            errorHandle("Give me more");
        } else {
            for (var i = 0; i < notes.length; i++) {
                const paisa = Math.trunc(remaining / notes[i]);
                remaining %= notes[i];
                noOfNotes[i].innerText = paisa;
  
            }
  
        }
    }
}
  
checkBtn.addEventListener("click", clickHandler);

第 3 步：现在我们将为网页设置样式。在这里，主容器被赋予填充并显示为 flex，方向为列，背景颜色为蓝色。我们还用纯黑色为表格添加了边框，也为按钮设置了样式。

样式.css

.container {
    display: flex;
    flex-direction: column;
    width: 25vw;
    margin-left: 500px;
    padding: 50px;
    background-color: aqua;
}
  
.table {
    border: 2px solid black;
}
  
.row {
    border: 2px solid black;
}
  
.no-of-notes {
    border: 2px solid black;
}
  
.check-btn {
    margin-top: 35px;
    padding: 5px;
}
  
.input-bill {
    margin-top: 35px;
    padding: 5px;
}
  
.cash-given {
    margin-top: 35px;
    padding: 5px;
}

最终代码：将以上三段代码，即HTML、CSS、JavaScript部分结合起来，就可以得到想要的结果了。

HTML

  

   
   
   
   
      .container {
         display: flex;
         flex-direction: column;
         width: 25vw;
         margin-left: 500px;
         padding: 50px;
         background-color: aqua;
      }
  
      .table {
         border: 2px solid black;
      }
  
      .row {
         border: 2px solid black;
      }
  
      .no-of-notes {
         border: 2px solid black;
      }
  
      .check-btn {
         margin-top: 35px;
         padding: 5px;
      }
  
      .input-bill {
         margin-top: 35px;
         padding: 5px;
      }
  
      .cash-given {
         margin-top: 35px;
         padding: 5px;
      }
   

  

   
      
            Pay Role Management
      
      
         Enter the bill amount and the cash given by the customer 
         and know minimum number of notes to return
      
  
      Enter the bill amount
      
       Cash Given
      
      Check
      
      
  
      
         
         
            
            
            
            
            
            
            
            
         
         
            
            
            
            
            
            
            
            
         
      
            Return ChangeNo of NotesNotes2000500100201051
   
   
      var inputBill = document.getElementById("bill");
      var cashGiven = document.getElementById("cash");
      var checkBtn = document.getElementById("btn");
      var errMsg = document.getElementById("error");
      var noOfNotes = document.querySelectorAll(".no-of-notes");
      var notes = [2000, 500, 100, 20, 10, 5, 1];
  
      function errorHandle(error) {
         errMsg.style.display = "block";
         errMsg.innerText = error;
      }
  
      function hideMessage() {
         errMsg.style.display = "none";
      }
  
      function clickHandler() {
         hideMessage();
         if (inputBill.value < 0) {
            errorHandle("Please Enter a positive value");
         } else {
            var remaining = cashGiven.value - inputBill.value;
            if (remaining < 0) {
               errorHandle("Give me more");
            } else {
               for (var i = 0; i < notes.length; i++) {
                  const paisa = Math.trunc(remaining / notes[i]);
                  remaining %= notes[i];
                  noOfNotes[i].innerText = paisa;
  
               }
  
            }
         }
      }
  
      checkBtn.addEventListener("click", clickHandler);
   

  

输出：在 VS Code 中安装实时服务器扩展。单击 Live Server，我们的网站现已准备就绪。