如何用jQuery编写一个支持长尾关键词的智能计算器？

2026-03-31 17:391阅读0评论SEO教程

内容介绍
文章标签
相关推荐

本文共计1056个文字，预计阅读时间需要5分钟。

jQuery创建一个简易计算器，提供参考，包含整体内容如下：

页面效果：- 源码： !DOCTYPE 简易计算器

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。

标签：jquery 实现简易计算器功能