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 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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did123784