Implementieren Sie einen einfachen Taschenrechner mit jQuery-js-Tutorial-php.cn

Implementieren Sie einen einfachen Taschenrechner mit jQuery

怪我咯

Freigeben： 2017-06-27 11:22:46

Original

3290 Leute haben es durchsucht

Ein einfacher jQuery-Rechner, der lediglich eine kontinuierliche Berechnungsfunktion implementiert

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf8"/> 
<title>Javascript计算器</title> 
</head> 
<body> 
<table> 
<tr> 
<td colspan="4"><input id="show" value="0"/></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="7">7</button></td> 
<td><button onclick="number(this)" value="8">8</button></td> 
<td><button onclick="number(this)" value="9">9</button></td> 
<td><button onclick="calsym(this)" value="+">+</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="4">4</button></td> 
<td><button onclick="number(this)" value="5">5</button></td> 
<td><button onclick="number(this)" value="6">6</button></td> 
<td><button onclick="calsym(this)" value="-">-</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="1">1</button></td> 
<td><button onclick="number(this)" value="2">2</button></td> 
<td><button onclick="number(this)" value="3">3</button></td> 
<td><button onclick="calsym(this)" value="*">*</button></td> 
</tr> 
<tr> 
<td><button onclick="number(this)" value="0">0</button></td> 
<td><button onclick="calsym(this)" value="=">=</button></td> 
<td><button onclick="clearCal()" value="c">c</button></td> 
<td><button onclick="calsym(this)" value="/">/</button></td> 
</tr> 
</table> 
</body> 
<script type="text/javascript" src="jquery-1.9.1.js"></script> 
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
var num0 = null; 
var num1 = null; 
var symble = null; 
var lastclick = null; 
var symarr = new Array(); //符号集合 
symarr[0] = &#39;+&#39;; 
symarr[1] = &#39;/&#39;; 
symarr[2] = &#39;*&#39;; 
symarr[3] = &#39;-&#39;; 
symarr[4] = &#39;=&#39;; 
function number(n){ 
var numnow = $(&#39;#show&#39;); 
var _exist=$.inArray(lastclick,symarr); //判断上次点击是否为符号 
if (numnow.val() == 0 || _exist != -1) {//若显示框为0 或者上次点击为符号，则重新记录显示框 
numnow.val($(n).val()); 
}else{ 
numnow.val(parseInt(numnow.val()) * 10 +parseInt($(n).val())); 
} 
lastclick = $(n).val(); // 更新上次点击 
} 
 
function calsym(cs){ //符号点击事件响应 
var numnow = $(&#39;#show&#39;); 
var _exist=$.inArray(lastclick,symarr); 
if (num0 == null && symble == null) { //初始状态 
num0 = numnow.val(); 
symble = $(cs).val(); 
}else if(num0 != null && num1 == null && _exist !=-1){ // 连续点操作符的处理，及第一次点击操作符处理 
symble = $(cs).val(); 
}else{ //正常计算状态 
num1 = numnow.val(); 
var result = calculate(symble,num0,num1); 
symble = $(cs).val(); //上行及本行：先计算之前的运算符及结果，再更新运算符为本次点击 
num0 = result; 
numnow.val(result); 
num1 = null; 
} 
lastclick = $(cs).val(); // 更新上次点击 
} 
 
function clearCal(){ //清空函数 
$(&#39;#show&#39;).val(&#39;0&#39;); 
num0 = null; 
num1 = null; 
symble = null; 
lastclick = null; 
} 
 
function calculate(sym,m,n){ //计算并返回结果 
var res = null; 
m = parseInt(m); 
n = parseInt(n); 
switch(sym){ 
case &#39;+&#39;: 
res = m+n; 
break; 
case &#39;-&#39;: 
res = m-n; 
break; 
case &#39;*&#39;: 
res = m*n; 
break; 
case &#39;/&#39;: 
if (n == 0) { 
alert("false"); 
break; 
} 
res = m/n; 
break; 
default: 
break; 
} 
return res; 
} 
</script> 
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonImplementieren Sie einen einfachen Taschenrechner mit jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!