最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
js如何实现计算器功能？js实现计算器功能的教程
时间：2016-12-21 编辑：简简单单 来源：一聚教程网
该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。
效果图：
html代码：
|
maxlength="10"readonly="readonly"/>
maxlength="10"readonly="readonly"/>
type="button"id="hide"class="button"value="hide"onclick="hide()"/>
|
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('-');}
|
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28