js如何实现计算器功能？js实现计算器功能的教程
发布时间：01/15 来源： 浏览：
关键词：
这篇文章介绍了js如何实现计算器功能的实例代码，简单易懂，适合初学者上手学习，有兴趣的同学快试试吧
该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。
效果图：
html代码：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">
<title>Insert title here</title>
<linktype="text/css"rel="stylesheet"href="css/style.css"></link>
</head>
<body>
<!--定义按键表格,每个按键对应一个事件触发-->
<divid="cal"class="cal">
<formaction="./calcuServlet"method="post"id="toCalcu">
<divclass="cont">
<inputid="upText"class="textShow"type="text"name="process"
maxlength="10"readonly="readonly"/>
<inputid="downText"class="text"type="text"name="text"value="0"
maxlength="10"readonly="readonly"/>
<inputtype="button"class="button"name="deleteAll"value="C"onclick="clearAllText()"/>
<inputtype="button"class="button"name="opposite"value="+/-"onclick="oppositeOp()"/>
<inputtype="button"class="button"name="delOne"value="←"onclick="deleteOneDigit()"/>
<inputtype="button"class="button"name="Add"value="+"onclick="clickOperation('+')"/>
<inputtype="button"class="button"name="seven"value="7"onclick="clickNum(7)"/>
<inputtype="button"class="button"name="eight"value="8"onclick="clickNum(8)"/>
<inputtype="button"class="button"name="nine"value="9"onclick="clickNum(9)"/>
<inputtype="button"class="button"name="Reduce"value="-"onclick="clickOperation('-')"/>
<inputtype="button"class="button"name="Four"value="4"onclick="clickNum(4)"/>
<inputtype="button"class="button"name="Five"value="5"onclick="clickNum(5)"/>
<inputtype="button"class="button"name="Sex"value="6"onclick="clickNum(6)"/>
<inputtype="button"class="button"name="Multip"value="x"onclick="clickOperation('x')"/>
<inputtype="button"class="button"name="One"value="1"onclick="clickNum(1)"/>
<inputtype="button"class="button"name="Two"value="2"onclick="clickNum(2)"/>
<inputtype="button"class="button"name="Three"value="3"onclick="clickNum(3)"/>
<inputtype="button"class="button"name="Division"value="÷"onclick="clickOperation('/')"/>
<inputtype="button"class="button"name="opposite"value="√"onclick="more()"/>
<inputtype="button"class="button"name="Zero"value="0"onclick="clickNum(0)"/>
<inputtype="button"class="button"name="Point"value="."onclick="clickNum('.')"/>
<inputtype="button"class="button"name="Equal"value="="onclick="calcu()"/>
</div>
</form>
</div>
<divclass="funcBtn">
<inputtype="button"id="show"class="button"value="show"onclick="show()"/> <input
type="button"id="hide"class="button"value="hide"onclick="hide()"/>
</div>
<scripttype="text/javascript"src="./js/jquery-1.7.2.min.js"></script>
<scripttype="text/javascript"src="./js/calcu.js"></script>
</body>
</html>
|
css代码：
|
@CHARSET"UTF-8";
.button {
width:73px;
height:50px;
margin-bottom:5px;
border:1pxsolid#ddd;
border-radius:1px;
font-weight:bold;
color:#1e395b;
background:aqua;
font-size:20px;
border-radius:3px;
}
.text {
width:300px;
border:1pxsolid#c2c2c2;
height:50px;
border-radius:5px;
font-size:24px;
text-align:right;
background:#ffffff;
margin-top:10px;
margin-bottom:10px;
}
.textShow{
width:300px;
border:1pxsolid#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:2pxsolid#99ccff;
margin:100pxauto;
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代码：
|
/**
*
*/
varcheckEqual =false;//Avoid repetition calcu
varopFlag =false;//Check repetition add operation
varupText = document.getElementById("upText");
varcal = document.getElementById("cal").style;
vardownText = document.getElementById("downText");
functionshow() {
cal.display ="block";
}
functionhide() {
cal.display ="none";
}
functionclearAllText() {
upText.value ="";
downText.value ="0";
opFlag =false;
checkEqual =false;
}
functionoppositeOp(){
downText.value = -downText.value;
}
functiondeleteOneDigit() {
downText.value = downText.value.substring(0, downText.value.length - 1);
if(downText.value ==""|| (downText.value.charAt(0) =="-"&& downText.value.charAt(1) =="")) {
downText.value ="0";
returndownText.value;
}
returndownText.value;
}
functionclickNum(num) {
if(num ==".") {
checkIfAddPoint(num);
}else{
checkIfAddNum(num);
}
checkEqual =false;
}
functioncheckIfAddPoint(num) {
if((num=="."&& downText.value =="0") || opFlag ==true) {
downText.value="0.";
opFlag =false;
}elseif(num =="."&& downText.value.indexOf(".") > -1) {
downText.value;
}else{
downText.value += num;
}
}
functioncheckIfAddNum(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;
}
}
functionclickOperation(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;
}
}
functioncheckdownTextValid(downText){
if(downText.charAt(downText.length-1) =="."){
returndownText.substring(0,downText.length-1);
}
returndownText;
}
functioncheckZero(upText,downText){
if(upText.charAt(upText.length-1) =="/"&& downText =="0"){
return"Error";
}
returndownText;
}
functionappendupTextValue(oldvalue,newvalue,operation){
if(oldvalue ==""){
returnoldvalue = newvalue+operation;
}elseif(opFlag!=true){
returnoldvaluee = oldvalue+newvalue+operation;
}else{
returnoldvalue.substring(0, oldvalue.length-1)+operation;
}
}
functioncalcu() {
if(!checkEqual){
downText.value = eval(upText.value+downText.value);
upText.value ="";
checkEqual =true;
}
}
window.document.onkeydown = chooseKey;
functionchooseKey(evt){
if(evt.keyCode == 13){alert("=");}
elseif(evt.keyCode == 8){deleteOneDigit();}
elseif(evt.keyCode == 27){clearAllText();}
elseif(evt.keyCode == 48){clickNum('0');}
elseif(evt.keyCode == 49){clickNum('1');}
elseif(evt.keyCode == 50){clickNum('2');}
elseif(evt.keyCode == 51){clickNum('3');}
elseif(evt.keyCode == 52){clickNum('4');}
elseif(evt.keyCode == 53){clickNum('5');}
elseif(evt.keyCode == 54){clickNum('6');}
elseif(evt.keyCode == 55){clickNum('7');}
elseif(evt.keyCode == 56){clickNum('8');}
elseif(evt.keyCode == 57){clickNum('9');}
elseif(evt.keyCode == 96){clickNum('0');}
elseif(evt.keyCode == 97){clickNum('1');}
elseif(evt.keyCode == 98){clickNum('2');}
elseif(evt.keyCode == 99){clickNum('3');}
elseif(evt.keyCode == 100){clickNum('4');}
elseif(evt.keyCode == 101){clickNum('5');}
elseif(evt.keyCode == 102){clickNum('6');}
elseif(evt.keyCode == 103){clickNum('7');}
elseif(evt.keyCode == 104){clickNum('8');}
elseif(evt.keyCode == 105){clickNum('9');}
elseif(evt.keyCode == 110){clickNum('.');}
elseif(evt.keyCode == 106){clickOperation('x');}
elseif(evt.keyCode == 107){clickOperation('+');}
elseif(evt.keyCode == 111){clickOperation('÷');}
elseif(evt.keyCode == 109){clickOperation('-');}
|
