时间戳

首页 > 解决方案 > javascript计算器（我如何使第一次点击不接受操作）

javascript - javascript计算器（我如何使第一次点击不接受操作）

问题描述

我如何使第一次单击不接受操作并返回“0”

这是我的功能

$(document).ready(function(){
    $('button').on('click', function(){
        var previosValue = $('.viewer').text();
        var val = $(this).text();
        if(val == "="){
            var op = eval($('.viewer').text());
            $('.viewer').text(op);
        } else if(val == "AC"){
            $('.viewer').text("0");
        } else {
            if($('.viewer').text() == "0"){
                $('.viewer').text(val);
            } else {
                $('.viewer').text(previosValue + val);
            }
        }
    });
});

codepen上有完整的代码

标签： javascripthtmlcss

解决方案

我建议您在用户首先单击操作符号时不要吞下按键。相反，使用初始的“0”作为第一个操作数（即，如果用户在仅显示“0”时单击“+”，则显示“0+”）。

这有一个优势，因为它可以像大多数其他计算器一样工作。在 UI 设计中，一致性是关键。

像这样的东西应该工作：

$(document).ready(function(){
  $('button').on('click', function(){
    var previosValue = $('.viewer').text();
    var val = $(this).text();
    if(val == "="){
      var op = eval($('.viewer').text());
      $('.viewer').text(op); 
    } else if(val == "AC"){
      $('.viewer').text("0");
    } else if ($('.viewer').text() != "0" || $.inArray(val, ["/", "*", "-" ,"+"]) > -1){
      $('.viewer').text(previosValue + val);          
    } else {
      $('.viewer').text(val);
    }
  });
});

您还需要检查用户按下时会发生什么，例如“5”、“+”、“*”、“6”。目前显示“5+*6”。您可能希望稍后的操作数覆盖前一个操作数......但这是一个完全不同的问题;-)

推荐阅读