HTML5实现简易计算器

时间：2024-12-19 20:47:11

闲来无聊，用H5写了一个简易版计算器，只是简单地一元运算，功能不多说，直接上代码，注释很详细；(ノ￣▽￣)

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .box{width: 290px;height: 470px;margin: 100px auto;border: 1px solid #000;}
        .list li{list-style: none;float: left;width:50px;height:50px;margin: 10px;border: 1px solid #999;
                border-radius: 10px;background: #eee;cursor: pointer;text-align: center;
                line-height: 50px;font-weight: bold;font-size: 25px;}
        input{width: 285px;height: 50px;font-size: 20px;text-align: right;outline: none;border: none;padding-right: 5px;}
        .txt2{border-bottom: 1px solid #000;}
        .list li:hover{background: #888;}
    </style>
</head>

<body>
    <div class="box">
        <input type="text" class="txt1">
        <input type="text" class="txt2" value="0">
        <ul class="list">
            <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>0</li>
            <li>.</li>
            <li>=</li>
            <li>+</li>
            <li>c</li>
        </ul>
    </div>
    <script>
        //获取元素
        var oTxt1 = ("txt1")[0];
        var oTxt2 = ("txt2")[0];
        var oList = ("list")[0];

        //创建对象，用来保存每次输入的数和计算符号
        var obj = {};

        //设置一个开关，识别负号和减号
        var bStop = false;

        //函数执行
        calculator();


        //计算器
        function calculator() {
            ("click", function (e) {

                //事件源对象，获取每次点击的内容
                var even = e || event;
                var target =  || ;

                //保存每次点击的内容
                var num = ;


                //一轮计算之后，第二轮输入
                if () {
                     = "";
                     = "";
                    obj = {};
                     = false;
                }


                //当输入的数值为小数，且比0还小时
                if ( === "0" && num != ".") {
                     = "";
                }
                 += num;

                //清零
                if (num == "c") {
                     = "";
                     = 0;
                    obj = {};
                }

                //获取输入的数值
                value(num);


            }, false)


        }

        //变量赋值
        function value(code) {

            //当输入为等于号的时候
            if (code == "=") {
                //保存第二个输入的数
                 = parseFloat();
                 += ;
                add(obj);

                //当第一轮计算结束之后，给一个开关，第二轮输入的时候，
                //不需要清零，也不会影响第二轮输入（以输入等号为一轮计算结束）
                 = true;

                //将负号开关重置，不影响下次输入
                bStop = false;
            }

            //当连续两次输入减号的时候，第二次输入的为负号，并将开关关上
            if (bStop) {
                bStop = false;
                return;
            }

            if (code == "+" || code == "-" || code == "*" || code == "/") {

                //在不输入等号的情况下，输入计算符号也可以计算上一轮的结果
                if () {
                     = parseFloat();
                    add(obj);
                     =  + code;
                     = "";
                    //将上一轮计算的结果保存在下一轮的第一个数
                     = parseFloat();
                    //保存计算符号
                     = code;
                    //将负号开关打开
                    bStop = true;
                    return;
                }
                //计算器刚启动的时候或者是一轮计算过后，输入的第一个减号即为负号
                if ( == "-") return;


                 = ;
                 = "";
                //保存第一个输入的数
                 = parseFloat();
                //保存输入的计算符号
                 = code;
                //将负号开关打开
                bStop = true;
            }
        }
        //数值计算
        function add(obj) {
            switch () {
                case "+":
                     =  + ;
                    break;
                case "-":
                     =  - ;
                    break;
                case "*":
                     =  * ;
                    break;
                case "/":
                    if (( / )) {
                         = "被除数不能为0";
                    } else {
                         =  / ;
                    }
                    break;
            }
        }
    </script>
</body>

</html>

效果图：

相关文章