一個簡單的jQuery計算器實現(xiàn)了連續(xù)計算功能
更新時間:2014年07月21日 17:34:33 投稿:whsnow
這篇文章主要介紹了一個簡單的jQuery計算器主要實現(xiàn)了連續(xù)計算功能,需要的朋友可以參考下
一個簡單的jQuery計算器,只是實現(xiàn)了一個連續(xù)計算的功能
<!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] = '+';
symarr[1] = '/';
symarr[2] = '*';
symarr[3] = '-';
symarr[4] = '=';
function number(n){
var numnow = $('#show');
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){ //符號點擊事件響應(yīng)
var numnow = $('#show');
var _exist=$.inArray(lastclick,symarr);
if (num0 == null && symble == null) { //初始狀態(tài)
num0 = numnow.val();
symble = $(cs).val();
}else if(num0 != null && num1 == null && _exist !=-1){ // 連續(xù)點操作符的處理,及第一次點擊操作符處理
symble = $(cs).val();
}else{ //正常計算狀態(tài)
num1 = numnow.val();
var result = calculate(symble,num0,num1);
symble = $(cs).val(); //上行及本行:先計算之前的運算符及結(jié)果,再更新運算符為本次點擊
num0 = result;
numnow.val(result);
num1 = null;
}
lastclick = $(cs).val(); // 更新上次點擊
}
function clearCal(){ //清空函數(shù)
$('#show').val('0');
num0 = null;
num1 = null;
symble = null;
lastclick = null;
}
function calculate(sym,m,n){ //計算并返回結(jié)果
var res = null;
m = parseInt(m);
n = parseInt(n);
switch(sym){
case '+':
res = m+n;
break;
case '-':
res = m-n;
break;
case '*':
res = m*n;
break;
case '/':
if (n == 0) {
alert("false");
break;
}
res = m/n;
break;
default:
break;
}
return res;
}
</script>
</html>
相關(guān)文章
jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實現(xiàn)方法
這篇文章主要介紹了jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實現(xiàn)方法,涉及jQuery針對表格與頁面元素的動態(tài)操作技巧,需要的朋友可以參考下2016-06-06
全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08
基于jquery實現(xiàn)的可以編輯選擇的下拉框的代碼
主要是通過CSS樣式表中clip來實現(xiàn)的。兼容IE6-8,谷歌,火狐等。2010-11-11
通過點擊jqgrid表格彈出需要的表格數(shù)據(jù)
在眾多的表格插件中,jqgrid的特點是非常鮮明的,所以jqgrid表格插件用處非常廣泛,本篇文章給大家介紹通過點擊jqgrid表格彈出需要的表格數(shù)據(jù),需要的朋友參考下2015-12-12
jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03
一款基jquery超炫的動畫導(dǎo)航菜單可響應(yīng)單擊事件
。這款導(dǎo)航菜單,初始時頁面中間一個按鈕,單擊按鈕,菜單從左側(cè)飛入頁中。再次單擊按鈕,導(dǎo)航飛入左側(cè)消息2014-11-11

