📜  使用 jQuery 设计和实现计算器

📅  最后修改于: 2021-09-01 01:27:25             🧑  作者: Mango

在这篇文章中,我们将使用 jQuery 和 eval()函数实现一个易于构建的计算器。为简单起见,我们的计算器只会从屏幕上的按钮中获取输入。

先决条件:
前端技术的基础知识,如 HTML、CSS、JavaScript、jQuery 和 Bootstrap。

程序:

  1. 开发计算器面:
    在这里,我们将利用引导程序来节省开发计算器面的时间。以下是在执行相同操作时需要满足的要求:
    • 主(表情)屏幕
    • 次要(结果)屏幕
    • 输入按钮:数字、用于评估的运算符等。
    
    
    
      
    
        
        
        
        
        
        
    
      
    
      
        
            
     
            
                             
                
                
                
                
                    
                                                              
                    
                    
                    
                        
                            
                                
    1
                            
                            
                                
    2
                            
                            
                                
    3
                            
                            
                                
                                  +                           
                            
                        
                        
                            
                                
    4
                            
                            
                                
    5
                            
                            
                                
    6
                            
                            
                                
                                  -                           
                            
                        
                        
                            
                                
    7
                            
                            
                                
    8
                            
                            
                                
    9
                            
                            
                                
                                  *                           
                            
                        
                        
                            
                                
    0
                            
                            
                                
    .
                            
                            
                                
    ?
                            
                            
                                
                                  /                           
                            
                        
                        
                            
                                
                                  (                           
                            
                            
                                
                                  )                           
                            
                            
                                
                                  AC                           
                            
                            
                                
                                    =                           
                            
                           
                    
                
            
            
     
        
      

    输出:

  2. 实现表情画面的功能:
    现在我们将相应地实施以下步骤以使表达式屏幕正常工作:
    • 按下屏幕时添加按钮的值。
    • 为输入实现退格。
    • 清除表情屏幕 (AC)
    
    
    
      
    
        
        
        
        
        
        
    
      
    
      
        
            
     
            
                             
                
                
                
                
                    
                                                              
                    
                    
                    
                        
                            
                                
    1
                            
                            
                                
    2
                            
                            
                                
    3
                            
                            
                                
                                  +                           
                            
                        
                        
                            
                                
    4
                            
                            
                                
    5
                            
                            
                                
    6
                            
                            
                                
                                  -                           
                            
                        
                        
                            
                                
    7
                            
                            
                                
    8
                            
                            
                                
    9
                            
                            
                                
                                  *                           
                            
                        
                        
                            
                                
    0
                            
                            
                                
    .
                            
                            
                                
                                  ?                            
                            
                            
                                
                                  /                           
                            
                        
                        
                            
                                
                                  (                           
                            
                            
                                
                                  )                           
                            
                            
                                
                                  AC                           
                            
                            
                                
                                  =                           
                            
                           
                    
                
            
            
     
        
           

    输出:

  3. 评估结果:
    为此,我们需要按顺序添加以下步骤:
    • 提取表达式屏幕的值。
    • 评估表达式屏幕。
    • 报告输出中的错误(如果有)
    • 清除表达式屏幕并将输出附加到结果屏幕上。
    • 每当使用其他输入按钮时,清除主屏幕和辅助屏幕。

    最后结果:

    
    
    
      
    
        
        
        
        
        
        
    
      
    
      
        
            
     
            
                             
                
                
                
                
                    
                                                              
                    
                    
                    
                        
                            
                                
    1
                            
                            
                                
    2
                            
                            
                                
    3
                            
                            
                                
                                  +
                            
                        
                        
                            
                                
    4
                            
                            
                                
    5
                            
                            
                                
    6
                            
                            
                                
                                  -
                            
                        
                        
                            
                                
    7
                            
                            
                                
    8
                            
                            
                                
    9
                            
                            
                                
                                  *
                            
                        
                        
                            
                                
    0
                            
                            
                                
    .
                            
                            
                                
    ?
                            
                            
                                
                                  /
                            
                        
                        
                            
                                
                                  (
                            
                            
                                
                                  )
                            
                            
                                
                                  AC
                            
                            
                                
                                  =
                            
                           
                    
                
            
            
     
        
           

    输出:

    1. 有错误:(不是有效的表达式,因为运算需要乘号)
    2. 没有错误: