JavaScript实现计算器

最新推荐文章于 2020-06-20 14:54:49 发布

原创最新推荐文章于 2020-06-20 14:54:49 发布 · 227 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript实现计算器

本文介绍了如何使用JavaScript实现一个计算器的功能，通过源码Demo展示了具体的实现过程。

源码Demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js计算器</title>
</head>
<style>
*{
    border: none;
    margin: 0 auto;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}
.center{ /*居中*/
    margin: 0 auto;
    text-align: center;
}
h1{
    color: #495678;
    font-size: 30px;
    display: block;
    margin: 25px;
}
form{
    background-color: #495678;
    box-shadow: 4px 4px #3d4a65;
    width: 350px;
    height: 380px;
    border-radius: 18px;
    padding-top: 45px;
}
.btn{
    cursor: pointer;
    font-size: 20px;
    width: 45px;
    height: 45px;
    margin: 10px;
    border-radius: 15px;
    outline: none;/*避免点击按钮时出现轮廓*/
}
.number{
    background-color: #72778b;
    box-shadow: 0 4px #5f6680;
    color: white;
}
.operator{
    background-color: #dededc;
    box-shadow: 0 4px #bebebe;
    color: #72778b;
}
.other{
    background-color: #e3844c;
    box-shadow: 0 4px #e76a3d;
    color: #dededc;
}
.btn:active{ /*active 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式属性。*/
    box-shadow: 2px 2px cornflowerblue;
    -webkit-transform: translateY(2px);/*谷歌*/
    -ms-transform: translateY(2px);/*IE*/
    -moz-tranform: translateY(2px);/*火狐*/
    transform: translateY(2px);/*Transform属性应用于元素的2D或3D转换，Y轴方向*/
}
#display{
    outline: none;
    background-color: #98d1dc;
    box-shadow: inset 3px 3px 0 #3facc0;
    /*color: #dededc;*/
    color:#666;
    width: 190px;
    height: 45px;
    font-size: 20px;
    text-align: right;
    border-radius: 15px;
    padding: 0 10px;
}
</style>
<body>
<div class="center">
    <h1>HTML CSS JavaScript 计算器</h1>
    <form name="calculator">
        <input type="button" id="clear" class="btn other" value="C">
        <input type="text" id="display"><!--显示框-->
        <input type="button" class="btn other" value="回退" onclick="fallback();">
        <br>
        <input type="button" class="btn number" value="7" onclick="get(this.value);">
        <input type="button" class="btn number" value="8" onclick="get(this.value);">
        <input type="button" class="btn number" value="9" onclick="get(this.value);">
        <input type="button" class="btn operator" value="+" onclick="get(this.value);">
        <br>
        <input type="button" class="btn number" value="4" onclick="get(this.value);">
        <input type="button" class="btn number" value="5" onclick="get(this.value);">
        <input type="button" class="btn number" value="6" onclick="get(this.value);">
        <input type="button" class="btn operator" value="-" onclick="get(this.value);">
        <br>
        <input type="button" class="btn number" value="1" onclick="get(this.value);">
        <input type="button" class="btn number" value="2" onclick="get(this.value);">
        <input type="button" class="btn number" value="3" onclick="get(this.value);">
        <input type="button" class="btn operator" value="*" onclick="get(this.value);">
        <br>
        <input type="button" class="btn number" value="0" onclick="get(this.value);">
        <input type="button" class="btn operator" value="." onclick="get(this.value);">
        <input type="button" class="btn operator" value="/" onclick="get(this.value);">
        <input type="button" class="btn other" value="=" onclick="calculates();">
    </form>
</div>
 
<script>
    //点击C按钮清理显示器
    document.getElementById('clear').addEventListener('click',function () {
        //addEventListener()方法用于向指定元素添加事件句柄。向id='clear'元素添加click事件，click事件是将id='display'的元素变为空''.
        document.getElementById('display').value="";
    });
    //接收值
    function get(value) {
        document.getElementById('display').value += value;
    }
    function fallback(){
        var str=document.getElementById('display').value
        document.getElementById('display').value=str.substring(0,str.length-1);
    }
    //计算
    function calculates() {
        var result=0;
        result=document.getElementById('display').value;
        document.getElementById('display').value='';
        document.getElementById('display').value=eval(result);//eval()计算括号里的内容
    }
 
</script>
 
</body>
</html>

公众号：
在这里插入图片描述
微信：