用统计功能计算机计算js,简单实现JS计算器功能

该计算器功能:

1.校验:小数点,重复计算,以及大量更符合用户体验的操作。

2.能够从键盘输入。

效果图:

2b0aeb01f63ed10ef94f65bbb1c9eeda.png

html代码:

Insert title here

maxlength="10" readonly="readonly" />

maxlength="10" readonly="readonly" />

type="button" id="hide" class="button" value="hide" οnclick="hide()" />

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('-');}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值