jQuery實現(xiàn)簡易計算器功能
更新時間：2022年07月21日 11:33:45 作者：縱稚
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)簡易計算器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
jQuery制作一個簡易計算器，供大家參考，具體內容如下
頁面效果:
源碼：
<!DOCTYPE html>
<html>
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
? ? <title></title>
? ? <meta charset="utf-8" />
? ? <style>
? ? ? ? #all {
? ? ? ? ? ? width: 600px;
? ? ? ? ? ? margin: 0px auto;
? ? ? ? ? ? background-color: deepskyblue;
? ? ? ? ? ? height: 400px;
? ? ? ? ? ? padding-top: 20px;
? ? ? ? }
? ? ? ? #myCal {
? ? ? ? ? ? width: 500px;
? ? ? ? ? ? height: 300px;
? ? ? ? ? ? margin: 0px auto;
? ? ? ? }
? ? ? ? table {
? ? ? ? ? ? border-collapse: collapse;
? ? ? ? ? ? text-align: center;
? ? ? ? }
? ? ? ? td {
? ? ? ? ? ? border: 1px solid white;
? ? ? ? }
? ? ? ? button {
? ? ? ? ? ? width: 96px;
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? font-size: 26px;
? ? ? ? ? ? font-family: "宋體";
? ? ? ? ? ? color: navy;
? ? ? ? ? ? background-color:white;
? ? ? ? }
? ? </style>
? ? <script src="js/jquery-1.8.2.min.js"></script>
? ? <script>
? ? ? ? var Num1 = ""; ?//存放數(shù)字1
? ? ? ? var Num2 = ""; ?//存放數(shù)字2
? ? ? ? var Char = ""; ?//存放運算符
? ? ? ? var Result = "";//存放結果
? ? ? ? $(function () {//頁面加載時綁定事件
? ? ? ? ? ? $("button").hover(function () {
? ? ? ? ? ? ? ? $(this).css({"background-color":"orange","color":"white"});//鼠標懸停時更改背景顏色與字體顏色
? ? ? ? ? ? }, function () {
? ? ? ? ? ? ? ? $(this).css({ "background-color": "white", "color": "navy" });
? ? ? ? ? ? });
? ? ? ? ? ? //給運算符添加點擊事件
? ? ? ? ? ? $('.char').click(function () {
? ? ? ? ? ? ? ? if (Num2 == "") {
? ? ? ? ? ? ? ? ? ? Char = $(this).text();
? ? ? ? ? ? ? ? ? ? $('#content').val(Num1 + Char);
? ? ? ? ? ? ? ? } else if(Num2!="") {
? ? ? ? ? ? ? ? ? ? switch (Char) {//當Num2存在時 代表兩個數(shù)字已存在,并點了一個新運算符 ?則直接進行運算
? ? ? ? ? ? ? ? ? ? ? ? case "+":
? ? ? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) + parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "-":
? ? ? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) - parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "*":
? ? ? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) * parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? ? ? case "/":
? ? ? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) / parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? Num2 = "";//清空Num2的值
? ? ? ? ? ? ? ? ? ? Num1 = Result;//將結果的值賦值給Num1
? ? ? ? ? ? ? ? ? ? Char = $(this).text();//更新下一次點擊 的運算符
? ? ? ? ? ? ? ? ? ? $('#content').val(Num1 + Char);//將更新完的運算符 和結果一起拼接到文本框中
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? //給數(shù)字添加點擊事件
? ? ? ? ? ? $('.num').click(function () {
? ? ? ? ? ? ? ? var txt = $(this).text();//拿到當前點擊的數(shù)字按鈕
? ? ? ? ? ? ? ? if (Char == "") {//如果運算符為空 則代表第一次點擊 或者點擊了等于號?
? ? ? ? ? ? ? ? ? ? if (Result != Num1) {//如果Result!=Num1 則代表 沒有點擊=號
? ? ? ? ? ? ? ? ? ? ? ? Num1 = Num1 + txt;//正常拼接
? ? ? ? ? ? ? ? ? ? ? ? $('#content').val(Num1);//顯示
? ? ? ? ? ? ? ? ? ? } else {//點擊了=號
? ? ? ? ? ? ? ? ? ? ? ? Num1 = "";//清空Num1值 ?以免 等于號計算出的結果直接拼接了新的值
? ? ? ? ? ? ? ? ? ? ? ? Num1 = Num1 + txt;//拼接新的輸入值
? ? ? ? ? ? ? ? ? ? ? ? $('#content').val(Num1);//顯示
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }else {
? ? ? ? ? ? ? ? ? ? Num2 = Num2 + txt;//如果運算符已存在 則輸入的是第二個數(shù)
? ? ? ? ? ? ? ? ? ? $('#content').val(Num1 + Char + Num2);//拼接
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? ? ? $(".clear").click(function () {//歸零按鈕 清空所有值 并將輸入框按鈕的值還原成0?
? ? ? ? ? ? ? ? Num1 = "";
? ? ? ? ? ? ? ? Num2 = "";
? ? ? ? ? ? ? ? Char = "";
? ? ? ? ? ? ? ? Result = "";
? ? ? ? ? ? ? ? $('#content').val("0");
? ? ? ? ? ? });
? ? ? ? ? ? $(".result").click(function () {
? ? ? ? ? ? ? ? switch (Char) {//做一個判斷，不同的運算符做不同的運算
? ? ? ? ? ? ? ? ? ? case "+":
? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) + parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "-":
? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) - parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "*":
? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) * parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? ? ? case "/":
? ? ? ? ? ? ? ? ? ? ? ? Result = parseFloat(Num1) / parseFloat(Num2);
? ? ? ? ? ? ? ? ? ? ? ? break;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? $('#content').val(Result);
? ? ? ? ? ? ? ? Num1 = Result;//將計算結果賦值給Num1
? ? ? ? ? ? ? ? Char = "";//在這里清空原有的運算符 以跟直接點擊+-/*運算符區(qū)分開
? ? ? ? ? ? ? ? Num2 = "";//清空Num2的值
? ? ? ? ? ? });
? ? ? ? });
? ? </script>
</head>
<body>
? ? <div id="all">
? ? ? ? <div id="myCal">
? ? ? ? ? ? <div style="margin:auto;text-align:center;font-size:20px;font-family:'宋體';color:navy'">jQuery簡易計算器</div>
? ? ? ? ? ? <table style="margin-top:20px;">
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td colspan="4"><input id="content" value="0" style="height:40px;width:490px;font-size:30px;color:blue;font-family:'宋體';text-align:right" /></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td><button class="num">7</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">8</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">9</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="char">+</button></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td><button class="num">4</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">5</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">6</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="char">-</button></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td><button class="num">1</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">2</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="num">3</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="char">*</button></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? <tr>
? ? ? ? ? ? ? ? ? ? <td><button class="num">0</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="clear">C</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="char">/</button></td>
? ? ? ? ? ? ? ? ? ? <td><button class="result">=</button></td>
? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? </table>
? ? ? ? </div>
? ? </div>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了jQuery判斷一個元素是否可見的方法,涉及jQuery鏈式操作及樣式判定的技巧,需要的朋友可以參考下2015-06-06
這篇文章主要介紹了解決jquery版本沖突的有效方法,對于web設計的兼容性調試很有借鑒價值,需要的朋友可以參考下2014-09-09
本篇文章主要是對使用jQuery與JSONP輕松解決跨域訪問的問題進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了jquery分割字符串的方法,涉及jQuery中使用split方法進行字符串分割的相關技巧,需要的朋友可以參考下2015-06-06
這篇文章主要演示了5個jQuery Mobile 觸摸事件實例,需要的朋友可以參考下。2016-06-06
jquery點擊頁面任何區(qū)域實現(xiàn)鼠標焦點十字效果
鼠標點擊聚焦，地圖定位，在圖片上突出顯示，焦點定位頁面元素，這些都是在系統(tǒng)開發(fā)是經(jīng)常需要用到的，下面為大家介紹下具體的實現(xiàn)，感興趣的朋友可以參考下哈2013-06-06
EasyUi 打開對話框后控件賦值及賦值后不顯示的問題解決辦法
這篇文章主要介紹了easyUi 打開對話框后控件賦值，以及賦值后不顯示的問題解決辦法，解決方法非常簡單，只需要將賦值語句修改下就好，下面小編給大家簡單介紹下，需要的朋友參考下2017-01-01
這篇文章主要介紹了jQuery實現(xiàn)的點擊按鈕改變樣式功能,涉及jQuery基于事件響應的頁面元素樣式動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-07-07
Jquery validation remote 驗證的緩存問題解決方法
這篇文章主要介紹了Jquery validation remote 驗證的緩存問題的解決方法 ,需要的朋友可以參考下2014-03-03
jQuery md5加密插件jQuery.md5.js用法示例
這篇文章主要介紹了jQuery md5加密插件jQuery.md5.js用法,結合實例形式簡單分析了jQuery md5加密插件jquery.md5.js的簡單使用技巧,需要的朋友可以參考下2018-08-08