Web+Css+JS制作简易的计算器

轮回的孤独离君

已于 2024-05-13 22:10:34 修改

阅读量291

点赞数 5

文章标签： css html5 javascript json

于 2024-05-06 20:37:20 首次发布

本文链接：https://blog.csdn.net/qq_73649045/article/details/138507178

版权

前言：

此计算器未对0.后面做精准的处理。

界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 设置文档的字符编码为UTF-8 -->
    <meta charset="UTF-8">
    <!-- 设置网页标题为“XX的计算器” -->
    <title>XX的计算器</title>
    <!-- 链接外部CSS样式表文件lj.css -->
    <link href="lj.css" rel="stylesheet" type="text/css">

</head>
<body>
<!-- 包裹计算器的外部容器 -->
<div class="wrapper_lj">
    <!-- 显示计算结果的区域 -->
    <div class="eve_lj">
        <input class="display_lj" id="display" value="0">
    </div>
    <!-- 计算器按钮区域 -->
    <div class="cal_lj">
        <!-- 按键 -->
        <input type="button" class="button_lj osn" id="AC" value="AC">
        <input type="button" class="button_lj osn" id="Back" value="Back">
        <input type="button" class="button_lj osn" id="+/-" value="+/-">
        <input type="button" class="button_lj orange" id="/" value="/">
        <input type="button" class="button_lj" id="7" value="7">
        <input type="button" class="button_lj" id="8" value="8">
        <input type="button" class="button_lj" id="9" value="9">
        <input type="button" class="button_lj orange" id="*" value="*">
        <input type="button" class="button_lj" id="4" value="4">
        <input type="button" class="button_lj" id="5" value="5">
        <input type="button" class="button_lj" id="6" value="6">
        <input type="button" class="button_lj orange" id="-" value="-">
        <input type="button" class="button_lj" id="1" value="1">
        <input type="button" class="button_lj" id="2" value="2">
        <input type="button" class="button_lj" id="3" value="3">
        <input type="button" class="button_lj orange" id="+" value="+">
        <input type="button" class="button_lj zero" id="0" value="0">
        <input type="button" class="button_lj" id="." value=".">
        <input type="button" class="button_lj orange" id="=" value="=">
    </div>
</div>
<!-- 链接外部JavaScript文件cal.js，用于实现计算器功能，不要换到head -->
<script type="text/javascript" src="cal.js"></script>
</body>
</html>

CSS:

/* 定义计算器按钮区域的样式 */  
.cal_lj {  
    /* 使用grid布局 */  
    display: grid;  
    /* 自动适应列数，每列最小宽度为50px，最大宽度为1fr（网格单元的一部分） */  
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));  
    /* 自动行高，每行最小高度为50px，自动适应内容 */  
    grid-auto-rows: minmax(50px, auto);  
    /* 网格项之间的间隙 */  
    grid-gap: 20px; /* 网格之间的间隙 */  
    /* 容器内部填充 */  
    padding: 10px;  
}  
  
/* 定义计算器外部容器的样式 */  
.wrapper_lj {  
    /* 宽度 */  
    width: 300px;  
    /* 高度 */  
    height: 500px;  
    /* 盒模型大小包括内边距和边框 */  
    box-sizing: border-box;  
    /* 背景颜色 */  
    background-color: black;  
}  
  
/* 定义显示区域的外部容器样式 */  
.eve_lj {  
    /* 移除边框 */  
    border: none;  
    /* 背景颜色 */  
    background-color: black;  
    /* 设置为块级元素 */  
    display: block;  
    /* 高度 */  
    height: 150px;  
    /* 文本右对齐 */  
    text-align: right;  
    /* 行高设置，使文本垂直居中 */  
    line-height: 200px;  
}  
  
/* 定义显示结果的输入框样式 */  
.display_lj {  
    /* 移除边框 */  
    border: none;  
    /* 背景颜色 */  
    background-color: black;  
    /* 文本右对齐 */  
    text-align: right;  
    /* 文本颜色 */  
    color: white;  
    /* 字体大小 */  
    font-size: 40px;  
    /* 宽度 */  
    width: 280px;  
}  
  
/* 定义按钮的通用样式 */  
.button_lj {  
    /* 移除默认的边框 */  
    border: none;   
    /* 默认背景颜色 */  
    background-color: #808080;   
    /* 文本颜色 */  
    color: white;  
    /* 字体大小 */  
    font-size: 16px;  
    /* 为了让input变为块级元素并应用border-radius */  
    border-radius: 50%; /* 圆形按钮 */  
    /* 文本居中 */  
    text-align: center;   
    /* 垂直居中文本（通过行高） */  
    line-height: 50px;   
}  
  
/* 定义功能键（如AC、Back、+/-）的背景颜色 */  
.button_lj.osn {  
    background-color: rgb(169,169,169);  
}  
  
/* 定义第四列按钮（如运算符）的背景颜色 */  
.button_lj.orange { /* 第四列背景颜色 */  
    background-color: orange;  
}  
  
/* 定义数字0按钮的样式，跨两列显示 */  
.button_lj.zero {  
    grid-column: span 2; /* 跨两列显示 */  
    border-radius: 30px; /* 椭圆形的圆角 */  
}  
  
/* 定义按钮被按下时的样式 */  
.button_lj:active {  
    filter: brightness(1.2); /* 亮度提高1.2倍 */  
}

javaScript:

// 获取显示区域（通常是输入框）  
var display = document.getElementById('display');  
// 获取所有具有类名 'button_lj' 的按钮元素  
var buttons = document.getElementsByClassName('button_lj');  
  
// 遍历每个按钮，并添加点击事件监听器  
Array.from(buttons).forEach(function (button) {  
    button.addEventListener('click', function () {  
        // 获取按钮的value值  
        var value = this.value;  
  
        // 处理数字按钮  
        if (!isNaN(value) && display.value[display.value.length-2] !== '.') {  
            // 如果显示区域当前值为'0'，则直接替换为点击的数字  
            if (display.value === '0') {  
                display.value = value;  
            } else {  
                // 否则，在显示区域当前值的末尾追加点击的数字  
                display.value += value;  
            }  
        }  
  
        // 处理运算符按钮  
        else if (['+', '-', '*', '/'].includes(value)) {  
            // 如果显示区域最后一个字符是运算符且与新点击的运算符不同  
            if (['+', '-', '*', '/'].includes(display.value[display.value.length - 1]) && value != display.value[display.value.length - 1]) {  
                // 则替换显示区域最后一个字符为新点击的运算符  
                display.value = display.value.slice(0, display.value.length - 1) + value;  
            }  
            // 如果显示区域最后一个字符与新点击的运算符相同，则不执行任何操作  
            else if (value === display.value[display.value.length - 1]) {  
                // 这里可以添加一些逻辑来处理连续点击相同运算符的情况（如果需要的话）  
            } else {  
                // 否则，在显示区域当前值的末尾追加运算符  
                display.value += value;  
            }  
        }  
  
        // 处理 AC 按钮（全清）  
        else if (value === 'AC') {  
            // 将显示区域的值设置为'0'  
            display.value = '0';  
        }  
  
        // 处理正负切换按钮  
        else if (value === '+/-') {  
            // 如果显示区域的值以'-'开头，则去掉'-'  
            if (display.value[0] === '-') {  
                display.value = display.value.slice(1);  
            } else {  
                // 否则，在显示区域的值前面添加'-'  
                display.value = '-' + display.value;  
            }  
        }  
  
        // 处理 "Back" 按钮（回退）  
        else if (value === 'Back') {  
            // 移除显示区域最后一个字符  
            display.value = display.value.slice(0, display.value.length - 1);  
        }  
  
        // 处理 "=" 按钮（计算）  
        else if (value === '=') {  
            // 调用计算函数，并将结果显示在显示区域  
            display.value = calculate_lj(display.value);  
        }  
  
        // 处理"."按钮（小数点）  
        else if (value === '.') {  
            // 如果显示区域最后一个字符不是'.'，则添加'.'  
            if (display.value[display.value.length - 1] !== '.') {  
                display.value += value;  
            }  
        }  
    });  
});  
  
// 计算函数  
function calculate_lj(value) {  
    // 使用eval函数计算表达式（注意：eval有安全风险，仅用于示例）  
    // 并将结果保留6位小数  
    return eval(value).toFixed(6);  
}  
  
// 注释：  
// 1. 请注意，使用eval函数来执行用户输入的表达式可能存在安全风险，因为它会执行任何JavaScript代码。  
//    在实际应用中，应该考虑使用更安全的计算库来替代eval。  
// 2. 对于小数点处理，这里只检查了显示区域最后一个字符是否为'.'，但更复杂的逻辑可能包括检查小数点之前的数字是否存在等。  
// 3. 在处理连续点击相同运算符的情况时，这里的逻辑是忽略这种操作，但根据实际需求，可能需要进行不同的处理。