【小工具】原生JS的计算器

最新推荐文章于 2024-04-20 13:50:15 发布

邹大叔

最新推荐文章于 2024-04-20 13:50:15 发布

阅读量908

点赞数

分类专栏：小工具文章标签： javascript

小工具专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这里写图片描述

【小工具】原生JS的计算器

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>原生JS的计算器</title>
    <style type="text/css">
    body {
        font-size: 12px;
        font-family: Arial, Georgia, "Times New Roman", Times, serif;
        color: #555;
        text-align: center;
        background-color: #e2e2e2;
    }

    h6 {
        margin: 0;
        font-size: 12px;
    }

    #calculator {
        width: 240px;
        height: auto;
        overflow: hidden;
        margin: 10px auto;
        border: #fff 1px solid;
        padding-bottom: 10px;
        background-color: #f2f2f2;
    }

    #calculator div {
        clear: both;
    }

    #calculator ul {
        padding: 0;
        margin: 5px 14px;
        border: #fff 1px solid;
        height: auto;
        overflow: hidden
    }

    #calculator li {
        list-style: none;
        float: left;
        width: 32px;
        height: 32px;
        margin: 5px;
        display: inline;
        line-height: 32px;
        font-size: 14px;
        background-color: #eaeaea;
    }

    #calculator li.tool {
        background-color: #e2e2e2;
    }

    #calculator li:hover {
        background-color: #f9f9f9;
        cursor: pointer;
    }

    #calculator li:active {
        background-color: #fc0;
        cursor: pointer;
    }

    #calculator li.tool:active {
        background-color: #d8e8ff;
        cursor: pointer;
    }
    #calculator li.dh{
        width:74px;
    }
    #calcu-head {
        text-align: left;
        padding: 10px 15px 5px;
    }

    span.imyeah {
        float: right;
        color: #ccc;
    }

    span.imyeah a {
        color: #ccc;
    }

    .screen {
        width: 200px;
        height: 24px;
        line-height: 24px;
        padding: 4px;
        border: #e6e6e6 1px solid;
        border-bottom: #f2f2f2 1px solid;
        border-right: #f2f2f2 1px solid;
        margin: 10px auto;
        direction: ltr;
        text-align: right;
        font-size: 16px;
        color: #999;
    }

    #calcu-foot {
        text-align: left;
        padding: 10px 15px 5px;
        height: auto;
        overflow: hidden;
    }

    span#note {
        float: left;
        width: 210px;
        height: auto;
        overflow: hidden;
        color: red;
    }

    span.welcome {
        clear: both;
        color: #999;
    }

    span.welcome a {
        float: right;
        color: #999;
    }
    </style>
    <script language="javascript">
    var num = 0,
        result = 0,
        numshow = "0";
    var operate = 0; //判断输入状态的标志 
    var calcul = 0; //判断计算状态的标志 
    var quit = 0; //防止重复按键的标志 

    function command(num) {
        var str = String(document.calculator.numScreen.value); //获得当前显示数据 
        str = (str != "0") ? ((operate == 0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值; 
        str = str + String(num); //给当前值追加字符 
        document.calculator.numScreen.value = str; //刷新显示 
        operate = 0; //重置输入状态 
        quit = 0; //重置防止重复按键的标志 
    }

    function dzero() {
        var str = String(document.calculator.numScreen.value);
        str = (str != "0") ? ((operate == 0) ? str + "00" : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当str+"00"，否则返回"0"; 
        document.calculator.numScreen.value = str;
        operate = 0;
    }

    function dot() {
        var str = String(document.calculator.numScreen.value);
        str = (str != "0") ? ((operate == 0) ? str : "0") : "0"; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回"0"; 
        for (i = 0; i <= str.length; i++) { //判断是否已经有一个点号 
            if (str.substr(i, 1) == ".") return false; //如果有则不再插入 
        }
        str = str + ".";
        document.calculator.numScreen.value = str;
        operate = 0;
    }

    function del() { //退格 
        var str = String(document.calculator.numScreen.value);
        str = (str != "0") ? str : "";
        str = str.substr(0, str.length - 1);
        str = (str != "") ? str : "0";
        document.calculator.numScreen.value = str;
    }

    function clearscreen() { //清除数据 
        num = 0;
        result = 0;
        numshow = "0";
        document.calculator.numScreen.value = "0";
    }

    function plus() { //加法 
        calculate(); //调用计算函数 
        operate = 1; //更改输入状态 
        calcul = 1; //更改计算状态为加 
    }

    function minus() { //减法 
        calculate();
        operate = 1;
        calcul = 2;
    }

    function times() { //乘法 
        calculate();
        operate = 1;
        calcul = 3;
    }

    function divide() { //除法 
        calculate();
        operate = 1;
        calcul = 4;
    }


    function equal() {
        calculate(); //等于 
        operate = 1;
        num = 0;
        result = 0;
        numshow = "0";
    }
    // 

    function calculate() {
        numshow = Number(document.calculator.numScreen.value);

        if (num != 0 && quit != 1) { //判断前一个运算数是否为零以及防重复按键的状态 
            switch (calcul) { //判断要输入状态 
                case 1:
                    result = num + numshow;
                    break; //计算"+" 
                case 2:
                    result = num - numshow;
                    break; //计算"-" 
                case 3:
                    result = num * numshow;
                    break;
                case 4:
                    numshow != 0?result = num / numshow:document.getElementById("note").innerText = "被除数不能为零！";setTimeout(clearnote, 4000);
                    break;
                case 5:
                    result = num % numshow;
                    break;
            }
            quit = 1; //避免重复按键 
        } else{
            result = numshow;
        }
        numshow = String(result);
        document.calculator.numScreen.value = numshow;
        num = result; //存储当前值 
    }
    function clearnote() { //清空提示 
        document.getElementById("note").innerText = "";
    }
    </script>
</head>
<body>
    <div id="calculator">
        <form name="calculator" action="" method="get">
            <div id="calcu-screen">
                <!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
                <input type="text" name="numScreen" class="screen" value="0" readonly/>
            </div>
            <div id="calcu-btn">
                <ul>
                    <!--配置按钮-->
                    <li onclick="command(7)">7</li>
                    <li onclick="command(8)">8</li>
                    <li onclick="command(9)">9</li>
                    <li class="tool" onclick="del()">←</li>
                    <li class="tool" onclick="clearscreen()">C</li>
                    <li onclick="command(4)">4</li>
                    <li onclick="command(5)">5</li>
                    <li onclick="command(6)">6</li>
                    <li class="tool" onclick="times()">×</li>
                    <li class="tool" onclick="divide()">÷</li>
                    <li onclick="command(1)">1</li>
                    <li onclick="command(2)">2</li>
                    <li onclick="command(3)">3</li>
                    <li class="tool" onclick="plus()">+</li>
                    <li class="tool" onclick="minus()">-</li>
                    <li onclick="command(0)">0</li>
                    <li onclick="dzero()">00</li>
                    <li onclick="dot()">.</li>
                    <li class="tool dh" onclick="equal()">=</li>
                </ul>
            </div>
            <div id="calcu-foot">
                <span id="note"></span>
            </div>
        </form>
    </div>
</body>
</html>

邹大叔

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【小工具】原生JS的计算器

【小工具】原生JS的计算器<!doctype html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>写给新手：js表单操作（四）简单计算器（二）</title> <style type="text/css"> body {
复制链接

扫一扫