HTML+CSS+JS创建的一个计算器程序入门前端伙伴可以尝试一下

最新推荐文章于 2023-11-26 20:05:50 发布

fisherman程序猿

最新推荐文章于 2023-11-26 20:05:50 发布

阅读量219

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/TV806666/article/details/125001607

版权

1.样式查看

HTML+CSS+JS创建的一个计算器程序入门前端的朋友可以尝试一下我会把源码放在主页的公众号里谢谢大家

2.源码领取方式{可复制}

计算器.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./计算器.css">
    <script src="./计算器.js"></script>
    <title>渔夫科技计算器</title>
</head>
<body>
    <div id="container">
        <div id="show">
            <div id="f-show">
                1
            </div>
            <div id="z-show">
                0
            </div>
        </div>
        <div id="control">
            <div id="set1">
                <div id="CE">
                    <p>CE</p>
                </div>
                <div id="C">
                    <p>C</p>
                </div>
                <div id="larr">
                    <p>⇐</p>
                </div>
                <div id="division">
                    <p>÷</p>
                </div>
            </div>
            <div id="set2">
                <div id="a7">
                    <p>7</p>
                </div>
                <div id="a8">
                    <p>8</p>
                </div>
                <div id="a9">
                    <p>9</p>
                </div>
                <div id="mul">
                    <p>×</p>
                </div>
            </div>
            <div id="set3">
                <div id="a4">
                    <p>4</p>
                </div>
                <div id="a5">
                    <p>5</p>
                </div>
                <div id="a6">
                    <p>6</p>
                </div>
                <div id="sub">
                    <p>-</p>
                </div>
            </div>
            <div id="set4">
                <div id="a1">
                    <p>1</p>
                </div>
                <div id="a2">
                    <p>2</p>
                </div>
                <div id="a3">
                    <p>3</p>
                </div>
                <div id="add">
                    <p>+</p>
                </div>
            </div>
            <div id="set5">
                <div id="plu">
                    <p>±</p>
                </div>
                <div id="a0">
                    <p>0</p>
                </div>
                <div id="del">
                    <p>.</p>
                </div>
                <div id="equal">
                    <p>=</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

计算器.CSS

body {
	margin:0px auto;
	padding:0px;
	border:1px solid #000;
	width:500px;
	height:600px;
}
#show {
	height:175px;
	background:#d3d3d3;
}
#control {
	height:425px;
	background:#bebebe;
}
#control div {
	height:83px;
	width:500px;
}
#control div div {
	margin:2px 2px;
	float:left;
	height:81px;
	width:121px;
	background:#d3d3d3;
}
#control div #a0,#control div #a1,#control div #a2,#control div #a3,#control div #a4,#control div #a5,#control div #a6,#control div #a7,#control div #a8,#control div #a9 {
	background:#F5F5F5;
}
#container #control div div:hover {
	background:#848484;
	cursor:pointer;
}
#f-show {
	margin-right:5px;
	margin-top:70px;
	float:right;
	width:300px;
	height:50px;
	text-align:right;
}
#z-show {
	margin-right:5px;
	float:right;
	width:300px;
	height:50px;
	clear:both;
	text-align:right;
	font-size:30px;
}
p {
	text-align:center;
	padding-top:15px;
}

计算器.JS

var z_number = 0;
var f_number = ""; //用于控制第二栏显示数据     为string类型;
var zancun_number = 0;
var jx = 1;
var dy = 0;

window.onload = function() {
    collect(); //用于绑定 数字  输入 事件;
    collect_2(); //用于绑定  运算符  输入 事件
    show(); //初始化显示区域
}

function show() { //用于控制显示部分， 每次有数值变化时 调用此函数可实现数据刷新显示;

    var zShow = document.getElementById("z-show");
    zShow.innerHTML = z_number;
    var fShow = document.getElementById("f-show");
    if (f_number == "") {
        fShow.innerHTML = "";
    } else {
        fShow.innerHTML = f_number;
    }
}


//输入数字的事件函数
function collect() {
    for (var i = 0; i <= 9; i++) { //获取0-9的输入
        document.getElementById("a" + i).onclick = function() {
            if (dy == 1) {
                dy = 0;
                clear();
            }
            //	alert(z_number.toString().length);
            if (z_number.toString().length < 16) {
                if (parseInt(z_number) === z_number && z_number % 1 === 0) {
                    z_number = z_number * 10 + parseInt(this.innerText);
                } else {
                    z_number = "" + z_number;
                    z_number += parseInt(this.innerText);
                }
            }
            show(); //刷新显示部分
            jx = 0;
        }
    }

}
//运算符输入的函数
function collect_2() {
    document.getElementById("add").onclick = function() { //加法
        dy = 0;
        if (jx == 0) { //用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
            jx = 1;
            f_number = f_number + z_number + "+";
            z_number = eval(f_number + "0");
            zancun_number = z_number;
            show();
            z_number = 0;
        }

    }
    document.getElementById("sub").onclick = function() { //减法
        dy = 0;
        //alert("add");
        if (jx == 0) { //用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
            jx = 1;
            f_number = f_number + z_number + "-";
            z_number = eval(f_number + "0");
            zancun_number = z_number;
            show();
            z_number = 0;
        }
    }
    document.getElementById("mul").onclick = function() { //乘法
        dy = 0;
        //alert("add");
        if (jx == 0) { //用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
            jx = 1;
            f_number = f_number + z_number + "*";
            z_number = eval(f_number + "0");
            zancun_number = z_number;
            show();
            z_number = 0;
        }
    }
    document.getElementById("division").onclick = function() { //除法
        dy = 0;
        //alert("add");
        if (jx == 0) { //用于控制多次按下时产生的 bug 问题      多次按下时jx 为1  不执行语句体
            jx = 1;
            f_number = f_number + z_number + "/";
            var z = z_number; //	仅在下边if处使用
            z_number = eval(f_number + "0");
            zancun_number = z_number;
            if (z_number == 'Infinity') { //用于解决 9/此时显示Infinity 的问题
                z_number = z;
            }
            show();
            z_number = 0;
        }
    }
    document.getElementById("equal").onclick = function() { //等于
        //alert("add");
        if (jx == 0) {
            z_number = eval(f_number + z_number); //这里解决最后一次加什么值的问题 因为如果最后一次按下加减乘除不输入数字的话
        } else { //z_number 被赋值为零了
            z_number = eval(f_number + zancun_number);
        }
        f_number = "";
        show();
        dy = 1;
        //clear();
    }

    document.getElementById("C").onclick = function() { //归零
        clear();
        show();
    }

    document.getElementById("CE").onclick = function() { //归零当前
        z_number = 0;
        show();
    }
    document.getElementById("plu").onclick = function() { //± 取负
        z_number *= -1;
        show();
        dy = 0;
    }
    document.getElementById("larr").onclick = function() { //退格
        //	alert(''+z_number);
        z_number = "" + z_number;
        z_number = z_number.slice(0, -1);
        //alert(z_number);
        z_number = Number(z_number);
        //alert(typeof parseFloat(z_number));
        //alert(typeof z_number);
        show();
        dy = 0;
    }
    var del = document.getElementById("del").onclick = function() { //点
        if (Math.floor(z_number) === z_number) {
            z_number += '.';
        }
        show();
        /*

            var i = -1;
            if(isNaN(showNum.value.slice(i))){  //删除的不是.且不是数值的时候执行（删除运算符执行）
              while(i){
                if(showNum.value.slice(i,i+1)=="."){ //数组从后向前扫描遇到.解除绑定（.失效）
                  dot.onclick = null;				/*因为前面代码段包含.*/
        //							break;
        //						}
        //						if(isNaN(showNum.value.slice(i,i+1))){	//当遇到运算符时跳出
        //							break;							/**因为没有遇到.此时可输入.不解绑**/
        //						}
        //						if(showNum.value.slice(i-1,i)=="") { //当值为空时跳出（扫描第一组数据）
        //							break;							/**因为遇到空证明数组已经扫描完毕，不解绑**/
        //						}
        //						i--;
        /*					}





            */
    }
}

//清零函数!
function clear() { //将所有全局变量初始化
    z_number = 0;
    f_number = "";
    zancun_number = 0;
    jx = 1;
}