溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“這么使用jQuery實現簡易計算器功能”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“這么使用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 = ""; //存放數字1
var Num2 = ""; //存放數字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存在時 代表兩個數字已存在,并點了一個新運算符 則直接進行運算
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);//將更新完的運算符 和結果一起拼接到文本框中
}
});
//給數字添加點擊事件
$('.num').click(function () {
var txt = $(this).text();//拿到當前點擊的數字按鈕
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;//如果運算符已存在 則輸入的是第二個數
$('#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 = "";//在這里清空原有的運算符 以跟直接點擊+-/*運算符區分開
Num2 = "";//清空Num2的值
});
});
</script>
</head>
<body>
<div id="all">
<div id="myCal">
<div >jQuery簡易計算器</div>
<table >
<tr>
<td colspan="4"><input id="content" value="0" /></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實現簡易計算器功能這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
