赞
踩
第一次笔记:HTML CSS JS学习笔记之实现网页计算器1
使用jQuery改进js文件
使用了相同的css样式
实现功能:
HTML文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>calculator</title> <script type="text/javascript" src="../js/jquery-3.6.0.js"></script> <link rel="stylesheet" type="text/css" href="../css/calculator.css"> </head> <body> <table cellpadding="0"> <tr class="showScreen"> <td colspan="4"> <input id="showScreen" disabled="disabled" value="0"> </td> </tr> <tr class="tr_bg"> <td><button>mc</button></td> <td><button>m+</button></td> <td><button>m-</button></td> <td><button>mr</button></td> </tr> <tr class="tr_bg"> <td><button id="AC" class="fc">AC</button></td> <td><button id="backspace" class="fc">⬅</button></td> <td><button class="symbol">+/-</button></td> <td><button class="symbol">/</button></td> </tr> <tr class="tr_bg"> <td><button class="num">7</button></td> <td><button class="num">8</button></td> <td><button class="num">9</button></td> <td><button class="symbol">X</button></td> </tr> <tr class="tr_bg"> <td><button class="num">4</button></td> <td><button class="num">5</button></td> <td><button class="num">6</button></td> <td><button class="symbol">-</button></td> </tr> <tr class="tr_bg"> <td><button class="num">1</button></td> <td><button class="num">2</button></td> <td><button class="num">3</button></td> <td><button class="symbol">+</button></td> </tr> <tr class="tr_bg"> <td colspan="2"><button class="num">0</button></td> <td><button class="symbol">.</button></td> <td><button id="ebg">=</button></td> </tr> </table> </body> <script type="text/javascript" src="../js/jQCalculator.js"></script> </html>
使用jQuery改进的JS文件:
let bSymbol = ""; let aSymbol = ""; let symbol = ""; let result = 0; $(document).ready(function() { $(".num").click(function () { //点击数字 $("#AC").text("C"); if (""==symbol) { bSymbol = bSymbol + $(this).text(); } else { aSymbol = aSymbol + $(this).text(); } $("#showScreen").val(bSymbol+symbol+aSymbol); }); $(".symbol").click(function () { //点击符号 if ("."==$(this).text()) { if (""==symbol) { //查找字符串是否包含子字符串 "." let index = bSymbol.search("\\."); if (index==-1) { //可以加小数点 if (bSymbol.length==0) { bSymbol = "0."; } else { bSymbol = bSymbol + "."; } } } else { //查找字符串是否包含子字符串 "." let index = aSymbol.search("\\."); if (index==-1) { //可以加小数点 if (aSymbol.length==0) { aSymbol = "0."; } else { aSymbol = aSymbol + "."; } } } } else if (symbol.length==0) { symbol = $(this).text(); } $("#showScreen").val(bSymbol+symbol+aSymbol); }); $("#ebg").click(function () { //点击等号 let x = ""; let y = ""; if (bSymbol.search("\\.")!=-1 || aSymbol.search("\\.")!=-1) { x = parseFloat(bSymbol); y = parseFloat(aSymbol); } else { x = parseInt(bSymbol); y = parseInt(aSymbol); } switch (symbol) { case "+": result = x + y; break; case "-": result = x - y; break; case "X": result = x * y; break; case "/": result = x / y; break; } //小数点保留6位 result = result + ""; let index = result.search("\\."); if (index!=-1) { let rLength = result.length-index-1; if (rLength>6) { //四舍五入 let lp = result.charAt(index+7); if (lp>=5) { //截取 let blp = parseInt(result.charAt(index+6))+1; result = result.substring(0,index+6)+blp; } else { result = result.substring(0,index+7); } } } bSymbol = result+""; //清空变量 aSymbol = ""; symbol = ""; $("#showScreen").val(bSymbol+symbol+aSymbol); }); $("#AC").click(function () { //清屏 $("#AC").text("AC"); bSymbol = ""; aSymbol = ""; symbol = ""; $("#showScreen").val(0); }); $("#backspace").click(function () { //点击退格符号 if (aSymbol.length>0) { aSymbol = aSymbol.substring(0,aSymbol.length-1); } else if (symbol.length>0) { symbol = symbol.substring(0,symbol.length-1); } else if (bSymbol.length>0) { bSymbol = bSymbol.substring(0,bSymbol.length-1); } $("#showScreen").val(bSymbol+symbol+aSymbol); }); });
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。