侧边栏壁纸

html、js、css做一个简易的计算器

2023年10月14日 273阅读 0评论 0点赞

1、确定目标

  • 养成确定目标的习惯,你要写的代码目标是什么要明确,不然写着写着就不知道要怎么办了

2、确定思路

  • 查找对应文件,分析要获取什么内容,要怎么写,获取文件内容的方法,如果文件是是json文件,要获取对应的键,就把键写下来;如果使用正则,先把正则表达式写好,去找相关的网站验证一下你的正则表达式

3、整理思路

  • 把代码的总流程大概过一下,比如获取这值,这个键后后面有没有需要用到它,需要不需要写函数,写函数方便点还是直接写方便点,重复需要的代码就写函数,同一个数需要用到很多地方就把它放到变量里,方便后期修改该,记得写注释,免得后期看不懂你在写什么或者说不知道这个代码的作用是什么

以下是简单示例

要求:写一个简单的计算器

目标:写计算器

思路:打算用js和html来写,不需要像实体计算器一样有很多个键,只需要有两个输入框,一个运算符选择,一个等号,一个结果框,考虑到有些用户会可能会输入中文或者英文,所以需要在两个输入框加以限制等等

整理:在代码前面加一个注释,里面写上你要写敲代码的步骤

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

<body>
    <div class="calculator">
    <input type="text" name="bds" placeholder="请输入表达式">
    <input type="submit" value="=">
    <input type="text" name="out">
    <script src="./cal.js"></script>
    </div>

</body>
</html>

加点js细节

// 获取输入框的元素
const input = document.querySelector('input[name="bds"]');
const output = document.querySelector('input[name="out"]');

// 监听输入框的输入事件
input.addEventListener('input', () => {
  // 获取输入框的值
  const expression = input.value;

  // 计算表达式的值
  const result = eval(expression);

  // 将计算结果赋值给输出框
  output.value = result;
});

加点css细节

/* cal.css */

/* 设置整个页面的背景颜色为浅蓝色 */
body {
    background-color: #e0f2f7;
    text-align: center;
}

/* 设置计算器的容器为一个圆角矩形,居中显示,宽度为300px,高度为200px,边框为1px灰色实线,内边距为10px */
.calculator {

    border-radius: 10px;
    margin: 0 auto;
    width: 300px;
    height: 130px;
    border: 1px solid #cccccc;
    padding: 10px;
    margin: auto;
}

/* 设置计算器的输入框为一个圆角矩形,宽度为280px,高度为40px,字体大小为24px,文本居中对齐,边框为1px灰色实线 */
.calculator input[type="text"] {
    border-radius: 5px;
    width: 280px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #cccccc;
}

/* 设置计算器的提交按钮为一个圆角矩形,宽度为40px,高度为40px,字体大小为24px,文本居中对齐,背景颜色为深蓝色,字体颜色为白色,边框为1px灰色实线 */
.calculator input[type="submit"] {
    border-radius: 5px;
    width: 40px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    background-color: #003366;
    color: #ffffff;
    border: 1px solid #cccccc;
}

/* 设置计算器的输入框和提交按钮之间的间距为10px */
.calculator input[type="text"] + input[type="submit"] {
    margin-left: 10px;
}

/* 设置计算器的输入框和输出框之间的间距为20px */
.calculator input[type="text"] + input[type="text"] {
    margin-top: 20px;
}

演示站

https://bytesquadblog.cn/calculator/

0

—— 评论区 ——

博主关闭了当前页面的评论