用原生javascript实现简易计算器

最新推荐文章于 2023-10-14 13:34:36 发布

Chloe777

最新推荐文章于 2023-10-14 13:34:36 发布

阅读量3.8k

点赞数 4

分类专栏： javaScript 文章标签： Javascript 简易计算器

本文链接：https://blog.csdn.net/guotingting923/article/details/80731788

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

昨天在公众号上看到一个前端实现计算器的自测题，大概想了下，好像并不能立刻写出来，可能我的编程能力离达标还有很远的距离【手动哭泣】，除了努力学习好像也没有别的办法了，受了打击今天就来实现一下。参考资料：尐轩web前端网络日志
首先放一张结果图：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>calculator</title>
    <link rel="stylesheet" href="./layout.css">
</head>
<body>
    <div class="cal-con">
        <div class="result-con">
            <p class="show-con"></p>
        </div>
        <div class="keybord-box">
            <div class="cell-row">
                <button class="cell-item special">(</button>
                <button class="cell-item special">)</button>
                <button class="cell-item special">AC</button>
                <button class="cell-item special">CE</button>
            </div>
            <div class="cell-row">
                <button class="cell-item">7</button>
                <button class="cell-item">8</button>
                <button class="cell-item">9</button>
                <button class="cell-item special">x</button>
            </div>
            <div class="cell-row">
                <button class="cell-item">4</button>
                <button class="cell-item">5</button>
                <button class="cell-item">6</button>
                <button class="cell-item special">-</button>
            </div>
            <div class="cell-row">
                <button class="cell-item">1</button>
                <button class="cell-item">2</button>
                <button class="cell-item">3</button>
                <button class="cell-item special">+</button>
            </div>
            <div class="cell-row">
                <button class="cell-item ">0</button>
                <button class="cell-item special">÷</button>
                <button class="cell-item special">.</button>
                <button class="cell-item special">=</button>
            </div>
        </div>
    </div>
<script src="./calculator.js" type="text/javascript">
</script>
</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
body{
    background: #ccc;
}
.cal-con{
    width: 320px;
    height:550px;
    margin: 0 auto;
    box-shadow: 2px 4px 8px rgba(0,0,0,.5);
    background: #3b3131;
    overflow: hidden;
}
.cal-con .result-con{
    position: relative;
    width: 320px;
    height: 120px;

}
.cal-con .result-con .show-con{
    position: absolute;
    top: 50%;
    margin-top: -30px;
    width: 280px;
    text-align: center;
    word-break: break-all;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 20px; 
}
.cal-con .keybord-box{
    width:320px;
    margin: 0 auto;
    border-top: 1px solid #636060;
}
.cal-con .keybord-box .cell-row{
    margin: 15px 0;
}

.cal-con .keybord-box .cell-row .cell-item{
    width: 60px;
    height:60px;
    margin: 0 5px 0 10px;
    border-radius: 100px;
    outline: none;
    border: none;
    box-shadow: 2px 4px 8px rgba(0,0,0,.5);
    background: #8b7d7d; 
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}
.cal-con .keybord-box .cell-row .cell-item.other{
    width: 135px;
    margin:0 10px;
}

.cal-con .keybord-box .cell-row .cell-item.special{
    /* background: #e9a610; */
    background: linear-gradient(to bottom, rgba(252,156,23,1) 0%, rgba(247,126,27,1) 100%);
}
/* 选中按钮 */
.cal-con .keybord-box .cell-row .cell-item:active{
    box-shadow: 0 0 5px 5px dodgerblue;
}

JS部分

//获得输入的键值
var keys = document.getElementsByClassName("keybord-box")[0];
//显示器内容
var show = document.getElementsByClassName("show-con")[0],
    countNum = 0,//记录显示屏上字符个数
    isDecimal = false; //判断显示屏上数字是否已有小数点

keys.onclick = function(e){
    e=e||window.event;
    //兼容IE
    var target = e.target||e.srcElement;
    if(target.nodeName.toLowerCase() === 'button'){
        var btnType = target.innerText;
        if(show.innerText == 'Math Error' && btnType != 'AC'){
            return;
        }
        //button为AC，即all clear，清零
        if(btnType == 'AC'){
            isDecimal = false;
            show.innerText = '0';
            countNum = 1;   
        }//清除当前输入的最后一位
        else if(btnType == 'CE'){
            if(show.innerText != '0'){
                if(show.innerText.length === 1){
                    show.innerText = '0';
                }else {
                    show.innerText = show.innerText.slice(0,-1);
                }
                countNum--;
            }
        }else if(btnType == '='){

            if(!show.innerText){
                return;
            }else{
                show.innerText = show.innerText.replace(/x/g,'*');
                show.innerText = show.innerText.replace(/÷/g,'/');
                var result;
                try{
                    result = eval(show.innerText) + '';
                    if(result.search(/\./) > 0){
                        isDecimal = true;
                        if(result.split('.')[1].length > 5){
                            //精确到小数点后五位
                            result = result.toFixed(5);
                        }
                    }
                    show.innerText = result;
                    countNum = result.length;
                }catch(e){
                    show.innerText = 'Math Error';
                }
            }
        }else {
            //如果不是数字，且点击键值非'.'
            if(isNaN(+btnType) && btnType != '.'){
                isDecimal = false;
            }
            if(btnType == '.'){
                if(isDecimal){
                    return;
                }
                isDecimal  = true;
            }
            if(show.innerText == '0' && (!isNaN(+btnType) || btnType == '(' || btnType == ')' )){
                show.innerText = '';
            }
            show.innerText += btnType;
            if(countNum++ >= 44){
                alert('输入字符过多');
            }
        }
    }
}

Chloe777

关注

4
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
用原生javascript实现简易计算器

欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I...
复制链接

扫一扫