一個(gè)簡(jiǎn)單的jQuery計(jì)算器實(shí)現(xiàn)了連續(xù)計(jì)算功能
一個(gè)簡(jiǎn)單的jQuery計(jì)算器,只是實(shí)現(xiàn)了一個(gè)連續(xù)計(jì)算的功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"/>
<title>Javascript計(jì)算器</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(); //符號(hào)集合
symarr[0] = '+';
symarr[1] = '/';
symarr[2] = '*';
symarr[3] = '-';
symarr[4] = '=';
function number(n){
var numnow = $('#show');
var _exist=$.inArray(lastclick,symarr); //判斷上次點(diǎn)擊是否為符號(hào)
if (numnow.val() == 0 || _exist != -1) {//若顯示框?yàn)? 或者上次點(diǎn)擊為符號(hào),則重新記錄顯示框
numnow.val($(n).val());
}else{
numnow.val(parseInt(numnow.val()) * 10 +parseInt($(n).val()));
}
lastclick = $(n).val(); // 更新上次點(diǎn)擊
}
function calsym(cs){ //符號(hào)點(diǎn)擊事件響應(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ù)點(diǎn)操作符的處理,及第一次點(diǎn)擊操作符處理
symble = $(cs).val();
}else{ //正常計(jì)算狀態(tài)
num1 = numnow.val();
var result = calculate(symble,num0,num1);
symble = $(cs).val(); //上行及本行:先計(jì)算之前的運(yùn)算符及結(jié)果,再更新運(yùn)算符為本次點(diǎn)擊
num0 = result;
numnow.val(result);
num1 = null;
}
lastclick = $(cs).val(); // 更新上次點(diǎn)擊
}
function clearCal(){ //清空函數(shù)
$('#show').val('0');
num0 = null;
num1 = null;
symble = null;
lastclick = null;
}
function calculate(sym,m,n){ //計(jì)算并返回結(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>
- jQuery實(shí)現(xiàn)簡(jiǎn)易計(jì)算器功能
- jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器
- jquery實(shí)現(xiàn)計(jì)算器小功能
- jQuery實(shí)現(xiàn)簡(jiǎn)單計(jì)算器功能
- jQuery實(shí)現(xiàn)可以計(jì)算進(jìn)制轉(zhuǎn)換的計(jì)算器
- jQuery實(shí)現(xiàn)計(jì)算器功能
- jQuery實(shí)現(xiàn)的簡(jiǎn)單在線計(jì)算器功能
- 基于HTML+CSS,jQuery編寫的簡(jiǎn)易計(jì)算器后續(xù)(添加了鍵盤監(jiān)聽)
- jQuery實(shí)現(xiàn)簡(jiǎn)易的計(jì)算器
相關(guān)文章
jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實(shí)現(xiàn)方法,涉及jQuery針對(duì)表格與頁面元素的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-06-06
全面解析jQuery中的$(window)與$(document)的用法區(qū)別
這篇文章主要介紹了jQuery中的$(window)與$(document)的用法區(qū)別,具體內(nèi)容大家可查看下文的詳細(xì)講解,感興趣的小伙伴們可以參考一下。2017-08-08
基于jquery實(shí)現(xiàn)的可以編輯選擇的下拉框的代碼
主要是通過CSS樣式表中clip來實(shí)現(xiàn)的。兼容IE6-8,谷歌,火狐等。2010-11-11
通過點(diǎn)擊jqgrid表格彈出需要的表格數(shù)據(jù)
在眾多的表格插件中,jqgrid的特點(diǎn)是非常鮮明的,所以jqgrid表格插件用處非常廣泛,本篇文章給大家介紹通過點(diǎn)擊jqgrid表格彈出需要的表格數(shù)據(jù),需要的朋友參考下2015-12-12
利用JQUERY實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求等待的實(shí)例
下面小編就為大家分享一篇利用JQUERY實(shí)現(xiàn)多個(gè)AJAX請(qǐng)求等待的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery用unbind方法去掉hover事件及其他方法介紹
jquery怎么去掉hover以為直接unbind(hover)就可以搞定,結(jié)果很失敗,接下來介紹下取消hover事件的多種方法,感興趣的你可以參考下哈2013-03-03
jquery Tab效果和動(dòng)態(tài)加載的簡(jiǎn)單實(shí)例
一款基jquery超炫的動(dòng)畫導(dǎo)航菜單可響應(yīng)單擊事件

