JS实现简易网页计算器-蒲公英云

JS实现简易网页计算器

女爷i 2022-05-17 10:52 415阅读 0赞

js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。

一、实现功能

完成计算器的加减乘除的基本计算功能
实现输入框中的字符串拼接

二、实现思路

完成基本布局
js实现运算功能

三、知识点

e.target||e.srcElement ：获取触发事件的元素

四、具体代码实现

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
body {
    border: none;
}
h1{
    text-align: center;
}
button{
    cursor: pointer;
    width: 65px;
    height: 45px;
    background-color: hsla(182, 93%, 45%, 0);
    border-radius: 10px;
    box-shadow: 3px 3px 5px #ccc;
    outline: none;
    font-size: 25px;
}
input{
    font-size: 25px;
    border-radius: 10px;
    width: 200px;
    height: 40px;
}
#main{
    text-align:center;
    width:300px;
    height: 287px;
    margin: 0 auto;
    border:2px solid #ccc;
    background-image: url('../imges/4.jpg');
}
.num{
    margin: 10px;
}
</style>
</head>
<body>
    <h1>计算器</h1>
    <div id="main" onclick="cal(event);">
        <div class="num" >
            <input type="text" value="0" readonly="readonly" id="screen" />
            <button>C</button>
        </div>
        <div class="num">
            <button>7</button>
            <button>8</button>
            <button>9</button>
            <button>/</button>
        </div>
        <div class="num">
            <button>4</button>
            <button>5</button>
            <button>6</button>
            <button>*</button>
        </div>
        <div class="num">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>-</button>
        </div>
        <div class="num">
            <button>0</button>
            <button>.</button>
            <button>=</button>
            <button>+</button>
        </div>
    </div>
</body>
<script type="text/javascript">
function cal(e) {
    //获取触发事件的元素
    var obj = e.target||e.srcElement;
    if(obj.nodeName != "BUTTON"){
        return;
    }
    var v = obj.innerHTML;
    var screen = document.getElementById("screen");
    if(v == "C"){
        screen.value = 0;
    }else if(v == "="){
        //获取到输入框的值
        var exp = screen.value;
        try{
            var result = eval("("+exp+")");
            //将计算结果赋值给输入框
            screen.value = result;
        }catch(e){
            console.log(e);
            screen.value = "error";
        }
    }else{
        if(screen.value == 0){
            screen.value = "";
        }
        screen.value += v;
    }
}
</script>
</html>

五、js部分详解

function cal(e) {
    //获取触发事件的元素
    var obj = e.target||e.srcElement;
    if(obj.nodeName != "BUTTON"){
        return;
    }
    var v = obj.innerHTML;
    var screen = document.getElementById("screen");
    if(v == "C"){
        screen.value = 0;
    }else if(v == "="){
        //获取到输入框的值
        var exp = screen.value;
        try{
            var result = eval("("+exp+")");
            //将计算结果赋值给输入框
            screen.value = result;
        }catch(e){
            console.log(e);
            screen.value = "error";
        }
    }else{
        if(screen.value == 0){
            screen.value = "";
        }
        screen.value += v;
    }
}