JS编写的简单计算器

最新推荐文章于 2021-08-10 08:41:55 发布

Aiome

最新推荐文章于 2021-08-10 08:41:55 发布

阅读量5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Web开发（JavaScript）文章标签： javascript html css 计算器

本文链接：https://blog.youkuaiyun.com/mixuema/article/details/49308301

Web开发（JavaScript）专栏收录该内容

1 篇文章

订阅专栏

下面是我用JavaScript写的简单计算器，有很多不足之处，就先叫它为“计算器”吧
上代码，一如既往的整洁，哈哈，自恋一下，有什么建议或者疑问可以在下面提出来，我会一一回复的。

window.onload = function () {
    var btns = document.getElementsByTagName('button');
    for (var i = 0 ;i < btns.length; i++) {
        btns[i].onclick = function(){                                           
            var val = this.value;                                               //获得当前点击的按钮内容
            switch (val) {
                case "=":                   
                    calculate();                                                //当接收到“计算”口令时，调用calculator()函数
                    break;
                case "C":
                    document.getElementById("result").innerHTML = "0";          //更改显示栏，显示内容为0
                    break;
                default:
                    var result = document.getElementById('result');             
                    if(result.innerHTML==0){                                    //当用户还没有输入或者清零时，在显示栏不做更改
                        result.innerHTML='';
                    }
                    result.innerHTML += val;                                    //将输入能容写到显示栏
                    break;
            }
        }       
    }
}
function calculate () {
    var sum = document.getElementById('result').innerHTML;                      //获取显示栏中的字符串
    var result = eval(sum);                                                     //计算字符串的值
    document.getElementById("result").innerHTML = result;                       //将结果写到显示栏
}

2.CSS代码区域

button{
    width:50px;
    height:50px;
}
td{
    padding:8px;
}
table td{
    border:1px solid #c0c0c0;
}
#result{
    font:bolder 26px '黑体';
    text-align: right;
}

3.HTML代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <link type="text/css" href="css/index.css" rel="stylesheet"/>

</head>
<body>
    <table>
        <tr>
            <td id ="result"colspan="3">0</td>
            <td><button value="C">C</button></td>
        </tr>
        <tr>
            <td><button value="1">1</button></td>
            <td><button value="2">2</button></td>
            <td><button value="3">3</button></td>
            <td><button value="+">+</button></td>
        </tr>
        <tr>
            <td><button value="4">4</button></td>
            <td><button value="5">5</button></td>
            <td><button value="6">6</button></td>
            <td><button value="-">-</button></td>
        </tr>
        <tr>
            <td><button value="7">7</button></td>
            <td><button value="8">8</button></td>
            <td><button value="9">9</button></td>
            <td><button value="*">*</button></td>
        </tr>
        <tr>
            <td><button value="0">0</button></td>
            <td><button value=".">.</button></td>
            <td><button value="=">=</button></td>
            <td><button value="/">/</button></td>
        </tr>
    </table>
</body>
<script type="text/javascript" src="js/index.js"></script>
</html>