简单计算器实现

来源：互联网发布：开通淘宝店铺流程编辑：程序博客网时间：2024/06/05 20:10
<!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>
阅读全文
0 0