帝王谷资源网 Design By www.wdxyy.com
之前发布了一款简易的计算器,今天做了一下修改,添加了键盘监听事件,不用再用鼠标点点点啦
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]+."#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代码:
<%@ page language="java" contentType="text/html; charset=UTF-" pageEncoding="UTF-"%> <!DOCTYPE html> <html> <head> <meta charset=" utf-"> <title>简易计算器</title> <jsp:include page="inc/easyui.jsp"></jsp:include> <style type="text/css"> button { font-size: px; font-weight: bold; width: px; } </style> <script type="text/javascript" src="/UploadFiles/2021-04-02/js.js">计算器样式布局时借鉴别人的,但是代码均是本人自己写的,由于时间原因没有来得及测试,各位大侠在使用过程中发现有bug欢迎提出,共同学习进步,谢谢。
标签:
jquery简易计算器
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年10月25日
2024年10月25日
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]