简易版计算器

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;
}

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();
    }

*/
    }
}

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

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

简易版计算器



代码描述：主要用了div实现简易版计算器

更新时间：2021-11-04 08:33:22

1

最新

发表评论全部评论

暂时没有评论！

╃ 正在缓冲99.99%0

2021/11/5 11:04:19

如果有问题，请大师指出了！！！大家一起进步！！回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

╃ 正在缓冲99.99%

相关代码

简易版计算器

最新