简单计算器实现

最新推荐文章于 2022-01-04 14:58:00 发布

yudeboo

最新推荐文章于 2022-01-04 14:58:00 发布

阅读量333

点赞数

文章标签：计算器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-00-计算器</title>
    <style>
    *{margin: 0;padding: 0;left: 0; top: 0; list-style: none;}
ul{
    margin: 50px;
    margin-top: 20px;
    width: 280px;
}

ul li{
    float: left;
    width: 45px;
    height: 45px;
    border: 1px solid #aaa;
    margin: 10px;
    text-align: center;
    line-height: 45px;
    font-family: 微软雅黑;
    font-size: 16px;
    font-weight: bolder;
    cursor: pointer;
}

ul li:nth-child(3), ul li:nth-last-child(3){
    width: 110px;
}

.r{
    width: 244px;
    height: 80px;
    border: 1px solid #aaa;
    margin-top: 50px;
    margin-left: 60px;
    font-family: 微软雅黑;
    font-size: 20px;
    text-align: right;
    line-height: 80px;
    overflow: hidden;
    /*overflow-x: scroll;*/
}
    </style>
    <!-- <link rel="stylesheet" href="./css/cal.css">
    <script src="./js/cal.js"></script> -->
    <!-- <script src='../day1/js/my.js'></script> -->
</head>
<body>
    <div class="r"></div>
    <ul>
        <li>退格</li>
        <li>C</li>
        <li>=</li>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>+</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>-</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>*</li>
        <li>0</li>
        <li>.</li>
        <li>/</li>
    </ul>
    <script>
         var lis     = document.querySelectorAll('ul li');
    var r       = document.querySelector('.r');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            /* body... */
            var ih = this.innerHTML;
            var rh = r.innerHTML;
            var oper = ['+', '-', '*', '/'];
            switch (ih) {
                case '退格':
                    // statements_1
                    rh = rh.slice(0, -1);
                    console.log(rh);
                    r.innerHTML = rh;
                    break;

                case 'C':
                    r.innerHTML = '';
                    break;

                case '=':
                    var result  = eval(r.innerHTML); //eval:执行jS代码
                    var haha=result-parseInt(result);
                    console.log(haha);
                    if(haha>0){
                        r.innerHTML = result.toFixed(2);
                        // 保留两位小数并四舍五入
                        
                    }else{
                        console.log(result);

                        r.innerHTML=result;
                    }
                     //保留两位小数
                    
                    break;


                case '*':
                case '/':
                    var lc = rh.slice(-1);
                    if(rh == ''||oper.indexOf(lc) > -1){
                        return ;
                    }else{
                        r.innerHTML += ih;
                    }
                   
                    // console.log(oper.indexOf(lc));
                    
                   

                    break;
                case '.':

                var zz=/[+*/-]/ig;
                var arrnumber=rh.split(zz);
                var zzz=/\./ig;

                console.log(arrnumber);
               
                    var lc = rh.slice(-1);
                  
                   
                    // var narr = rh.split(); //用正则分割成数组
                    if(!rh || isNaN(lc)||zzz.test(arrnumber[arrnumber.length-1])){
                        return ;
                    }else{
                        r.innerHTML += ih;
                    }

                   
                    break;
                case '+':
                case '-':
                
                    var lc = rh.slice(-1);
                    // console.log(oper.indexOf(lc));
                    if(oper.indexOf(lc) > -1){
                        return ;
                    }
                    else{
                    r.innerHTML += ih;
                        
                    }
                    break;
                default:
                    r.innerHTML += ih;
                    
            }
        }
    }


    </script>
</body>
</html>