Question

我正在尝试构建一个计算器。 Fiddle。其结果函数（等于按钮功能）保留。我试图找到一种方法来将存储的字符串转换为方程式无法找到方法。

HTML：

<div class="container">
        <div class="output" id="result">
        </div>
        <div class="c" id="c">
            <div class="c-text" id="c-text">C</div>
        </div>
        <div class="button">
            <div class="button-inner"  id="one">1</div>
        </div>
        <div class="button">
            <div class="button-inner" id="two">2</div>
        </div>
        <div class="button">
            <div class="button-inner" id="three">3</div>
        </div>
        <div class="button">
            <div class="button-inner" id="plus">+</div>
        </div>

        <div class="button" >
            <div class="button-inner" id="four">4</div>
        </div>
        <div class="button">
            <div class="button-inner" id="five">5</div>
        </div>
        <div class="button">
            <div class="button-inner" id="six">6</div>
        </div>
        <div class="button">
            <div class="button-inner" id="multiply">*</div>
        </div>

        <div class="button">
            <div class="button-inner" id="seven">7</div>
        </div>
        <div class="button">
            <div class="button-inner" id="eight">8</div>
        </div>
        <div class="button">
            <div class="button-inner" id="nine">9</div>
        </div>
        <div class="button">
            <div class="button-inner" id="subtract">-</div>
        </div>

        <div class="button">
            <div class="button-inner" id="zero">0</div>
        </div>
        <div class="button">
            <div class="button-inner" id="point">.</div>
        </div>
        <div class="button" >
            <div class="button-inner" id="equals">=</div>
        </div>
        <div class="button" >
            <div class="button-inner" id="divide">/</div>
        </div>
    </span>

CSS：

.container{
    width:290px;
    background:#3F475B;
    margin:0 auto;
    height:260px;
}
.output{
    width:80%;
    background:#828A9B;
    display:inline-block;
    height:50px;
    float:left;
}
.c{
    width:20%;
    background:#7B8D8E;
    display:inline-block;
    height:50px;
    text-align: center;

}
.c-text{
    font-size:25px;
    color:#FFF;
    line-height:50px;
    display:inline-block;
}
.button{
    height:40px;
    display:inline-block;
    float:left;
    margin-top:10px;
}
.button-inner{
    background:#FFF;
    height:100%;
    width:66.25px;
    margin:0 auto;
    display:inline-block;
    float:left;
    text-align: center;
    line-height: 40px;
}
.button-inner:first-child{
    margin-left:5px;
}

JS：

/**
 * Never Give Up!
 */
$( document ).ready(function() {
   // alert("works");

    document.getElementById("one").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("one").innerHTML;
    }, false);

    document.getElementById("two").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("two").innerHTML;
    }, false);

    document.getElementById("three").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("three").innerHTML;
    }, false);


    document.getElementById("four").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("four").innerHTML;
    }, false);


    document.getElementById("five").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("five").innerHTML;
    }, false);

    document.getElementById("six").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("six").innerHTML;
    }, false);

    document.getElementById("seven").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("seven").innerHTML;
    }, false);


    document.getElementById("eight").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("eight").innerHTML;
    }, false);

    document.getElementById("nine").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("nine").innerHTML;
    }, false);

    document.getElementById("zero").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("zero").innerHTML;
    }, false);

    document.getElementById("plus").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("plus").innerHTML;
    }, false);

    document.getElementById("subtract").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("subtract").innerHTML;
    }, false);

    document.getElementById("multiply").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("multiply").innerHTML;
    }, false);

    document.getElementById("divide").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("divide").innerHTML;
    }, false);

    document.getElementById("point").addEventListener('click', function() {
        document.getElementById("result").innerHTML = document.getElementById("result").innerHTML+document.getElementById("point").innerHTML;
    }, false);

    document.getElementById("c").addEventListener('click', function() {
        document.getElementById("result").innerHTML = "";
    }, false);

    document.getElementById("equals").addEventListener('click', function() {
              // need string to equation logic here.
    }, false);


});

Answer 1

@Titus评论很好。

但是你已经开始使用jQuery了，所以最好坚持下去。它将使您的代码可读。

我分叉你的{{3}}并进行了一些更改：

/**
 * Never Give Up!
 */
$( document ).ready(function() {
   // alert("works");

    var numbers = [];
    var result;
    var operations = [];
    var clear;

    $(".number").on("click", function() {
        var n = parseFloat($(this).text());
      $('#result').html('<div class="padding">'+$(this).text()+'</div>');

      if (operations.length >= numbers.length-1) {
            numbers.push(n);
       } else {
            numbers = [];
          numbers.push(n);
       }
    })

    $('.operator').on('click', function(){
        var kind = $(this).text();
      numbers.push(kind);
      operations.push(kind);
        $('#result').html('<div class="padding">'+kind+'</div>');
    });

    $('#equals').on('click', function() {
        console.log(numbers);
      console.log(operations);
      calcResult(numbers, operations);
    });

    $('#c-text').on('click', function() {
        numbers = [];
      operations = [];
      $('#result').html('<div class="padding"></div>');
    });

    function calcResult(numbers) {
            var n = '';
            n = numbers.join('');
        var result = eval(n);
        $('#result').html('<div class="padding">'+result+'</div>');

    } 


});

当然，还有更多，但你有一个大致的想法。

计算器结果函数计算

1 个答案: