原生JS实现简易计算器

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简易计算器</title>
<style>
    #div{
        width: 300px;
        height: 500px;
        background: #ccc;
        margin: auto;
        border: 1px solid red;
    }
    table{
        width: 97%;
        height: 480px;
        border: 1;
        align:center;
        cellspacing:"10"
    }
    td{
        width: 26%;
        height: auto;
        border: 1px solid red;
        text-align: center;
        font-weight: bold;
        color: blue;
    }
</style>
<script>
    var tds = null;   //定义一个空的全局对象
    var jg = null,
        dy = null,
        tg = null;
    window.onload = function(){   //因为以后都是外部引用JS文件，因为程序加载执行顺序的问题，设置一个文档加载完成后调用方法的事件
        tds = document.getElementsByTagName("td");  //找到所有的对象
        jg = document.getElementById("jg");
        dy = document.getElementById("dy");
        tg = document.getElementById("tg");
        addEvent();   //文档加载完成后调用这个方法
    }
    function addEvent(){
        for(var i = 0 ;i<tds.length;i++){    //循环下标用来找出所有的单元格
            var zhi = tds[i].getAttribute("id");  //找出带id属性的单元格
            if(zhi){   //当本次循环有带id属性的
                continue;  //那么跳过本次循环
            }
            tds[i].onclick = function(){   //后给这个单元格添加点击事件并调用方法
                jg.innerHTML += this.innerHTML;  //此处用到字符串拼接的方法  每点击一次和上一次的字符串拼接（用来作为下边的计算）
            } 
        
        }
        //给等于号添加点击事件
        dy.onclick = function(){ //当点击等于号的时候
            jg.innerHTML = eval(jg.innerHTML);  //结果显示在HTML文档中并赋值（eval（）函数会将字符串转换为JavaScript代码执行）
        }
        //当点击退格的时候调用这个函数
        tg.onclick = function(){
            var str = jg.innerHTML;   //找到在结果显示中的字符串
            jg.innerHTML = str.substr(0,str.length-1); //赋值（substr()这个是字符串方法，用来截取（保留）从0到倒数第二个，也就是当每次点击的时候会退一格） 
        }
    }
    
</script>
</head>

<body>
<!--在div里面创建一个表格用来作为计算器的按键使用-->
<div id="div">  <!--这个id用来设置计算器面板的样式-->
    <table>
        <tr>
            <td colspan="3" id="jg"></td>   <!--这里作为显示使用-->
            <td id="tg">退格</td>   <!--加退格功能-->
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>/</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>+</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>-</td>
        </tr>
        <tr>
            <td>.</td>
            <td>0</td>
            <td id="dy">=</td>  <!--准备给等于号单独设置点击事件并调用方法-->
            <td>*</td>
        </tr>
    </table>    
</div>
        

</body>
</html>
原生JS实现简易计算器

猜你喜欢
