在html中制作一个简单的计算器

时间:2016-07-16 18:26:04

标签: javascript html

问题在于我希望操作在单个输入框中执行,因为它通常在计算器中。第一个值存储在一个变量中,然后按下操作员按钮输入第二个值,等号按钮必须用第二个值执行操作但是我无法得到计算出的答案它只是不将它添加到第二个值。

<tr>
    <td><input type=button value="+" OnClick="num1=calc.display.value;calc.display.value=' ';"></td>
    <td><input type=button value="C" OnClick="calc.display.value='0'"></td>
</tr>
<tr>
    <td><input type=button value="=" OnClick="calc.display.value=calc.display.value+num1"></td>
</tr>

1 个答案:

答案 0 :(得分:-2)

这是完整的计算器。希望它会有所帮助。

&#13;
&#13;
function c(val)
    {
    document.getElementById("d").value=val;
    }
    function v(val)
    {
    document.getElementById("d").value+=val;
    }
    function e() 
    { 
    try 
    { 
      c(eval(document.getElementById("d").value)) 
    } 
    catch(e) 
    {
      c('Error') 
    } 
    }  
&#13;
    body
    {
    background-color:tan;
    } 
    .box
    {
    background-color:#3d4543;
    height:300px;
    width:250px;
    border-radius:10px;
    position:relative;
    top:80px;
    left:40%;
    } 
    .keys
    {
    position:relative;
    top:15px;
    }
    .button
    {
    width:40px;
    height:30px;
    border:none;
    border-radius:8px;
    margin-left:17px;
    cursor:pointer;
    border-top:2px solid transparent;
    }
    .button.gray
    {
    color:white;
    background-color:#6f6f6f;
    border-bottom:black 2px solid;
    border-top:2px #6f6f6f solid;
    }
    .button.pink
    {
    color:black;
    background-color:#ff4561;
    border-bottom:black 2px solid;
    }
    .button.black
    {
    color:white;
    background-color:303030;
    border-bottom:black 2px solid;
    border-top:2px 303030 solid;
    }
    .button.orange
    {
    color:black;
    background-color:FF9933;
    border-bottom:black 2px solid;
    border-top:2px FF9933 solid;
    }
    .gray:active
    {
    border-top:black 2px solid;
    border-bottom:2px #6f6f6f solid;
    }
    .pink:active
    {
    border-top:black 2px solid;
    border-bottom:#ff4561 2px solid;
    }
    .black:active
    {
    border-top:black 2px solid;
    border-bottom:#303030 2px solid;
    }
    .orange:active
    {
    border-top:black 2px solid;
    border-bottom:FF9933 2px solid;
    }
    p
    {
    line-height:10px;
    }
&#13;
<html>
  <body>
    <div class="box">
    <div class="display"><input type="text" readonly size="18" id="d"></div>
    <div class="keys">
        <p><input type="button" class="button gray" 
        value="mrc" onclick='c("Created....................")'>
        <input type="button" class="button gray" 
        value="m-" onclick='c("...............by............")'>
        <input type="button" class="button gray" value="
        m+" onclick='c("....Pirate")'>
        <input type="button" class="button pink" 
        value="/" onclick='v("/")'></p>
        <p><input type="button" class="button black" 
        value="7" onclick='v("7")'><input type="button" 
        class="button black" value="8" onclick='v("8")'>
        <input type="button" class="button black" value="9" 
        onclick='v("9")'><input type="button" 
        class="button pink" value="*" onclick='v("*")'></p>
        <p><input type="button" class="button black" 
        value="4" onclick='v("4")'><input type="button" 
        class="button black" value="5" onclick='v("5")'>
        <input type="button" class="button black" value="6" 
        onclick='v("6")'><input type="button" 
        class="button pink" value="-" onclick='v("-")'></p>
        <p><input type="button" class="button black" 
        value="1" onclick='v("1")'><input type="button" 
        class="button black" value="2" onclick='v("2")'>
        <input type="button" class="button black" value="3" 
        onclick='v("3")'><input type="button" 
        class="button pink" value="+" onclick='v("+")'></p>
        <p><input type="button" class="button black" 
        value="0" onclick='v("0")'><input type="button" 
        class="button black" value="." onclick='v(".")'>
        <input type="button" class="button black" value="C" 
        onclick='c("")'><input type="button" 
        class="button orange" value="=" onclick='e()'></p>
    </div>
    </div>

</body>
  </html>
&#13;
&#13;
&#13;

来源:http://www.codeproject.com/Tips/631525/Creating-Calculator-using-HTML-CSS-and-JavaScript

谢谢希望它会有所帮助。