HTML |计算器

这里将使用 HTML 代码形成一个计算器。

• 计算器标题：这是我们应用程序顶部的标题，“GeeksforGeeks 计算器”。
• 输出屏幕：这将是我们的输出屏幕，将显示所有文本。就像用户将键入的输入和从用户输入计算的答案一样。因此，我们可以再次将其分解为两个较小的部分，如下所示：
  • 问题输出：这将是用户给出的输入。
  • 答案输出：这将是根据用户输入计算的结果。

  HTML 代码：

     
        
           //function that display value
           function dis(val)
           {
               document.getElementById("result").value+=val
           }
             
           //function that evaluates the digit and return result
           function solve()
           {
               let x = document.getElementById("result").value
               let y = eval(x)
               document.getElementById("result").value = y
           }
             
           //function that clear the display
           function clr()
           {
               document.getElementById("result").value = ""
           }
        
        
        
           .title{
           margin-bottom: 10px;
           text-align:center;
           width: 210px;
           color:green;
           border: solid black 2px;
           }
    
           input[type="button"]
           {
           background-color:green;
           color: black;
           border: solid black 2px;
           width:100%
           }
    
           input[type="text"]
           {
           background-color:white;
           border: solid black 2px;
           width:100%
           }
        
     
     
     
        GeeksforGeeks Calculator
        
           
              
              
              
           
           
              
              
              
              
              
              
           
           
              
              
              
              
           
           
              
              
              
              
           
           
              
              
              
              
              
           
                         
     
     

  输出：
  首先-
  
  输入一些数据后——
  
  最后的结果会像 -