【前端开发】实现一个简单的四则算术运算器

原创于 2023-12-06 17:01:12 发布 · 1.4k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #css

HTML前端专栏收录该内容

2 篇文章

订阅专栏

最近学习JS基础的时候做了一个简单的小项目，就是利用HTML、CSS和JS开发一个简单的网页版本的四则算术运算器。

设计要求：

1.设计一个比较合理的交互界面

2.添加三个input元素，前两个用于输入数字A和数字B，最后一个input输出结果C

3.添加四个按钮，可以对输入的数字A和数字B进行四则运算

4.计算器要有一定的容错机制。

制作的效果图如下：

项目的结构如下：

一、搭建基本的HTML框架

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四则计算器</title>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/app.css">
</head>
<body>
    <!--计算器盒子-->
    <div class="calculator-box">
        <span class="calculator-box-title">算术运算</span>
        <!--输入输出区域-->
        <div class="calculator-inputbox">
            <input type="number" id="inputA" placeholder="请输入数字A">
            <input type="number" id="inputB" placeholder="请输入数字B">
            <input type="text" id="inputC" readonly=“readonly” placeholder="结果显示区域">
        </div>
        <!--输入输出区域 end-->
        <!--运算执行按钮-->
        <div class="calculator-buttons">
            <button id="btn-plus">加</button>
            <button id="btn-minus">减</button>
            <button id="btn-multiply">乘</button>
            <button id="btn-division">除</button>
        </div>
        <!--运算执行按钮 end-->
    </div>
    <!--计算器盒子 end-->
</body>
</html>
<script src="./js/index.js"></script>

二、使用CSS实现对应的样式

1.public.css文件代码

*{
    margin: 0;
    padding: 0;
}

2.app.css文件代码

/*计算器盒子的样式*/
.calculator-box{
    position: relative;
    width: 680px;
    height: 480px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 200px;
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.3);
    border-radius: 30px;
}

/*计算器盒子内的span标签的样式*/
.calculator-box-title{
    position: absolute;
    display: block;
    font-size: 30px;
    font-weight: 600;
    left: 30px;
    top: 20px;
}

/*输入输出区域盒子的样式*/
.calculator-inputbox{
    position: relative;
    width: 480px;
    height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    top: 80px;
    left: 50px;
}

/*输入输出区域内的input的样式*/
.calculator-inputbox>input{
    width: 400px;
    height: 45px;
    border-radius: 10px;
    padding-left: 10px;
    font-size: 16px;
}

/*输入输出区域内的类型为text的input的样式*/
.calculator-inputbox>input[type=text]{
    color: red;
    font-weight: 600;
}

/*运算执行按钮区域盒子的样式*/
.calculator-buttons{
    width: 480px;
    height: 30px;
    position: absolute;
    bottom: 60px;
    left: 50px;
}

/*运算执行按钮区域盒子内的按钮的样式*/
.calculator-buttons>button{
    width: 100px;
    height: 40px;
    border-radius: 10px;
    margin-right: 10px;
    font-size: 18px;
    cursor: pointer;
}

三、在外部JS文件中实现交互功能

index.js


//inputA和inputB是用户输入数字的框
let inputA = document.getElementById("inputA");
let inputB = document.getElementById("inputB");

//inputC是显示运算结果的框
let inputC = document.getElementById("inputC");

//获取四个运算运算操作哦按钮
let btn_plus = document.getElementById("btn-plus");
let btn_minus = document.getElementById("btn-minus");
let btn_multiply = document.getElementById("btn-multiply");
let btn_division = document.getElementById("btn-division");


//判断是否为空值
function  validateNull( inputValueA,inputValueB,outPut){
    //如果存在内容，那么这个变量的值就是true
    let a = inputValueA.trim();
    let b = inputValueB.trim();
    if( !a || !b ){
        outPut.value = "请输入正确的数值！";
        if(!a){
            inputA.focus();
            return false;
        }else if(!a==false&&!b){
            inputB.focus();
            return false;
        }
    }
    return true;
}

btn_plus.addEventListener("click",function(){
    if( validateNull(inputA.value,inputB.value,inputC)){
        inputC.value = parseFloat(inputA.value)+parseFloat(inputB.value);
    }
});

btn_minus.addEventListener("click",function(){
    if( validateNull(inputA.value,inputB.value,inputC)){
        inputC.value = parseFloat(inputA.value)-parseFloat(inputB.value);
    }
});

btn_multiply.addEventListener("click",function(){
    if( validateNull(inputA.value,inputB.value,inputC)){
        inputC.value = parseFloat(inputA.value)*parseFloat(inputB.value);
    }
});

btn_division.addEventListener("click",function(){
    //要判断是否存在空值
    if( validateNull(inputA.value,inputB.value,inputC)){
        //进一步判断第二个输入框是否为0
        if(inputB.value==0){
            //如果为0就意味着非法运算
            inputC.value  = "不可以除以0！";
            return false;
        }
        inputC.value = parseFloat(inputA.value)/parseFloat(inputB.value);
    }
});

该项目仅实现了简单的四则运算，如果要实现更加复杂的运算，需要更复杂的算法支持。

好了，那么这个项目就大功告成了！