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

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 に答える