JavaScript实现简单的计算器

来源：互联网发布：初中听力训练软件下载编辑：程序博客网时间：2024/06/12 04:20

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;}

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

0 0