0 
<html>
<head>
<title> Buttons</title>
<style type="text/css">

.intro{background-color:;}
.duction{background-color:blue;}
.function{background-color:grey;}
.equals{background-color:orange;}
</style>





</head>
<body>
<form name="calculator">
<input type="text"  name="display" length="50" width="100">
<div>
<input type= "button" value="7" class="intro" id="7" onclick="one(7)"></button>
<input type= "button" value="8" class="intro" id="8" onclick="one(8)"></button>
<input type= "button" value="9" class="intro" id="9" onclick="one(9)"></button>
<input type= "button" value="+" class="intro" id="+" onclick="one(+)"></button>
<input type= "button" value="-" class="intro" id="-" onclick="one(-)"></button>
<div>
<input type= "button" value="4" class="intro" id="4" onclick="one(4)"></button>
<input type= "button" value="5" class="intro" id="5" onclick="one(5)"></button>
<input type= "button" value="6" class="intro" id="6" onclick="one(6)"></button>
<input type= "button" value="x" class="intro" id="x" onclick="one(*)"></button>
<input type= "button" value="/" class="intro" id="/" onclick="one(/)"></button>
<div>
<input type= "button" value="1" class="intro" id="1" onclick="one(1)"></button>
<input type= "button" value="2" class="intro" id="2" onclick="one(2)"></button>
<input type= "button" value="3" class="intro" id="3" onclick="one(3)"></button>
<input type= "button" value="=" class="intro" id="=" onclick="Evaluate()"></button>
<div>
<input type= "button" value="0" class="intro" id="0" onclick="one(0)"></button>
<input type= "button" value="." class="intro" id="." onclick="one(.)"></button>
<input type= "button" value="c" class="intro" onclick="clearDigit()"></button>

<script type="text/javascript" src="C:\Users\LS\Desktop\QBJS\button.js">



</script>



</body>
</html>


var timer;
var object;
var thing;
var digit="";
var result;


function one(event)
{
   clearTimeout(timer);
   timer=setTimeout(function(){AddDigit(event);},200);

}

在这个函数中，我开始使用正则表达式来检查传递给 x 的数字和算术运算符。那是我意识到我的算术运算符根本没有被传递的时候。不知道为什么！！！

function AddDigit(x)
{
   alert(x);
   /*if(/^\d[+-*\/$/.test(x)) 

       {document.calculator.display.value+=x;}
   else 


      */ {document.calculator.display.value+=digit + x;}
}



 function Evaluate()
{
  result=eval(document.calculator.display.value);
  document.calculator.display.value = result;
}



document.ondblclick=function(button)
{
   clearTimeout(timer);

   thing=button.target;

   if(thing.className=="intro")
      {thing.className="duction";}

   else if(thing.className=="duction")
      {thing.className="intro";}    
}



function clearDigit()
{
   document.calculator.display.value="";
}
4

2 回答 2

1

一个问题是它one(+)不是有效的 Javascript。尝试这个：

<input type= "button" value="+" class="intro" id="+" onclick="one('+')">

其他操作员按钮也是如此。

于 2012-10-20T03:21:51.520 回答
0

一些建议：

从有效的 HTML 开始，所有这些结束</button>标记都是无效的，并且表单没有结束标记。大多数 ID 值都是无效的，尽管它真的无关紧要，反正你也不需要它们。

考虑在表单上放置一个单击侦听器，然后响应分派事件的任何元素。

例如，下面是一个非常基本的计算器（它不检查构造的表达式是否有效）。请注意，显示的数学符号与 javascript 数学表达式中使用的符号不同，因此屏幕上显示的符号被映射到 javascript 符号并存储在单独的输入中（在示例中显示，但在使用时应隐藏）。

<form onclick="handleClick(this, event);">

  <!-- this input should be type hidden, left visible for demo -->
  <input type="text" name="store">

  <table> 
    <tr>
      <td colspan="3"><input type="text" value="" name="screen" readonly>
      <td><input type="button" value="=" name="bequal">
    <tr>
      <td><input type="button" value="7" name="b7">
      <td><input type="button" value="8" name="b8">
      <td><input type="button" value="9" name="b9">
      <td><input type="button" value="&divide;" name="bdiv">
    <tr>
      <td><input type="button" value="4" name="b4">
      <td><input type="button" value="5" name="b5">
      <td><input type="button" value="6" name="b6">
      <td><input type="button" value="&times;" name="btimes">
    <tr>
      <td><input type="button" value="1" name="b1">
      <td><input type="button" value="2" name="b2">
      <td><input type="button" value="3" name="b3">
      <td><input type="button" value="&minus;" name="bminus">
    <tr>
      <td><input type="button" value="0" name="b0">
      <td><input type="button" value="." name="bpoint">
      <td><input type="reset"  value="C" name="bclear">
      <td><input type="button" value="&plus;" name="bplus">
  </table>
</form>

<script>
function handleClick(form, evt) {

  // Stored symbol for eval is different to displayed symbol
  var buttonMap = {
    '247':'/', '215':'*', '8722':'-', '43':'+'
  }
  var el = evt.target || evt.srcElement;

  if (el.type == 'button') {
    if (el.name == 'bequal') {

      // Update display with result of evaluating expression
      form.screen.value = eval(form.store.value);

      // Update stored value
      form.store.value = form.screen.value;

    } else {
      // Update displayed expression
      form.screen.value += el.value;

      // Update expression to evaluate, map &times; to * and so on.
      form.store.value += buttonMap[el.value.charCodeAt(0)] || el.value;
    }
  }
}
</script>

请注意，这只是一个演示，它需要更多的工作才能变得健壮，例如验证要评估的表达式（例如，不能按时间然后除法）并在按下下一个符号时评估每个表达式。

于 2012-10-20T06:45:37.297 回答