2012-10-20 24 views
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); 

} 

在這個函數中我開始使用regEx來檢查傳遞給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=""; 
} 
+0

有沒有這樣的東西算術參數。它必須是有效的數據類型之一。 – Jay

+0

@Jay我將如何將參數更改爲有效的數據類型? – qb1234

回答

1

一個問題是one(+)是無效的Javascript。試試這個:

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

與其他操作員按鈕相同。

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> 

請注意,這僅僅是一個演示,它需要更多的工作才能保持穩定。以驗證要評估的表達式(例如,不能按時間然後除法)並且在下一個符號被按下時評估每個表達式。

相關問題