之前发布了一款简易的计算器，今天做了一下修改，添加了键盘监听事件，不用再用鼠标点点点啦
JS代码：
var yunSuan = 0;// 运算符号，0-无运算;1-加法;2-减法;3-乘法;4-除法var change = 0;// 属于运算符后需要清空上一数值var num1 = 0;// 运算第一个数据var num2 = 0;// 运算第二个数据var cunChuValue = 0;// 存储的数值$(function() { $(".number").click(function() {// 点击数字触发事件 var num = $(this).attr('name'); var oldValue = $("#jieguo").html(); if (change == 1) { oldValue = "0"; change = 0; } var newValue = ""; if (num == -1) { oldValue = parseFloat(oldValue); newValue = oldValue * -1; } else if (num == ".") { if (oldValue.indexOf('.') == -1) newValue = oldValue + "."; else newValue = oldValue; } else { if (oldValue == 0 && oldValue.indexOf('.') == -1) { newValue = num; } else { newValue = oldValue + num; } } $("#jieguo").html(newValue); }); $("#qingPing").click(function() {// 点击清屏触发事件 $("#jieguo").html("0"); yunSuan = 0; change = 0; num1 = 0; num2 = 0; }); $("#tuiGe").click(function() {// 点击退格触发事件 if (change == 1) { yunSuan = 0; change = 0; } var value = $("#jieguo").html(); if (value.length == 1) { $("#jieguo").html("0"); } else { value = value.substr(0, value.length - 1); $("#jieguo").html(value); } }); $(".yunSuan").click(function() {// 点击运算符号触发事件 change = 1; yuSuan = $(this).attr('name'); var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num1 = parseFloat(value); }); $("#dengYu").click(function() {// 点击等于符号触发事件 var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num2 = parseFloat(value); var sum = 0; if (yuSuan == 1) { sum = num1 + num2; } else if (yuSuan == 2) { sum = num1 - num2; } else if (yuSuan == 3) { sum = num1 * num2; } else if (yuSuan == 4) { sum = num1 / num2; } else if (yuSuan == 0 || num1 == 0 || num2 == 0) { sum = num1 + num2; } var re = /^[0-9]+.?[0-9]*$/; if (re.test(sum)) { sum = sum.toFixed(2); } $("#jieguo").html(sum); change = 1; yuSuan = 0; num1 = 0; num2 = 0; }); $("#cunChu").click(function() {// 点击存储触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } cunChuValue = parseFloat(value); }); $("#quCun").click(function() {// 点击取存触发事件 change = 1; $("#jieguo").html(cunChuValue); }); $("#qingCun").click(function() {// 点击清存触发事件 change = 1; cunChuValue = 0; }); $("#leiCun").click(function() {// 点击累存触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } cunChuValue += parseFloat(value); }); $("#jiCun").click(function() {// 点击积存触发事件 change = 1; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } if (cunChuValue == 0) { cunChuValue = parseFloat(value); } else { cunChuValue = cunChuValue * parseFloat(value); } });});// 按键监听$(document) .keydown( function(event) { // 数字监听 if (((event.keyCode > 47 && event.keyCode < 58) || (event.keyCode > 95 && event.keyCode < 106) || (event.keyCode == 190 || event.keyCode == 110)) && !event.shiftKey) { keyDownNum(event.keyCode); } // "+"监听 if ((event.keyCode == 187 && event.shiftKey) || event.keyCode == 107) { keyDownYuSuan(1); } // "-"监听 if ((event.keyCode == 189 && event.shiftKey) || event.keyCode == 109) { keyDownYuSuan(2); } // "*"监听 if ((event.keyCode == 56 && event.shiftKey) || event.keyCode == 106) { keyDownYuSuan(3); } // "/"监听 if (event.keyCode == 191 || event.keyCode == 111) { keyDownYuSuan(4); } // "="监听 if ((event.keyCode == 187 && !event.shiftKey) || event.keyCode == 13) { $("#dengYu").click(); } // "回退"监听 if (event.keyCode == 8) { $("#tuiGe").click(); return false; } // "清屏"监听 if (event.keyCode == 27 || event.keyCode == 46 || (event.keyCode == 110 && event.shiftKey)) { $("#qingPing").click(); return false; } // "存储"监听 if (event.keyCode == 112) { $("#cunChu").click(); return false; } // "取存"监听 if (event.keyCode == 113) { $("#quCun").click(); return false; } // "累存"监听 if (event.keyCode == 114) { $("#leiCun").click(); return false; } // "积存"监听 if (event.keyCode == 115) { $("#jiCun").click(); return false; } // "清存"监听 if (event.keyCode == 117) { $("#qingCun").click(); return false; } });/** * 按键触发运算符 value 1-'+' 2-'-' 3-'*' 4-'/' */function keyDownYuSuan(value) { change = 1; yuSuan = value; var value = $("#jieguo").html(); var dianIndex = value.indexOf("."); if (dianIndex == value.length) { value = value.substr(0, value.length - 1); } num1 = parseFloat(value);}/** * 按键触发数字 code ASCLL码 */function keyDownNum(code) { var number = 0; if (code == 48 || code == 96) {// "0"监听 number = 0; } if (code == 49 || code == 97) {// "1"监听 number = 1; } if (code == 50 || code == 98) {// "2"监听 number = 2; } if (code == 51 || code == 99) {// "3"监听 number = 3; } if (code == 52 || code == 100) {// "4"监听 number = 4; } if (code == 53 || code == 101) {// "5"监听 number = 5; } if (code == 54 || code == 102) {// "6"监听 number = 6; } if (code == 55 || code == 103) {// "7"监听 number = 7; } if (code == 56 || code == 104) {// "8"监听 number = 8; } if (code == 57 || code == 105) {// "9"监听 number = 9; } if (code == 190 || code == 110) {// "."监听 number = "."; } var num = number; var oldValue = $("#jieguo").html(); if (change == 1) { oldValue = "0"; change = 0; } var newValue = ""; if (num == -1) { oldValue = parseFloat(oldValue); newValue = oldValue * -1; } else if (num == ".") { if (oldValue.indexOf('.') == -1) newValue = oldValue + "."; else newValue = oldValue; } else { if (oldValue == 0 && oldValue.indexOf('.') == -1) { newValue = num; } else { newValue = oldValue + num; } } $("#jieguo").html(newValue);}
HTML/CSS代码：
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta charset=" utf-8"> 7 <title>简易计算器</title> 8 <jsp:include page="inc/easyui.jsp"></jsp:include> 9 <style type="text/css"> 10 button { 11 font-size: 18px; 12 font-weight: bold; 13 width: 90px; 14 } 15 </style> 16 <script type="text/javascript" src="js.js"></script> 17 </head> 18 <body> 19 <table> 20 <tr> 21 <td colspan="4"> 22 <div id="jieguo" 23 style="width: 370px;height: 30px;font-size: 30px;text-align: right;font-weight:bold;color: red;">0</div> 24 </td> 25 </tr> 26 <tr style="height: 40px;"> 27 <td> 28 <button id="cunChu">存储(F1)</button></td> 29 <td> 30 <button id="quCun">取存(F2)</button></td> 31 <td> 32 <button id="tuiGe"> 退 格 </button></td> 33 <td> 34 <button id="qingPing"> 清 屏 </button></td> 35 </tr> 36 <tr style="height: 40px;"> 37 <td> 38 <button id="leiCun">累存(F3)</button></td> 39 <td> 40 <button id="jiCun">积存(F4)</button></td> 41 <td> 42 <button id="qingCun">清存(F6)</button></td> 43 <td> 44 <button id="Chuyi" class="yunSuan" name="4"> ÷ </button> 45 </td> 46 </tr> 47 <tr style="height: 40px;"> 48 <td> 49 <button id="seven" class="number" name="7"> 7 </button> 50 </td> 51 <td> 52 <button id="eight" class="number" name="8"> 8 </button> 53 </td> 54 <td> 55 <button id="nine" class="number" name="9"> 9 </button> 56 </td> 57 <td> 58 <button id="chengYi" class="yunSuan" name="3"> × </button> 59 </td> 60 </tr> 61 <tr style="height: 40px;"> 62 <td> 63 <button id="four" class="number" name="4"> 4 </button> 64 </td> 65 <td> 66 <button id="five" class="number" name="5"> 5 </button> 67 </td> 68 <td> 69 <button id="six" class="number" name="6"> 6 </button> 70 </td> 71 <td> 72 <button id="jianQu" class="yunSuan" name="2"> - </button> 73 </td> 74 </tr> 75 <tr style="height: 40px;"> 76 <td> 77 <button id="one" class="number" name="1"> 1 </button> 78 </td> 79 <td> 80 <button id="two" class="number" name="2"> 2 </button> 81 </td> 82 <td> 83 <button id="three" class="number" name="3"> 3 </button> 84 </td> 85 <td> 86 <button id="jiaShang" class="yunSuan" name="1"> + </button> 87 </td> 88 </tr> 89 <tr style="height: 40px;"> 90 <td> 91 <button id="zero" class="number" name="0"> 0 </button> 92 </td> 93 <td> 94 <button id="dian" class="number" name="."> . </button> 95 </td> 96 <td> 97 <button id="zhengFu" class="number" name="-1"> +/- </button> 98 </td> 99 <td>100 <button id="dengYu"> = </button></td>101 </tr>102 </table>103 </body>104 </html>
计算器样式布局有所借鉴，代码均为原创，未经授权禁止转载；内容未经过严格测试，如遇BUG欢迎提出，谢谢！
Harga syiling U hari ini
Apakah alamat laman sesawang Ouyi?
Arah aliran harga harga Eth hari ini
Bagaimana untuk menyelesaikan ralat pangkalan data discuz
Bagaimana untuk menyemak sejarah muat turun di TikTok
Apa yang perlu dilakukan jika kod skrin biru 0x0000007e berlaku
Pengenalan pelan penyelenggaraan pelayan
kata putus baris paksa
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
