利用jQuery實作一個簡單的計算器
一個簡單的jQuery計算器，只是實作了一個連續計算的功能
<!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){ //符号点击事件响应
var numnow = $('#show');
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(){ //清空函数
$('#show').val('0');
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 '+':
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實作一個簡單的計算器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
四款值得推薦的AI輔助程式工具
Apr 22, 2024 pm 05:34 PM
這個AI輔助程式工具在這個AI快速發展的階段，挖掘出了一大批好用的AI輔助程式工具。 AI輔助程式設計工具能夠提升開發效率、提升程式碼品質、降低bug率，是現代軟體開發過程中的重要助手。今天大姚給大家分享4款AI輔助程式工具（而且都支援C#語言），希望對大家有幫助。 https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫程式碼，從而將更多精力集中在問題解決和協作上。 Git
AI程式設計師哪家強？探索Devin、通靈靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距離世界首個AI程式設計師Devin誕生不足一個月，普林斯頓大學的NLP團隊開發了一個開源AI程式設計師SWE-agent。它利用GPT-4模型在GitHub儲存庫中自動解決問題。 SWE-agent在SWE-bench測試集上的表現與Devin相似，平均耗時93秒，解決了12.29%的問題。 SWE-agent透過與專用終端交互，可以開啟、搜尋文件內容，使用自動語法檢查、編輯特定行，以及編寫和執行測試。 （註：以上內容為原始內容微調，但保留了原文中的關鍵訊息，未超過指定字數限制。）SWE-A
學習如何利用Go語言開發行動應用程式
Mar 28, 2024 pm 10:00 PM
Go語言開發行動應用程式教學隨著行動應用程式市場的不斷蓬勃發展，越來越多的開發者開始探索如何利用Go語言開發行動應用程式。作為一種簡潔高效的程式語言，Go語言在行動應用開發中也展現了強大的潛力。本文將詳細介紹如何利用Go語言開發行動應用程序，並附上具體的程式碼範例，幫助讀者快速入門並開始開發自己的行動應用程式。一、準備工作在開始之前，我們需要準備好開發環境和工具。首
Go語言前端技術探秘：前端開發新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的程式語言，在後端開發領域廣受歡迎。然而，很少有人將Go語言與前端開發聯繫起來。事實上，使用Go語言進行前端開發不僅可以提高效率，還能為開發者帶來全新的視野。本文將探討使用Go語言進行前端開發的可能性，並提供具體的程式碼範例，幫助讀者更了解這一領域。在傳統的前端開發中，通常會使用JavaScript、HTML和CSS來建立使用者介面
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
Android開發最適合的Linux發行版是哪一個？
Mar 14, 2024 pm 12:30 PM
Android開發是一項繁忙而又令人興奮的工作，而選擇適合的Linux發行版來進行開發則顯得尤為重要。在眾多的Linux發行版中，究竟哪一個最適合Android開發呢？本文將從幾個方面來探討這個問題，並給出具體的程式碼範例。首先，我們來看看目前流行的幾個Linux發行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優點和特點。
VSCode最適合哪種框架開發？
Mar 25, 2024 pm 02:03 PM
VSCode是一款功能強大、靈活、易於擴充的開源程式碼編輯器，廣受開發者青睞。它支援眾多程式語言和框架，能夠滿足不同專案需求。但是，針對不同的框架，VSCode的優勢可能有所不同。本文將討論VSCode在不同框架開發中的適用性，並提供具體的程式碼範例。 1.ReactReact是一款流行的JavaScript庫，用於建立使用者介面。在使用React開發專案時，
Git 必知秘技：讓 Java 開發驚人全場
Mar 06, 2024 am 08:25 AM
1.分支與合併分支允許您在不影響主分支的情況下試驗程式碼變更。使用gitcheckout建立新分支，並在嘗試新功能或修復錯誤時使用它。完成後，使用gitmerge將變更合併回主分支。範例程式碼：gitcheckout-bnew-feature//在new-feature分支上進行更改gitcheckoutmaingitmergenew-feature2.暫存工作使用gitadd將您要追蹤的變更新增至暫存區。這使您可以選擇性地提交更改，而無需提交所有修改。範例程式碼：gitaddMyFile.java3
