简单实现JS计算器功能
更新时间:2017年1月9日 10:00 点击:1864
该计算器功能:
1.校验:小数点,重复计算,以及大量更符合用户体验的操作。
2.能够从键盘输入。
效果图:
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link type="text/css" rel="stylesheet" href="css/style.css"></link> </head> <body> <!--定义按键表格,每个按键对应一个事件触发--> <div id="cal" class="cal"> <form action="./calcuServlet" method="post" id="toCalcu"> <div class="cont"> <input id="upText" class="textShow" type="text" name="process" maxlength="10" readonly="readonly" /> <input id="downText" class="text" type="text" name="text" value="0" maxlength="10" readonly="readonly" /> <input type="button" class="button" name="deleteAll" value="C" onclick="clearAllText()" /> <input type="button" class="button" name="opposite" value="+/-" onclick="oppositeOp()" /> <input type="button" class="button" name="delOne" value="←" onclick="deleteOneDigit()" /> <input type="button" class="button" name="Add" value="+" onclick="clickOperation('+')" /> <input type="button" class="button" name="seven" value="7" onclick="clickNum(7)" /> <input type="button" class="button" name="eight" value="8" onclick="clickNum(8)" /> <input type="button" class="button" name="nine" value="9" onclick="clickNum(9)" /> <input type="button" class="button" name="Reduce" value="-" onclick="clickOperation('-')" /> <input type="button" class="button" name="Four" value="4" onclick="clickNum(4)" /> <input type="button" class="button" name="Five" value="5" onclick="clickNum(5)" /> <input type="button" class="button" name="Sex" value="6" onclick="clickNum(6)" /> <input type="button" class="button" name="Multip" value="x" onclick="clickOperation('x')" /> <input type="button" class="button" name="One" value="1" onclick="clickNum(1)" /> <input type="button" class="button" name="Two" value="2" onclick="clickNum(2)" /> <input type="button" class="button" name="Three" value="3" onclick="clickNum(3)" /> <input type="button" class="button" name="Division" value="÷" onclick="clickOperation('/')" /> <input type="button" class="button" name="opposite" value="√" onclick="more()" /> <input type="button" class="button" name="Zero" value="0" onclick="clickNum(0)" /> <input type="button" class="button" name="Point" value="." onclick="clickNum('.')" /> <input type="button" class="button" name="Equal" value="=" onclick="calcu()" /> </div> </form> </div> <div class="funcBtn"> <input type="button" id="show" class="button" value="show" onclick="show()" /> <input type="button" id="hide" class="button" value="hide" onclick="hide()" /> </div> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./js/calcu.js"></script> </body> </html>
css代码:
@CHARSET "UTF-8"; .button { width: 73px; height: 50px; margin-bottom: 5px; border: 1px solid #ddd; border-radius: 1px; font-weight: bold; color: #1e395b; background: aqua; font-size:20px; border-radius: 3px; } .text { width: 300px; border: 1px solid #c2c2c2; height: 50px; border-radius: 5px; font-size: 24px; text-align: right; background: #ffffff; margin-top: 10px; margin-bottom: 10px; } .textShow{ width: 300px; border: 1px solid #c2c2c2; height: 40px; border-radius: 5px; font-size: 18px; text-align: right; background: #ffffff; margin-top: 10px; margin-bottom: 10px; } .cal{ margin-left:200px; border:2px solid #99ccff; margin:100px auto; position:relative; width:330px; height:420px; border-radius: 10px; } .cont{ margin-left: 10px; } .funcBtn{ padding-left: 580px; border-radius: 10px; font-size: 20px; position: fixed; }
js代码:
/** * */ var checkEqual = false;//Avoid repetition calcu var opFlag = false; //Check repetition add operation var upText = document.getElementById("upText"); var cal = document.getElementById("cal").style; var downText = document.getElementById("downText"); function show() { cal.display = "block"; } function hide() { cal.display = "none"; } function clearAllText() { upText.value = ""; downText.value = "0"; opFlag = false; checkEqual = false; } function oppositeOp(){ downText.value = -downText.value; } function deleteOneDigit() { downText.value = downText.value.substring(0, downText.value.length - 1); if (downText.value == "" || (downText.value.charAt(0) == "-" && downText.value.charAt(1) == "")) { downText.value = "0"; return downText.value; } return downText.value; } function clickNum(num) { if(num == ".") { checkIfAddPoint(num); } else { checkIfAddNum(num); } checkEqual = false; } function checkIfAddPoint(num) { if((num=="." && downText.value == "0") || opFlag == true) { downText.value="0."; opFlag = false; } else if(num == "." && downText.value.indexOf(".") > -1) { downText.value; } else { downText.value += num; } } function checkIfAddNum(num) { if((num != "." && downText.value == "0" && downText.value[1] != ".") || opFlag == true || downText.value == "Infinity" || checkEqual == true) { downText.value = num; opFlag = false; } else { downText.value += num; } } function clickOperation(op){ checkEqual = false; downText.value = checkdownTextValid(downText.value); downText.value = checkZero(upText.value,downText.value); switch(op){ case "+":{ upText.value = appendupTextValue(upText.value,downText.value,"+"); opFlag = true; }break; case "-":{ upText.value = appendupTextValue(upText.value,downText.value,"-"); opFlag = true; }break; case "x":{ upText.value = appendupTextValue(upText.value,downText.value,"*"); opFlag = true; }break; case "/":{ upText.value = appendupTextValue(upText.value,downText.value,"/"); opFlag = true; }break; } } function checkdownTextValid(downText){ if(downText.charAt(downText.length-1) == "."){ return downText.substring(0,downText.length-1); } return downText; } function checkZero(upText,downText){ if(upText.charAt(upText.length-1) == "/" && downText == "0"){ return "Error"; } return downText; } function appendupTextValue(oldvalue,newvalue,operation){ if(oldvalue == ""){ return oldvalue = newvalue+operation; } else if(opFlag!=true){ return oldvaluee = oldvalue+newvalue+operation; } else{ return oldvalue.substring(0, oldvalue.length-1)+operation; } } function calcu() { if(!checkEqual){ downText.value = eval(upText.value+downText.value); upText.value = ""; checkEqual = true; } } window.document.onkeydown = chooseKey; function chooseKey(evt){ if(evt.keyCode == 13){alert("=");} else if(evt.keyCode == 8){deleteOneDigit();} else if(evt.keyCode == 27){clearAllText();} else if(evt.keyCode == 48){clickNum('0');} else if(evt.keyCode == 49){clickNum('1');} else if(evt.keyCode == 50){clickNum('2');} else if(evt.keyCode == 51){clickNum('3');} else if(evt.keyCode == 52){clickNum('4');} else if(evt.keyCode == 53){clickNum('5');} else if(evt.keyCode == 54){clickNum('6');} else if(evt.keyCode == 55){clickNum('7');} else if(evt.keyCode == 56){clickNum('8');} else if(evt.keyCode == 57){clickNum('9');} else if(evt.keyCode == 96){clickNum('0');} else if(evt.keyCode == 97){clickNum('1');} else if(evt.keyCode == 98){clickNum('2');} else if(evt.keyCode == 99){clickNum('3');} else if(evt.keyCode == 100){clickNum('4');} else if(evt.keyCode == 101){clickNum('5');} else if(evt.keyCode == 102){clickNum('6');} else if(evt.keyCode == 103){clickNum('7');} else if(evt.keyCode == 104){clickNum('8');} else if(evt.keyCode == 105){clickNum('9');} else if(evt.keyCode == 110){clickNum('.');} else if(evt.keyCode == 106){clickOperation('x');} else if(evt.keyCode == 107){clickOperation('+');} else if(evt.keyCode == 111){clickOperation('÷');} else if(evt.keyCode == 109){clickOperation('-');}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
下一篇: js返回顶部实例分享
相关文章
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 使用require('crypto')调用加密模块。加密模块需要底层系统提供OpenSSL的支持。它提供了一种安全凭证的封装方式,可以用于HTTPS安全网络以及普通HTTP连接。该模块还提供了一套针对OpenSSL的hash(哈希),hmac(密钥哈希),cipher...2014-06-07
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
- 这篇文章主要介绍了Nodejs回调加超时限制两种实现方法的相关资料,需要的朋友可以参考下...2017-06-15
- 1.什么是异步编程? 异步编程是指由于异步I/O等因素,无法同步获得执行结果时, 在回调函数中进行下一步操作的代码编写风格,常见的如setTimeout函数、ajax请求等等。示例: for (var i = 1; i <= 3; i++) {setTimeout(functi...2015-10-23