用js实现一个页面实现=简单计算器

 

在线演示效果：http://www.zzhangxy.com/calculator.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .calculate{
            width: 360px;
            height: 600px;
            margin: 50px auto;
            background-color: silver;
            border-top: 2px solid black;
            border-left: 2px solid black;
        }
        .calculate .show{
            width: 360px;
            height: 200px;
            background-color: black;
            color: white;
            font-size: 80px;
        }
        .calculate .symbol{
            width: 360px;
            height: 400px;
            background-color: khaki;
        }
        .calculate .symbol ul{
            list-style: none;
        }
        .calculate .symbol ul li{
            width: 68px;
            height: 78px;
            padding-left: 20px;
            border-bottom: 2px solid black;
            border-right: 2px solid black;
            float: left;
            font-size: 40px;
        }
        .calculate .symbol ul .zero{
            width: 158px;
        }
    </style>
</head>
<body>
<div class="calculate">
    <div class="show" id="show"></div>
    <div class="symbol">
        <ul id="button">
            <li>AC</li>
            <li>+/-</li>
            <li>%</li>
            <li>÷</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>×</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>－</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>＋</li>
            <li class="zero">0</li>

            <li>.</li>
            <li>=</li>
        </ul>
    </div>
</div>
<script>
    //申明变量
        //用于数字的获取
    var first = "",second = "", getNum = 0;
        //运算符号
    var fuhao = null;
        //判断输入的数字是哪一个参数
    var flag = true;
    //获取元素节点
    var buttons = document.getElementById("button");
    var show = document.getElementById("show");
    var lis = buttons.getElementsByTagName("li");
    //重置时间
    lis[0].onclick = function () {
        first = "",second = "", getNum = 0;
        fuhao = null,flag = true;
        show.innerHTML = getNum;
    };
    //改变符号时间
    lis[1].onclick = function () {
        if(flag == true){
            first = "-" + first;
            show.innerHTML = first;
        }else{
            second = "-" + second;
            show.innerHTML = second;
        }
    };
    //百分号时间
    lis[2].onclick = function () {
        if(flag == true){
            getNum = parseFloat(first)/100;
            first = getNum;
        }else{
            getNum = parseFloat(second)/100;
            second = getNum;
        }
        show.innerHTML = getNum;
    };
    //获取数字及运算符号
    for(var i = 3; i < 18; i++){
        lis[i].index = i;
        if( i ==3 || i == 7 || i ==11 || i == 15){
            lis[i].onclick = function () {
                fuhao = this.innerHTML;
                flag = false;
            }
        }else{
            lis[i].onclick = function () {
                if(flag){
                    first = (first + lis[this.index].innerHTML);
                    show.innerHTML = first;
                }else{
                    second = (second+lis[this.index].innerHTML);
                    show.innerHTML = second;
                }
            }
        }
    }
    //计算结果并显示
    lis[18].onclick = function () {
        first = parseFloat(first);
        second = parseFloat(second);
        if(fuhao == "÷"){
            getNum = first/second;
        }
        if(fuhao == "×"){
            getNum = first*second;
        }
        if(fuhao == "－"){
            getNum = first - second;
        }
        if(fuhao == "＋"){
            console.log(first);
            console.log(second);
            getNum = first + second;
        }
        first = getNum;
        second = "";
        flag = true;
        show.innerHTML = getNum;
    }
</script>
</body>
</html>
posted @ 2016-10-12 10:37  zhangxy_jack  阅读(460)  评论(2)    收藏  举报