原生JS实现简易计算器(逆战班)

最新推荐文章于 2024-01-23 16:40:43 发布

klc916593961

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/klc916593961/article/details/104467838

版权

通过原生JS实现简易计算器

**
基本功能：实现加减乘除的运算

具体代码如下：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link rel="stylesheet" href="./jsq.css">
</head>
<body>
    <div class="calculator">
        <div class="c_screen">
            <p></p>
        </div>
        <div class="c_btn_wrapper">
            <div class="c_row">
                <button class="c_func_btn">(</button>
                <button class="c_func_btn">)</button>
                <button class="c_func_btn">CE</button>
                <button class="c_func_btn">AC</button>
            </div>
            <div class="c_row">
                <button>7</button>
                <button>8</button>
                <button>9</button>
                <button class="c_func_btn">/</button>
            </div>
            <div class="c_row">
                <button>4</button>
                <button>5</button>
                <button>6</button>
                <button class="c_func_btn">x</button>
            </div>
            <div class="c_row">
                <button>1</button>
                <button>2</button>
                <button>3</button>
                <button class="c_func_btn">-</button>
            </div>
            <div class="c_row">
                <button>0</button>
                <button>.</button>
                <button class="c_func_btn">=</button>
                <button class="c_func_btn">+</button>
            </div>
        </div>
    </div>
    <script src="./jsq.js"></script>
</body>
</html>

CSS

.calculator {
    width: 326px;
    height: 460px;
    margin: 250px auto;
    background-color: #368590;
    border-radius: 5px;
    box-shadow: 0 2px 15px black;
    overflow: hidden;
}
.calculator .c_screen {
    position: relative;
    width: 326px;
    height: 110px;
    background-color: #96a4c2;
    border-radius: 5px;
    box-shadow: inherit;
}
.calculator .c_screen>p {
    position: absolute;
    top: 50%;
    margin-top: -28px;
    width: 236px;
    text-align: center;
    word-break: break-all;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 45px;
}
.calculator .c_row {
    margin: 0 23px;
}
button {
    cursor: pointer;
    width: 60px;
    height: 45px;
    margin: 20px 2px 0;
    border: 0px;
    border-radius: 5px;
    color: #fff;
    background-color: #2b2f5b;
    outline: none;
}
button::selection {
    color: #fff;
}
button:active {
    box-shadow: 0 0 5px 5px dodgerblue;
}
.c_func_btn {
    background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
}

var btn_wrap = document.getElementsByClassName('c_btn_wrapper')[0], // 按钮容器
    content = document.getElementsByTagName('p')[0], // 显示器内容
    count = 0, //记录显示屏上字符及数字个数
    bOneDec = false; //表示显示屏一个数字中是否已经有一个小数点的状态
btn_wrap.onclick = function(e){
    var target = e.target;
    if(target.nodeName.toLowerCase() === 'button'){
        var btnType = target.innerText;
        if(content.innerText == 'Math Error' && btnType != 'AC'){
            return;
        }
        if(btnType == 'AC'){
            bOneDec = false;
            content.innerText = '0';
            count = 1;
        }else if(btnType == 'CE'){
            if(content.innerText != ''){
                if(content.innerText.length === 1){
                    content.innerText = '0';
                }else{
                    content.innerText = content.innerText.slice(0,-1);
                }
                count--;
            }
        }else if(btnType == '='){
            var text = content.innerText;
            if(!text){
                return;
            }else{
                text = text.replace(/x/g,'*');
                var result;
                try{
                    result = eval(text) + '';
                    if(result.search(/\./) > 0){
                        bOneDec = true;
                        if(result.split('.')[1].length > 5){
                            result = (+result).toFixed(5);
                        }
                    }
                    content.innerText = result;
                    count = result.length;
                }catch(e){
                    content.innerText = 'Math Error';
                }
            }
        }else{
            if(isNaN(+btnType) && btnType != '.'){
                bOneDec = false;
            }
            if(btnType == '.'){
                if(bOneDec){
                    return;
                }
                bOneDec = true;
            }
            if(content.innerText == '0' && (!isNaN(+btnType) ||
            btnType == '(' || btnType == ')')){
                content.innerText = '';
            }
            content.innerText += btnType;
            if(count++ >= 44){
                alert('输入的字符过多');
            }
        }   
    }
}

klc916593961

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现简易计算器(逆战班)

**通过原生JS实现简易计算器**基本功能：实现加减乘除的运算具体代码如下：HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>计算器</title> <link rel="styleshe...
复制链接

扫一扫