这篇文章主要讲解了“这么使用jQuery实现简易计算器功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“这么使用jQuery实现简易计算器功能”吧!页面效果:源码:<!D
这篇文章主要讲解了“这么使用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实现简易计算器功能这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是恰卡网,小编将为大家推送更多相关知识点的文章,欢迎关注!
本站部分文章来自网络或用户投稿,如无特殊说明或标注,均为本站原创发布。涉及资源下载的,本站旨在共享仅供大家学习与参考,如您想商用请获取官网版权,如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。