js——实现计算器 和 eval（）

版权声明：转发博客 请注明出处 否则必究 https://blog.csdn.net/lucky541788/article/details/82190968

计算器

js部分

        window.onload = function () {
            //运算
            var btn = document.getElementById('panel').getElementsByTagName('td');
            var content = document.getElementById('content');
            for (var i = 0; i < btn.length; i++) {
                var lastInd = 0;
                btn[i].index = i;
                //赋值
                btn[i].onclick = function () {
                    //判断两个符号删除前一个
                    if ((this.index === 4 || this.index === 6 || this.index === 8 || this.index === 10) && (lastInd === 4 || lastInd === 6 || lastInd === 8 || lastInd === 10)) {
                        content.value = content.value.substring(0, content.value.length - 1);
                    }
                    content.value += btn[this.index].innerText;
                    lastInd = this.index;
                };
                //出结果
                btn[7].onclick = function () {
                    var count = content.value;
                    count = count.replace('×', '*');
                    count = count.replace('÷', '/');
                    //若头部有符号报错
                    if(!Number(count.charAt(0))){
                        content.value = '';
                        alert('输入错误')
                    }else{
                        //若末尾有符号删除
                        if(!Number(count.charAt(count.length-1))){
                            count=count.slice(0,count.length-1);
                        }
                        count=eval(count);//important
                        count=count.toFixed(4);//保留4位小数
                        content.value = count;
                    }

                }
            }
            //清空
            var clear=document.getElementById('clear');
            clear.onclick=function(){
                content.value='';
            }
        }

css部分

        table {
            text-align: center;
            margin: 100px auto;
            padding: 20px;
            background-color: #333;
            border-radius: 20px;
        }

        table caption {
            font-size: 30px;
            color: #CCCCCC;
            margin-bottom: 20px;
        }

        table td {
            width: 80px;
            height: 40px;
            color: #0ec;
            font-size: 30px;
            cursor: pointer;
            border-radius: 10px;
            user-select: none;
        }

        tbody td:hover {
            background-color: #888;
        }

        thead tr td input {
            width: 100%;
            height: 100%;
            text-align: right;
            font-size: 25px;
            color: #333;
        }

        tbody tr {
            height: 60px;
        }
        tfoot{
            letter-spacing: 60px;
            text-indent: 60px;
        }
        tfoot td{
            height: 50px;
            font-size: 28px;
            background-color: #555;
        }
        tfoot td:hover{
            background-color: #633;
        }

html部分

<table>
    <caption>计算器</caption>
    <thead>
    <tr>
        <td colspan="3">
            <input type="text" readonly="readonly" id="content">
        </td>
    </tr>
    </thead>
    <tbody id="panel">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>×</td>
        <td>5</td>
    </tr>
    <tr>
        <td>+</td>
        <td>=</td>
        <td>-</td>
    </tr>
    <tr>
        <td>6</td>
        <td>÷</td>
        <td>7</td>
    </tr>
    <tr>
        <td>8</td>
        <td>0</td>
        <td>9</td>
    </tr>
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3" id="clear">清空</td>
    </tr>
    </tfoot>
</table>

eval

定义和用法：
eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。

如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句。

语法：

eval(string)；

string 必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。

实例：

eval("x=10;y=20;document.write(x*y)"); //200
document.write("<br>" + eval("2+2")); //4
document.write("<br>" + eval(x+17)); //27(其中x是第一个eval中的值 不是新定义的)