Question

我正在尝试使用html5，css3和javascript创建一个简单的计算器。我的问题是我的指数按钮似乎不起作用，所有其他操作符按钮工作正常。我的代码如下：

<html>
<head>
<meta charset = "utf-8">
<title>Calculator</title>
<script type = "text/javascript">
    function result(){
        btn.value = eval(btn.value);
    }
</script>
<style type = "text/css">
  .box{
    height: 500px;
    width: 400px;
    background-color: red;
  }
  .display{
    background-color: green;
    position: relative;
    top:20px;
    left:50px;
    width:310px;
    height:60px;
  }
  .display input{
    color: black;
    background-color:yellow;
    position:relative;
    left:3px;
    top:3px;
    width:295px;
    height:45px;
  }
  .key{
    position:relative;
    top:15px;
    left:50px;
  }
  .button{
    width:55px;
    height:60px;
    margin-left:15px;
  }
  .button.gray{
    background-color:gray;
  }
  .button.black{
    color:white;
    background-color:black;
  }
</style>
</head>

<body>
<div class = "box">
    <div class = "display"><input type = "text" readonly size="20" id="btn"></div>
     <div class = "key">
    <p><input type = "button" class = "button gray" value = "1" onclick="btn.value+=1">
       <input type = "button" class = "button gray" value = "2" onclick="btn.value+=2">
       <input type = "button" class = "button gray" value = "3" onclick="btn.value+=3">
       <input type = "button" class = "button black" value = "+" onclick="btn.value+='+'"></p>
    <p><input type = "button" class = "button gray" value = "4" onclick="btn.value+=4">
       <input type = "button" class = "button gray" value = "5" onclick="btn.value+=5">
       <input type = "button" class = "button gray" value = "6" onclick="btn.value+=6">
       <input type = "button" class = "button black" value = "-" onclick="btn.value+='-'"></p>
    <p><input type = "button" class = "button gray" value = "7" onclick="btn.value+=7">
       <input type = "button" class = "button gray" value = "8" onclick="btn.value+=8">
       <input type = "button" class = "button gray" value = "9" onclick="btn.value+=9">
       <input type = "button" class = "button black" value = "*" onclick="btn.value+='*'"></p>
    <p><input type = "button" class = "button black" value = "%" onclick="btn.value+='%'">
       <input type = "button" class = "button gray" value = "0" onclick="btn.value+=0">
       <input type = "button" class = "button black" value = "^" onclick="btn.value+='^'">
       <input type = "button" class = "button black" value = "/" onclick="btn.value+='/'"></p>
    <p><input type = "button" class = "button black" value = "C" onclick="btn.value=''">
       <input type = "button" class = "button black" value = "=" onclick="result()";></p>
</div>
</div>

</body>
</html>

Answer 1

您需要一个脚本（如JavaScript）来处理客户端执行的操作。在大多数情况下，HTML只是一种标记语言（用于显示数据），而CSS（在<style></style>标记中）是一种格式化/设计标记的方法。您需要一个脚本来处理操作，

HTML：onclick =＆＃34;调用JavaScript函数（传入该按钮的值）＆＃34;

<p><input type = "button" class = "button gray" value = "1" onclick="showNum(this.value)">

JS：将值作为输入，按ID（.getElementById(your id)）获取输入框，显示

function showNum (input) {
        var display = document.getElementById("btn");
        display.value = input; 
 }

这是一个有效的粘贴箱：

http://jsbin.com/xijatosate/1/edit?html,css,js,output

Answer 2

只是为了好玩 - 部分工作的计算器。 DEMO

让你的计算器工作你应该包括一堆javascript代码，没有它什么都不做。

按方法获取JQuery按钮。

$('.box').on('click','.button',function(){

Answer 3

在这里，我为您修复了代码。

function display(val) {
    var dis = document.getElementById("btn");
    dis.value += val;
}

您应该从这个模板开始。我建议你在www.w3schools.com/开始你的编码生涯。

玩得开心！

完整代码jsfiddle

与指数的Javascript计算器

3 个答案: