jQuery实现简易计算器功能
更新时间:2022年07月21日 11:33:45 作者:纵稚
这篇文章主要为大家详细介绍了jQuery实现简易计算器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud)
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
jQuery制作一个简易计算器,供大家参考,具体内容如下
页面效果:
源码:
<!DOCTYPE html> <html> <head> ? ? <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> ? ? <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="http://9i0i.com/pic.php?p=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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持程序员之家。
相关文章
Bootstrap嵌入jqGrid,使你的table牛逼起来
这篇文章主要介绍了Bootstrap嵌入jqGrid,使你的table牛逼起来,需要的朋友可以参考下2016-05-05jQuery插件学习教程之SlidesJs轮播+Validation验证
这篇文章主要介绍了jQuery插件学习教程之SlidesJs轮播+Validation验证的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下2016-07-07利用jQuery及AJAX技术定时更新GridView的某一列数据
这篇文章主要介绍了利用jQuery及AJAX技术定时更新GridView的某一列数据的方法,这里的GridView是指C#软件开发中的GridView控件,需要的朋友可以参考下2015-12-12jQuery插件form-validation-engine正则表达式操作示例
这篇文章主要介绍了jQuery插件form-validation-engine正则表达式操作,结合实例形式分析了jQuery插件form-validation-engine进行正则验证操作的相关技巧,需要的朋友可以参考下2017-02-02jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
这篇文章主要介绍了jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签的相关资料,需要的朋友可以参考下2016-03-03
最新评论