JavaScript实现简单的计算器

最新推荐文章于 2021-08-09 20:30:23 发布

lolkakii

最新推荐文章于 2021-08-09 20:30:23 发布

阅读量1.9k

点赞数

分类专栏：练手练手文章标签： javascript

本文链接：https://blog.csdn.net/lolkakii/article/details/60893247

版权

练手练手专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript实现简单的计算器

计算器有加减乘除、退格、清空的基本功能

新手来找虐哈哈哈.

用到了事件委托，还有字符串的操作方法

JavaScript代码

//获得输入的键值
var show = document.querySelector(".screen input");
var keys = document.querySelector(".keys");
//console.log(show.value)
//给每个按钮添加事件
keys.addEventListener("click",function(e){
    e=e||window.event;
    var target = e.target||e.srcElement;
    e.preventDefault();
     if(target.value=='C'){
        target.onclick=clearBoth();
    }else if(target.value=='←'){
        target.onclick=delString();
    }else if(target.value=='='){
        target.onclick=getResult(target);
    }else if(target.nodeName.toUpperCase()=='DIV'){ //取消了点击非按钮部分显示undefined
        return -1;
    }else{
        target.onclick=connectStr(target);
    }
},false);

//运算
function getResult(target){
    var isAdd = show.value.indexOf('+');
    var isSub = show.value.indexOf('-');
    var isMul = show.value.indexOf('×');
    var isDivi = show.value.indexOf('÷');
    if(isAdd>=0){
        var result=Number(show.value.split('+')[0])+Number(show.value.split('+')[1]);
        show.value=result;
    }else if(isSub>=0){
        var result=Number(show.value.split('-')[0])-Number(show.value.split('-')[1]);
        show.value=result;
    }else if(isMul>=0){
        var result=Number(show.value.split('×')[0])*Number(show.value.split('×')[1]);
        show.value=result;
    }else if(isDivi>=0){
        var result=Number(show.value.split('÷')[0])/Number(show.value.split('÷')[1]);
        show.value=result;
    }else{
        return;
    }

}
//清空
function clearBoth(){

    show.value="0";
}
//退格
function delString(){
    var str= String(show.value);
    if(str.length==0){
        return -1;
    }else if(str.length==1){
        show.value='0';
    }
    else{
        show.value = str.substr(0,str.length-1);
        console.log(str.length);

    }
    return str;

}

function connectStr(target){
    if(show.value=='0'){
        show.value="";
        show.value=show.value+target.value;
    }else{
        show.value=show.value+target.value;
    }
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单计算器</title>
    <link rel="stylesheet" type="text/css" href="css/calculator.css">

</head>
<body>
    <div class="container">
        <div class="screen">
            <input type="text" value="0" autocomplete="none">
        </div>
        <div class="keys">
            <!--第一排-->
            <input type="button" value="7" class="button">
            <input type="button" value="8" class="button">
            <input type="button" value="9" class="button">
            <input type="button" value="←" class="button">
            <input type="button" value="C" class="button">
            <!--第二排-->
            <input type="button" value="4" class="button">
            <input type="button" value="5" class="button">
            <input type="button" value="6" class="button">
            <input type="button" value="×" class="button">
            <input type="button" value="÷" class="button">
            <!--第三排-->
            <input type="button" value="1" class="button">
            <input type="button" value="2" class="button">
            <input type="button" value="3" class="button">
            <input type="button" value="+" class="button">
            <input type="button" value="-" class="button">
            <!--第四排-->
            <input type="button" value="0" class="button zero">
            <input type="button" value="." class="button zero">
            <input type="button" value="=" class="button result">

        </div>
    </div>
    <script src="js/calculator.js" type="text/javascript"></script>
</body>
</html>

css代码

*{
    margin: 0;
    padding:0;
}
body{
    background-color:rgba(97,144,193,1);
}
.container{
    width: 500px;
    height: 500px;
    background-color: rgba(125,189,10,1);
    margin: 50px auto;
    border-radius: 5px;
    box-shadow: 2px 4px 8px rgba(0,0,0,.5);
    position: relative;
}
.container>.screen{
    width: 460px;
    height: 60px;
    margin: 0 auto;
    padding-top: 30px;
}
.container>.screen input{
    width: 440px;
    height: 50px;
    padding:0 10px;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.8) inset;
    text-align: right;
    font-size: 21px;
    color: #000;
}
.container>.keys{
    width: 460px;
    height:410px;
    margin: 0 auto;
}
.container>.keys input{
    width: 80px;
    height: 50px;
    float: left;
    margin-top: 40px;
    margin-left: 10px;
    border:none;
    background-color: rgba(255,255,255,1);
    border-radius: 5px;
    box-shadow: 0 0 3px rgba(0,0,0,.5);
    cursor: pointer;
    font-size: 20px;
    line-height: 20px;
}
.container>.keys>.result{
    width: 260px;
}

希望有大神们看看提点建议哈哈哈~ 思路是不是对的？还可以进行怎样的优化？最后想请教大家怎么实现多个符号的运算？

lolkakii

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript实现简单的计算器

JavaScript实现简单的计算器计算器有加减乘除、退格、清空的基本功能新手来找虐哈哈哈. 用到了事件委托，还有字符串的操作方法JavaScript代码//获得输入的键值var show = document.querySelector(".screen input");var keys = document.querySelector(".keys");//console.log(sho
复制链接

扫一扫