网页计算器的实现

已于 2024-07-03 08:32:38 修改
阅读量446 收藏 6
点赞数 6
分类专栏： 程序及项目 文章标签： javascript html5 css3
于 2024-07-02 17:35:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zeyeqianli/article/details/140132275
版权

简介

该项目实现了一个功能完备、交互友好的网页计算器应用。只使用了 HTML、CSS 和 JavaScript ，用于检验web前端基础水平。

  • 开发环境：Visual Studio Code
  • 开发工具：HTML5、CSS3、JavaScript
  • 实现效果
    在这里插入图片描述

功能设计和模块划分

  1. 显示模块：负责展示输入的数字和计算结果。
  2. 输入模块：处理用户点击数字和运算符按钮的操作。
  3. 计算模块：执行具体的数学运算，并处理异常情况。

具体实现

  1. 项目结构
    在这里插入图片描述
  2. index.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" href="./css/index.css">
    <script src="./js/index.js"></script>
</head>

<body>
    <div id="outer">
        <!-- 显示 -->
        <div class="screen">
            <div class="showNum">0</div>
        </div>
        <!-- 按钮 -->
        <div class="buttons">
            <input type="button" value="AC" class="btn1">
            <input type="button" value="<-" class="btn1">
            <input type="button" value="+/-" class="btn1">
            <input type="button" value="/" class="btn2">

            <input type="button" value="1">
            <input type="button" value="2">
            <input type="button" value="3">
            <input type="button" value="*" class="btn2">

            <input type="button" value="4">
            <input type="button" value="5">
            <input type="button" value="6">
            <input type="button" value="-" class="btn2">


            <input type="button" value="7">
            <input type="button" value="8">
            <input type="button" value="9">
            <input type="button" value="+" class="btn2">


            <input type="button" value="0">
            <input type="button" value=".">
            <input type="button" value="m">
            <input type="button" value="=" class="btn2">
        </div>

    </div>

</body>

</html>
  1. index.css
/* 去除默认样式 */
* {
    padding: 0;
    margin: 0;
}

input {
    border: 0;
}

/* 外部轮廓的样式 */
#outer {
    width: 380px;
    height: 640px;
    background-color: black;
    /* 居中 */
    margin: 0 auto;
    /* 设置圆角效果 */
    border-radius: 30px;

}

/* 显示样式 */
.screen {
    width: 380px;
    height: 180px;
    /* 开启相对定位 */
    position: relative;
}

.showNum {
    color: white;
    font-size: 60px;
    /* 开启绝对定位 */
    position: absolute;
    right: 30px;
    bottom: 10px;
}

/* 按钮样式 */
.buttons {
    height: 440px;
    /* 设置内边距 */
    padding: 10px;
    /* 开启弹性盒子 */
    display: flex;
    /* 自动换行 */
    flex-wrap: wrap;
    /* 水平方向设置两端对齐 */
    justify-content: space-between;
    /* 垂直方向两端对齐 */
    align-content: space-between;
}

.buttons>input {
    width: 80px;
    height: 80px;
    background-color: rgb(51, 51, 51);
    /* 设置圆形 */
    border-radius: 50%;
    /* 设置字体颜色 */
    color: white;
    /* 设置字体大小 */
    font-size: 28px;
}

.buttons>.btn1 {
    color: black;
    background-color: rgb(165, 164, 164);
}

.buttons>.btn2 {
    background-color: rgb(213, 158, 90);
}

/* 设置点击高亮效果 */
.buttons>input:active {
    filter: brightness(140%);
}
  1. index.js
window.addEventListener("load", function () {
  let showNum = document.querySelector(".showNum");
  // 利用事件委托，给按钮共同的祖先元素绑定事件，利用事件冒泡完成对应的事件回调
  let buttons = document.querySelector(".buttons");
  //定义一个标志符
  let flag = false;
  buttons.addEventListener("click", function (e) {
    let buttonValue = e.target.value;
    let showNumValue = showNum.innerHTML;
    // 1.判断如果点击的是数字，则显示
    if (!isNaN(buttonValue)) {
      // 2.屏幕显示数字是否是0
      if (showNumValue == 0) {
        showNum.innerHTML = buttonValue;
      } else {
        showNum.innerHTML = showNumValue + buttonValue;
      }
    } else {
      //点击功能按钮
      switch (buttonValue) {
        case "AC": //清零
          showNum.innerHTML = 0;
          break;
        case "<-":
          showNum.innerHTML = delOneFun(showNumValue);
          break;
        case "+/-":
          showNum.innerHTML = showNumValue * -1;
          break;
        case ".":
          showNum.innerHTML = pointFun(showNumValue);
          break;
        case "m":
          location.href = "https://www.baidu.com";
          break;
        default:
          switch (buttonValue) {
            case "/":
            case "*":
            case "-":
            case "+":
              flag = true;
              showNum.innerHTML = showNumValue + buttonValue;
              break;
            case "=":
              showNum.innerHTML = evalFun(showNumValue);
              break;
          }
          break;
      }
    }
  });
  //退格函数
  function delOneFun(value) {
    let newValue = value.substring(0, value.length - 1);
    if (newValue.length == 0) {
      newValue = 0;
    }
    return newValue;
  }
  //小数点
  function pointFun(value) {
    let newValue = "";
    if (value.indexOf(".") == -1) {
      newValue = value + ".";
    } else if (flag) {
      newValue = value + ".";
      flag = false;
    } else {
      return value;
    }

    return newValue;
  }
  //运算函数
  function evalFun(value) {
    let newValue = "";
    // eval()可以接收一个字符串作为js的代码执行
    newValue = eval(value);
    // Number.isInteger() 判断一个数字是否是整数，如果是则返回true
    if (Number.isInteger(newValue)) {
      return newValue;
    } else {
      // toFixed()保留指定位数的小数
      newValue = newValue.toFixed(2);
      return newValue;
    }
  }
});
超级小狗
关注
  • 6
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html页面直接做计算,网页版计算器的实现(js实现计算功能)
weixin_35912365的博客
06-04 4125
今天带大家做一个网页版的计算器,页面使用js完成计算,界面的效果如下: 可以看到界面还是挺清爽的,但是功能呢?这里呢,界面上看到的这些按钮的功能都是可以用的 可以看到有括号也是可以算的.好了,接下来带大家来实现一下:首先就是布局,这个没有什么好说的,学点html和css马上就可以弄出这个界面,所以我就直接贴出代码:123*/456+-789()c0.del=* {margin: 0px;pad...
基于js的网页计算器实现
学习小使者 的专栏
06-17 2297
一个功能非常齐全的计算器，支持十六进制、十进制、八进制、二进制、双曲函数、角度制、弧度制的运算，支持公式计算，以及一些常用的功能。
TS项目实战二：网页计算器
最新发布
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
02-05 1447
使用ts实现网页计算器工具，实现计算器相关功能，使用tsify进行项目编译，引入Browserify实现web界面中直接使用模块加载服务。
网页版计算器
yunhyoung的博客
03-17 792
直接上传代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>网页版计算器</title> <style> input{ width: 397px; height: 50px; font-siz...
JS实现基本的网页计算器功能示例
10-15
本示例讲解了如何使用JavaScript实现一个基本的网页计算器。这个计算器主要依赖于JavaScript的事件响应和数值运算功能，让网页中的按钮能够响应用户的点击并执行相应的计算操作。 首先，HTML部分创建了一个简单的...
js网页版计算器的简单实现
10-27
### JS网页版计算器的简单实现 #### 一、概述 本文档将详细介绍一个简单的JS网页版计算器的实现方法。此计算器能够完成基本的数学运算，包括加法、减法、乘法、除法以及数字输入等功能。对于学习前端开发尤其是...
js 前端实现网页计算器
01-31
本项目“js 前端实现网页计算器”旨在教你如何利用HTML、CSS和JavaScript创建一个功能完备的网页计算器。下面我们将详细探讨这个过程中的关键知识点。 首先，我们需要创建HTML结构。HTML（超文本标记语言）是网页的...
用 js+html 实现一个网页计算器
05-31
使用js + html 实现的简单的网页计算器，可以实现加、减、乘、除复杂运算，二进制、八进制、十六进制转换、sin、cos、tan三角函数运算、acos、atan、asin反三角函数运算、开平方、log、随机数生成、指数运算、四舍五...
使用jsp调用javabean实现超简单网页计算器示例
10-26
在本节内容中，我们将详细介绍如何使用JSP和JavaBean技术实现一个简单的网页计算器。我们将通过代码示例、组件功能以及执行过程来逐步解析整个实现过程。 首先，我们需要了解什么是JavaBean。JavaBean是Java语言...
js实现：函数实现：网页计算器。
m0_53881313的博客
04-07 2266
这个是优化过的版本，有机会写一下过程，未优化的。
WEB网页版计算器（HTML、CSS、JavaScript实现）
weixin_60414376的博客
12-20 1万+
一、效果截图： 功能： 1、实现简单的四则运算。2、包含正负号操作。 3、M按钮实现跳转到一个网页。 4、可以使用小数运算。 二、代码实现： 1、HTML部分： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> ......
JS实现简易网页计算器
Ann_Chenyx
08-10 2万+
js实现简易计算器。计算器的布局不像表格那么公正对称，所以布局这块相对比较繁琐，但是也可以通过这来练习一下CSS。 一、实现功能 完成计算器的加减乘除的基本计算功能 实现输入框中的字符串拼接 二、实现思路 完成基本布局 js实现运算功能 三、知识点 e.target||e.srcElement ：获取触发事件的元素 四、具体代码实现 &lt;!DOCTYPE html&gt; &...
网页计算器功能【案例】【两种实现】
egg_er的博客
11-19 1060
网页计算器 我们学完了函数，做一个网页计算器的小案例…巩固一下… 案例图： 相加： 相减 相乘 相除 代码如下： 结构： <p>整数1： <input type="text" name="" id="num1"> </p> <p>整数2： <input type="text" name="" id="num2"> </p> <p> <input type="button" v
Web网页实现计算器功能
L的博客
08-20 2万+
计算器说明：主要是对样式和一些简单的文本操作进行，计算用到的是js内置的eval()函数，只需要将文本框的字符串作为参数传入即可得到结果，能够进行简单的运算，非常强大！<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器</title> <style type="text/
JavaWeb网页版计算器实现
kayla的博客
07-07 9792
第一种用javascript方法编写的计算器 [html] view plain copy %@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>   %   String path = request.getContextPath();   String basePath =
实现计算器HTML+JS简单实现计算器
热门推荐
huangjiangmin
03-04 3万+
这个是在闲暇之余，写出玩的一个小东西，没有复杂的算法，没有特别厉害的逻辑。只是方便有人需要的话直接用。也希望有大神可以帮我设计设计。下面是代码：   &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;link rel=&
使用js实现网页计算器
06-12
好的，这里给你提供一个简单的网页计算器的实现，你可以参考一下： HTML 代码： ``` <div> <input type="text" id="result" readonly> </div> <div> <button onclick="appendNumber('7')">7</button> <button onclick="appendNumber('8')">8</button> <button onclick="appendNumber('9')">9</button> <button onclick="appendOperator('+')">+</button> </div> <div> <button onclick="appendNumber('4')">4</button> <button onclick="appendNumber('5')">5</button> <button onclick="appendNumber('6')">6</button> <button onclick="appendOperator('-')">-</button> </div> <div> <button onclick="appendNumber('1')">1</button> <button onclick="appendNumber('2')">2</button> <button onclick="appendNumber('3')">3</button> <button onclick="appendOperator('*')">*</button> </div> <div> <button onclick="appendNumber('0')">0</button> <button onclick="appendOperator('/')">/</button> <button onclick="clearResult()">C</button> <button onclick="calculate()">=</button> </div> ``` JavaScript 代码： ``` let result = document.getElementById('result'); function appendNumber(num) { result.value += num; } function appendOperator(operator) { result.value += operator; } function clearResult() { result.value = ''; } function calculate() { try { result.value = eval(result.value); } catch (error) { result.value = 'Error'; } } ``` 这个计算器实现了加减乘除四种基本运算，以及清空和计算结果的功能。当用户点击数字键或运算符键时，会将对应的字符添加到文本框中；当用户点击计算键时，会计算表达式的值并显示在文本框中；如果表达式不合法，则显示 "Error"。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

超级小狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值