javascript白色简洁计算器

收藏

本文中计算器代码很简单，你可以很容易把该网页特效应用到你的项目中。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们在网页上放置一个输入框及多个计算器按钮。

<div id="calcuator">
    <input type="text" id="input-box" value="0" size="21" maxlength="21" readonly="readonly" />
    <div id="btn-list">
        <div onclick="operator('clear')" class=" btn-30 btn-radius color-red clear-marginleft">
            C</div>
        <div onclick="operator('opposite')" class=" btn-30 btn-radius color-blue">
            +/-</div>
        <div onclick="operator('percent')" class=" btn-30 btn-radius color-blue">
            %</div>
        <div onclick="operator('backspace')" class=" btn-70 btn-radius color-red font-14">
            ←</div>
        <div onclick="typetoinput('7')" class=" btn-30 btn-radius clear-marginleft">
            7</div>
        <div onclick="typetoinput('8')" class=" btn-30 btn-radius">
            8</div>
        <div onclick="typetoinput('9')" class=" btn-30 btn-radius">
            9</div>
        <div onclick="operator('plus')" class=" btn-30 btn-radius color-blue font-14">
            +</div>
        <div onclick="operator('minus')" class=" btn-30 btn-radius color-blue font-14">
            -</div>
        <div onclick="typetoinput('4')" class=" btn-30 btn-radius clear-marginleft">
            4</div>
        <div onclick="typetoinput('5')" class=" btn-30 btn-radius">
            5</div>
        <div onclick="typetoinput('6')" class=" btn-30 btn-radius">
            6</div>
        <div onclick="operator('multiply')" class=" btn-30 btn-radius color-blue font-14">
            ×</div>
        <div onclick="operator('divide')" class=" btn-30 btn-radius color-blue font-12">
            ÷</div>
        <div onclick="typetoinput('1')" class=" btn-30 btn-radius clear-marginleft">
            1</div>
        <div onclick="typetoinput('2')" class=" btn-30 btn-radius">
            2</div>
        <div onclick="typetoinput('3')" class=" btn-30 btn-radius">
            3</div>
        <div onclick="operator('pow')" class=" btn-30 btn-radius color-blue font-14">
            ײ</div>
        <div onclick="operator('sqrt')" class=" btn-30 btn-radius color-blue font-12">
            √</div>
        <div onclick="typetoinput('0')" class=" btn-70 btn-radius clear-marginleft">
            0</div>
        <div onclick="typetoinput('.')" class=" btn-30 btn-radius">
            .</div>
        <div onclick="operator('result')" class=" btn-70 btn-radius color-red font-14">
            =</div>
    </div>
</div>

js

根据操作类型作相应操作：

function operator(type) {
    switch (type) {
    case "clear":
        input.value = "0";
        _string.length = 0;
        /*document.getElementById("ccc").innerHTML="";
				for(i=0;i<_string.length;i++)
				{
					document.getElementById("ccc").innerHTML+=_string[i]+" "		
				}*/
        break;
    case "backspace":
        if (checknum(input.value) != 0) {
            input.value = input.value.replace(/.$/, '');
            if (input.value == "") {
                input.value = "0";
            }
        }
        break;
    case "opposite":
        if (checknum(input.value) != 0) {
            input.value = -input.value;
        }
        break;
    case "percent":
        if (checknum(input.value) != 0) {
            input.value = input.value / 100;
        }
        break;
    case "pow":
        if (checknum(input.value) != 0) {
            input.value = Math.pow(input.value, 2);
        }
        break;
    case "sqrt":
        if (checknum(input.value) != 0) {
            input.value = Math.sqrt(input.value);
        }
        break;
    case "plus":
        if (checknum(input.value) != 0) {
            _string.push(input.value);
            _type = "plus"input.value = "+";
            input.name = "type";
        }
        break;
    case "minus":
        if (checknum(input.value) != 0) {
            _string.push(input.value);
            _type = "minus"input.value = "-";
            input.name = "type";
        }
        break;
    case "multiply":
        if (checknum(input.value) != 0) {
            _string.push(input.value);
            _type = "multiply"input.value = "×";
            input.name = "type";
        }
        break;
    case "divide":
        if (checknum(input.value) != 0) {
            _string.push(input.value);
            _type = "divide"input.value = "÷";
            input.name = "type";
        }
        break;
    case "result":
        if (checknum(input.value) != 0) {
            _string.push(input.value);
            if (parseInt(_string.length) % 2 != 0) {
                _string.push(_string[_string.length - 2])
            }
            if (_type == "plus") {
                input.value = parseFloat(result(_string)[0]) + parseFloat(result(_string)[1]);
                input.name = "type"
            } else if (_type == "minus") {
                input.value = parseFloat(result(_string)[0]) - parseFloat(result(_string)[1]);
                input.name = "type"
            } else if (_type == "multiply") {
                input.value = parseFloat(result(_string)[0]) * parseFloat(result(_string)[1]);
                input.name = "type"
            } else if (_type == "divide") {
                input.value = parseFloat(result(_string)[0]) / parseFloat(result(_string)[1]);
                input.name = "type"
            }
            break;
        }

    }
}