使用web前端制作一个计算器

我想去拉萨。
已于 2022-03-22 21:39:46 修改
阅读量7.7k
点赞数 16
分类专栏： Java前端文章标签： html css js
于 2022-03-20 10:43:20 首次发布
本文链接：https://blog.csdn.net/AzirBoDa/article/details/123608935
版权
Java前端专栏收录该内容
9 篇文章 0 订阅
订阅专栏
如果可以，点个赞支持一下呗，编程路上有我陪着你！
制作一个计算器效果图如下：

在这里插入图片描述
一言不合上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Calculator</title>
    <style>

        /* 主体 */
        .counter {
            width: 396px;
            height: 486px;
            background-color: #F2F2F2;
            border: 1px solid #C2C3C6;
            margin: 50px auto;

        }

        /* 显示框 */
        #box {
            height: 70px;
            width: 336px;
            background-color: #323232;
            border: none;
            margin: 40px 25px 32px 25px;
            font: 700 40px/70px "微软雅黑";
            color: #ffffff;
            padding-right: 10px;
        }

        /* 功能区 */
        .funct {
            padding: 0 20px;
            position: relative;

        }

        /* 按钮样式 */
        .funct input {
            height: 40px;
            width: 60px;
            margin: 10px 10px;
            font: 400 20px/40px "微软雅黑";
        }

        /* 清除按钮样式 */
        .funct #res {
            width: 150px;
        }

        /* + - = . 按钮浮动 */
        #add, #reduce, #round, #sum {
            position: absolute;
            right: 0px;
            bottom: 0px;
        }

        /* 减号位置 */
        #reduce {
            right: 30px;
            top: 60px;
        }

        /* 加号位置 */
        #add {
            right: 30px;
            top: 120px;
        }

        /* 等于号位置 */
        #sum {
            height: 100px;
            right: 30px;
            bottom: 0px;
        }

        /* 小数点位置 */
        #round {
            right: 120px;
            bottom: 0px;
        }

        /* 0 */
        #zero {
            width: 150px;
        }

        /* 数字区 */
        .numb {
            width: 280px;
        }
    </style>

    <script>
        window.onload = function(){

            // 数据容器
            var left = 0;   //被除数
            var right = 0;  //除数
            var sum = 0;    //和

            var numb = 0;   //此变量用来限制点的输入
            // 获取id并返回
            function $(id){
                return document.getElementById(id);
            }
            // 运算函数
            function operation(id){
                if( $("box").value != "0"){
                    if(left == 0)
                    {
                        $("box").value = $("box").value + $(id).value;
                        left = parseFloat($("box").value);
                    }
                }

                //numb 转为number类型 让点可以再输入一次
                numb = 0;
            }

            // 数字盘函数
            function figure(id){

                // 判断被除数是否有值
                if(left == 0)
                {
                    // 改变value默认值
                    if ($("box").value === "0" ) {
                        $("box").value = $(id).value;
                    }else{
                        $("box").value = $("box").value + $(id).value;
                    }
                }else{
                    $("box").value = $("box").value + $(id).value;
                    var str = $("box").value;
                    var num = "";
                    // 获取第二次输入的数字
                    for (var i = 0; i < str.length; i++) {
                        // 判断加减乘除
                        if(str[i]== "+"){
                            for (var j = i + 1; j < str.length; j++) {
                                num+=str[j];

                            };
                            right = parseFloat(num);
                        }else if(str[i]== "-"){
                            for (var j = i + 1; j < str.length; j++) {
                                num+=str[j];

                            };
                            right = parseFloat(num);
                        }
                        else if(str[i]== "*"){
                            for (var j = i + 1; j < str.length; j++) {
                                num+=str[j];

                            };
                            right = parseFloat(num);
                        }
                        else if(str[i]== "/"){
                            for (var j = i + 1; j < str.length; j++) {
                                num+=str[j];

                            };
                            right = parseFloat(num);
                        }
                    };
                }

                // 清空所有数据
                if(sum != 0){
                    left = 0;
                    right = 0;
                    sum = 0;
                    numb = 0;
                    $("box").value = $(id).value;
                }

            }


            // 数字键盘区----------------------------------------------------------开始
            $("one").onclick = function(){
                figure("one");
            }
            $("two").onclick = function(){
                figure("two");
            }
            $("three").onclick = function(){
                figure("three");
            }
            $("four").onclick = function(){
                figure("four");
            }
            $("five").onclick = function(){
                figure("five");
            }
            $("six").onclick = function(){
                figure("six");
            }
            $("seven").onclick = function(){
                figure("seven");
            }
            $("eight").onclick = function(){
                figure("eight");
            }
            $("nine").onclick = function(){
                figure("nine");
            }
            $("zero").onclick = function(){
                figure("zero");
            }

            // 数字键盘区----------------------------------------------------------结束




            //功能区-----------------------------------------------------------开始

            // 加
            $("add").onclick = function(){
                operation("add");
            }


            //减
            $("reduce").onclick = function(){
                operation("reduce");
            }

            // 乘
            $("ride").onclick = function(){
                operation("ride");
            }

            // 除
            $("division").onclick = function(){
                operation("division");
            }

            // 点
            $("round").onclick = function(){
                // 限制点的输入
                if(numb === 0 && sum == 0){ //numb值等于0 类型等于number
                    $("box").value = $("box").value + $("round").value;
                    numb = ($("box").value); //numb赋值为字符串
                }

            }

            // 清除
            $("res").onclick = function(){
                if($("box").value != "0")
                {
                    left = 0;
                    right = 0;
                    sum = 0;
                    numb = 0;
                    $("box").value = "0";
                }
            }

            // 求和
            $("sum").onclick = function(){
                var symbol = "";
                if(left != 0 && right != 0){
                    for (var i = 0; i < $("box").value.length; i ++ ) {
                        symbol = $("box").value[i];
                        if(symbol == "+"){
                            sum = left + right;
                            $("box").value = sum;
                        }else if(symbol == "-"){
                            sum = left - right;
                            $("box").value = sum;
                        }
                        else if(symbol == "*"){
                            sum = left * right;
                            $("box").value = sum;

                        }
                        else if(symbol == "/"){
                            sum = left / right;
                            $("box").value = sum;
                        }
                    };
                }
            }

        }

        // 功能区--------------------------------------------------------------------------结束

    </script>
</head>
<body>
<div class="counter">
    <input type="text" id="box" style="text-align:right" readOnly="true" value="0">
    <div class="funct">
        <input type="reset" id="res" value="C">
        <input type="button" id="division" value="/">
        <input type="button" id="ride" value="*">

        <input type="button" id="add" value="+">
        <input type="button" id="reduce" value="-">
        <input type="button" id="round" value=".">
        <input type="button" id="sum" value="=">

        <div class="numb">
            <input type="button" id="one" value="1">
            <input type="button" id="two" value="2">
            <input type="button" id="three" value="3">
            <input type="button" id="four" value="4">
            <input type="button" id="five" value="5">
            <input type="button" id="six" value="6">
            <input type="button" id="seven" value="7">
            <input type="button" id="eight" value="8">
            <input type="button" id="nine" value="9">
            <input type="button" id="zero" value="0">
        </div>
    </div>
</div>
</body>
</html>