使用HTML，CSS和JavaScript进行百分比计算器

您想计算百分比吗？如果是的话，您可以使用HTML，CSS和JavaScript制作一个简单的百分比计算器。在本文中，您需要在第一个输入框中输入所得分数，在第二个输入框中输入总分数以计算百分比。输入值并点击计算按钮后，可以获得百分比。这个非常有用的项目用于计算分数、折扣等。百分比计算器对学生、店主以及解决与百分比相关的基本数学问题非常有用。

文件结构

index.html
style.css
script.js

前提条件： 需要了解基本的HTML，CSS和JavaScript知识。该项目包含HTML，CSS和JavaScript文件。HTML文件添加结构，然后使用CSS进行样式设置，JavaScript为其添加功能，以及对项目中某些部分进行验证。

使用div标签、id属性、class属性、form元素和按钮来创建HTML布局。它定义了网页的结构。

使用CSS属性，我们将使用颜色、宽度、高度和位置属性来装饰网页，以满足项目的要求。CSS设计了计算器的界面。

为了为网页添加功能，使用JavaScript代码。在这种情况下，声明了两个函数percentage1()和percentage2()，并通过onclick事件传递给按钮。结果在按下计算按钮后显示出来。我们使用了document.getElementById()方法。它返回具有指定ID属性的元素，如果没有具有指定ID的元素，则返回null。

使用的公式：

给定公式X的Y百分之几：X的Y百分之几=（X/100）×Y
给定X是Y的百分之几：X是Y的百分之几=（X/Y）×100%，其中X，Y > 0

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>Percentage Calculator</title> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
  
<body> 
    <h1>Percentage Calculator</h1> 
  
    <div> 
  
        <!-- Defines a field for entering a number-->
        <h2> What is <input type="number" id="percent" />% of 
            <input type="number" id="num" />? 
        </h2> 
  
        <!-- onclick event is to call the function when 
            user click on the button-->
        <button onclick="percentage_1()">Calculate</button><br> 
  
            <!-- Read-only input field to display 
            output and cannot be modified -->
        <input type="text" id="value1" readonly /> 
    </div> 
  
    <div> 
        <!-- Defines a field for entering a number -->
        <h2><input type="number" id="num1" /> 
            is what Percent of 
            <input type="number" id="num2" />? 
        </h2> 
          
        <!-- onclick event is to call the function 
            when user click on the button -->
        <button onclick="percentage_2()">Calculate</button> 
          <br> 
          
        <!-- Read-only input field to display 
            output and cannot be modified -->
        <input type="text" id="value2" readonly /> 
    </div> 
      
    <script type="text/javascript" src="script.js"></script> 
</body> 
  
</html>

CSS

/* A margin and padding are provided 0  
box-sizing border box is used to include  
padding and border in the total width  
and height of the element, and font-family  
can be specified by the user */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    font-family: 'Courier New', Courier, monospace; 
} 
 
/* The user display allows you to specify the 
background colour and height. The  
display:flex property, which is aligned at the 
centre, is used to fill available free space  
or to shrink them to prevent overflow. */
body { 
    background-color: #f7f7f7; 
    min-height: 100vh; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
} 
 
/* font-weight Specifies weight of glyphs  
in the font, their degree of blackness or  
stroke */
h1 { 
    font-weight: 900; 
    margin-bottom: 12px; 
} 
 
div { 
    width: 480px; 
    background-color: #fff; 
    margin: 12px 0; 
    padding: 24px; 
    text-align: center; 
    box-shadow: 2px 2px 8px 2px #aaa; 
} 
 
input[type=number] { 
    width: 84px; 
    font-size: 18px; 
    padding: 8px; 
    margin: 0px 8px 8px 8px; 
} 
 
/* The text-transform:uppercase property  
causes characters to be raised to uppercase.  
The button's font-weight, font-size, and  
cursor type can be customised by the user. */
button { 
    text-transform: uppercase; 
    font-weight: 900; 
    font-size: 20px; 
    margin: 12px 0; 
    padding: 8px; 
    cursor: pointer; 
    letter-spacing: 1px; 
} 
 
/* The font-weight, font-size, background-color,  
and border can all be customized by the user.  
The border-radius property allows you to give  
an element rounded corners.*/
input[type=text] { 
    font-size: 22px; 
    padding: 8px 0; 
    font-weight: 900; 
    text-align: center; 
    background-color: #f7f7f7; 
    border: 2px solid #ccc; 
    border-radius: 6px; 
}

Javascript

function percentage_1() { 
  
    // Method returns the element of percent id 
    var percent = document.getElementById("percent").value; 
      
    // Method returns the element of num id 
    var num = document.getElementById("num").value; 
    document.getElementById("value1") 
        .value = (num / 100) * percent; 
} 
  
function percentage_2() { 
  
    // Method returns the element of num1 id 
    var num1 = document.getElementById("num1").value; 
      
    // Method returns the elements of num2 id 
    var num2 = document.getElementById("num2").value; 
    document.getElementById("value2") 
            .value = (num1 * 100) / num2 + "%"; 
}

输出：

使用HTML，CSS和JavaScript进行百分比计算器