JavaScript实现Windows风格计算器完整代码

作者：小括号时间：2026-10-25 16:56:21浏览：135

本文提供基于JavaScript、HTML和CSS构建的仿Windows计算器完整源码。实现数字录入、四则运算、小数点控制、正负号切换、退位及清屏功能，并包含除零等异常处理逻辑。适合前端初学者进行综合练习，掌握事件处理与业务逻辑组合。

本文分享了一个使用JavaScript编写的仿Windows风格计算器的完整实现代码，供读者参考学习。

任务要求如下：

项目名称为仿Windows计算器，具体功能需求包括：

1、实现点击按钮录入数字的功能；2、实现基础的加、减、乘、除四则运算，并添加必要的异常处理，例如处理除数为0的情况；3、实现小数点功能，并添加异常处理，确保小数点只能出现一次；4、实现正负号切换功能；5、实现退位功能，当显示框仅剩最后一位数字时执行退位，显示框应重置为0；6、提供清屏功能。

本实例涉及的关键知识点包括：

1、通过大量自定义函数实现具体的业务逻辑；2、灵活运用事件监听及事件处理机制；3、培养并实践异常处理的编程思维；4、鼓励并实践利用不同的编程思路来解决同一问题。

本次综合练习旨在达到以下目的：

1、将CSS、HTML和JavaScript技术有效结合，实现完整的业务功能；2、锻炼并培养编程思维，提升分析问题和解决问题的能力；3、训练并培养运用多种编程思路完成预设目标的能力。

以下是计算器的成品效果展示：

任务要求如下：

HTML页面结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="计算器.css">
<script type="text/javascript" src="计算器.js"></script>
<!-- <script type="text/javascript" src="js/mooc.js"></script> -->

</head>
<body onload="init()">
    <div id="div1">
        <!-- form与后台进行传递 -->
        <div id="div2">
            <input type="text" name="num" id="num">
        </div>
        <div id="div3">
            <input type="button" value="c" name="" id="">
            <input type="button" value="←" name="" id="">
            <input type="button" value="+/-" name="" id="">
            <input type="button" value="÷" name="" id="">
            <input type="button" value="1" name="" id="">
            <input type="button" value="2" name="" id="">
            <input type="button" value="3" name="" id="">
            <input type="button" value="×" name="" id="">
            <input type="button" value="4" name="" id="">
            <input type="button" value="5" name="" id="">
            <input type="button" value="6" name="" id="">
            <input type="button" value="-" name="" id="">
            <input type="button" value="7" name="" id="">
            <input type="button" value="8" name="" id="">
            <input type="button" value="9" name="" id="">
            <input type="button" value="+" name="" id="">
            <input type="button" value="0" name="" id="btn2">
            <input type="button" value="." name="" id="">
            <input type="button" value="=" name="" id="">
            <!-- <input type="button" value="m" name="" id="imooc" > -->
        </div>
    </div>
</body>
</html>

CSS样式定义如下：

*{
    margin: 0px;
    padding: 0px;
}
div{
    width: 220px;
    border-radius: 5px;
}
#div1{
    top: 60px;
    left: 100px;
    position: relative;
    background-image: url(image/7.png);
    background-size: 108%;
}
input[type="button"]{
    position: relative;
    left: 3px;
    top: 3px;
    width: 40px;
    height: 30px;
    margin: 5px ;
    border: 5px;
    /*圆弧度*/
    border-radius: 10px;
    font-size: 20px;
    /*不透明度*/
    opacity:0.85;
}
input[type="text"]{
    width: 205px;
    height: 30px;
    position: relative;
    top: 3px;
    left: 8px;
    font-size: 20px;
    text-align: right;
    background-color: #ffffff;
    /*border: 1px solid;*/
    /*不延伸，用已存在的*/
    box-sizing: border-box;
    padding-right: 5px;
}
#btn2{
    width: 93px;
}

/*伪类：产生浮动，银灰色*/
input[type="button"]:hover{
    background-color: silver;
}

JavaScript逻辑代码如下：

function init(){
    var num=document.getElementById("num");
    num.value=0;
    num.disabled="disabled";//不能输入

    // 通过标签获取input的数组，进行遍历，通过this.value输出单击当前按钮的值
    // 事件添加
    var objButton=document.getElementsByTagName("input");
    var btn_num1;//中间变量
    var fh;//加减乘除符号
    for(var i=0;i<objButton.length;i++){
        objButton[i].onclick=function(){
            if(isNumber(this.value)){
                // num.value=(num.value+this.value)*1;
                if(isNull(num.value)){
                    num.value=this.value;
                }else{
                    num.value=num.value+this.value;
                }
            }else{
                var btn_num=this.value;
                // var btn_num1;
                switch(btn_num){
                    case "+":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="+";
                        break;
                    case "-":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="-";
                        break;
                    case "×":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="×";
                        break;
                    case "÷":
                        btn_num1=Number(num.value);
                        num.value=0;
                        fh="÷";
                        break;
                    case ".":
                        // 自定义函数（规则），判断是否有小数点
                        num.value=dec_number(num.value);
                        break;
                    case "←":
                        num.value=back(num.value);
                        break;
                    case "c":
                        num.value=0;
                        break;
                    case "+/-":
                        num.value=sign(num.value);
                        break;
                    case "=":
                        switch(fh){
                            case "+":
                                num.value=btn_num1+Number(num.value);
                                break;
                            case "-":
                                num.value=btn_num1-Number(num.value);
                                break;
                            case "×":
                                num.value=btn_num1*Number(num.value);
                                break;
                            case "÷":
                                if(Number(num.value)==0){
                                    alert("除数不能为0");
                                }else{
                                    num.value=btn_num1/Number(num.value);
                                }
                                break;
                        }
                    break;
                }
            }
        }
    }
}

// 正负号
function sign(n){
    //乘以-1
    n=Number(n)*-1;
    return n;
}

// 退位，若只有一位，先进行截取
function back(n){
    n=n.substr(0,n.length-1);
    if(isNull(n)){
        n=0;
    }
    return n;
}

// 小数点
function dec_number(n){
    // 小数点不存在
    if(n.indexOf(".")==-1){
        n=n+".";
    }
    return n;
}

// 验证文本框是否为空或者0
function isNull(n){
    if(n=="0" || n.length==0){
        return true;
    }else{
        return false;
    }
}

// isNaN判断是否转换为数字-->可以为false，不能为true
function isNumber(n){
    return !isNaN(n);
}

网页运行效果图如下：

任务要求如下：

以上就是本文的全部内容，希望能为读者的学习提供有益的帮助，也欢迎大家继续支持本站。

作者最新文章

JS语法错误会阻止加载吗？区分SyntaxError与资源加载失败

2026-11-05 16:08:46

JavaScript常见SyntaxError语法错误排查与修复方法

2026-11-05 13:58:44

JS中slice、substring和substr截取字符串的区别

2026-11-05 13:43:47

JS 转 TS 手动迁移最佳实践：从配置 tsconfig 到消除 any 类型

2026-11-05 11:53:32

为什么JS数组push后得到的是数字而不是数组？

2026-11-05 09:59:18