简单的计算器制作

最新推荐文章于 2023-08-14 15:50:28 发布
最新推荐文章于 2023-08-14 15:50:28 发布
阅读量1.5k 收藏 4
点赞数 3
分类专栏： Web2.0 文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wyxwyx469410930/article/details/78303380
版权

制作简单计算器

刚入门用js实现了一个小小的计算器跟大家分享一下

  • HTML文件
  • CSS文件
  • JS文件

整体效果展示
整体效果展示

HTML文件

<!DOCTYPE html>
<html lang = "en" >
    <head>
        <meta charset = "UTF-8">
        <title> Simple Calculator </title>
        <link rel = "stylesheet" href = "./cal.css">
        <script type="text/javascript" src = "./cal.js"></script>
    </head>
    <body>
        <div id = "the_title">Simple Calculator </div> 
        <div id = "calculator_container">
            <div id = "calculator">
                <input id = "result">
                <div id = "first_row">
                    <button id = "seven" class = "button" >7</button>
                    <button id = "eight" class = "button" >8</button>
                    <button id = "nine" class = "button" >9</button> 
                    <button id = "divide" class = "button" >/</button> 
                </div>
                <div id = "second_row">
                    <button id = "four" class = "button" >4</button>
                    <button id = "five" class = "button" >5</button>
                    <button id = "six" class = "button" >6</button>
                    <button id = "multiply" class = "button" >*</button>
                </div>
                <div id = "third_row">
                    <button id = "one" class = "button" >1</button>
                    <button id = "two" class = "button" >2</button>
                    <button id = "three" class = "button" >3</button>
                    <button id = "substract" class = "button" >-</button>
                </div>
                <div id = "fourth_row">
                    <button id = "zero" class = "button">0</button>
                    <button id = "point" class = "button" >.</button>
                    <button id = "delete_one" class = "button" >←</button>
                    <button id = "plus" class = "button" >+</button>
                </div>
                <div id = "fifth_row">
                    <button id = "left_bracket" class = "button" >(</button>
                    <button id = "right_bracket" class = "button" >)</button>
                    <button id = "delete_all" class = "button" >CE</button>
                    <button id = "equal" class = "button" >=</button>
                </div>
            </div>
        </div>
    </body>
</html>

CSS文件

body
{
    background-color: pink ; 
    width: 100% ;
    height: 100% ;
    margin: 0px;
    padding: 0px;
    overflow : hidden;
    background:url(https://timgsa.baidu.com/timg?image&quality=80&size=b10000_10000&sec=1508567142&di=f077307d708e1eb41bf7524fc3c1442c&src=http%3A%2F%2Fpic1.16pic.com%2F00%2F14%2F57%2F16pic_1457961_b.jpg);
    background-size: 100% ,100% ;
    position: absolute; 
    top : 50px ;

}

#the_title
{
    position: absolute ;
    top : 50px ;
    left : calc(50% - 120px);
    font-size:  20px ;
    font-weight: bold ;
    color : white;

}

#the_photo
{
    background-size:  100% , 100% ;
}

#calculator
{
    border-radius: 15px ;
    border:  5px solid white ;
    position: absolute; 
    top : 100px;
    left: calc( 50% - 200px) ;
    width: 350px ;
    height: 471px ;
    background-color: #FFCCCC;
}

#claculator_container
{
    position: relative ;
    border: 1px solid black ;
    width: 1000px ;
    height: 100% ;
    margin-left: auto ;
    margin-right: auto ;
}

#result
{
    width: 295px ;
    height: 45px ;
    margin-left: 24px ;
    margin-top: 12px ;
    margin-bottom: 12px ; 
    text-align: center ;

}

#result
{
    background-color: #9999CC ;
    border : 3px solid black ;
    color : #80CAAC;
    font-size: 30px ;
}

.button 
{
    width: 70px;
    height: 70px;
    font-size: 20px;
    color: white;
    margin-left:3px;
    margin-top: 5px;
    background-color: #FFCC99;
    opacity: 0.8;
}

.button:hover
{
    background-color : #FF99FF;
}


#first_row,
#second_row,
#third_row,
#fourth_row,
#fifth_row
{
    margin-left: 20px;
}

#equal 
{
    background-color:#FFCC33 ;
}

#delete_all,#delete_one 
{
    background-color:#FFCC33 ;
}

#equal:hover 
{
    background-color:#FF99FF ;
}

#delete_all:hover,#delete_one:hover 
{
    background-color:#FF99FF ;
}

#plus,#substract,#multiply,#divide 
{
    background-color: #FF66CC ;
}

#plus:hover,#substract:hover,#multiply:hover,#divide:hover 
{
    background-color: #FF99FF ;
}

JS文件

//最蠢的eval实现方法但是搞定了0.1+0.2=0.30000000000004的问题
//看了网上的博客然后解决问题可以说的上是客观一个小进步


var display = ""; 
var check = 0;


window.onload = function() 
{
    document.getElementById("zero").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "0";
        document.getElementById("result").value = display;
    }

    document.getElementById("one").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "1";
        document.getElementById("result").value = display;
    }

    document.getElementById("two").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "2";
        document.getElementById("result").value = display;
    }

    document.getElementById("three").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "3";
        document.getElementById("result").value = display;
    }

    document.getElementById("four").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "4";
        document.getElementById("result").value = display;
    }

    document.getElementById("five").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "5";
        document.getElementById("result").value = display;
    }

    document.getElementById("six").onclick=function()
     {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "6";
        document.getElementById("result").value = display;
    }

    document.getElementById("seven").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "7";
        document.getElementById("result").value = display;
    }

    document.getElementById("eight").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "8";
        document.getElementById("result").value = display;
    }

    document.getElementById("nine").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "9";
        document.getElementById("result").value = display;
    }

    document.getElementById("plus").onclick=function() 
    {
        if (check == 1) 
        {
            check = 0;
        }
        if (display[display.length-1] == '+') return;
        display += "+";
        document.getElementById("result").value = display;
    }

    document.getElementById("substract").onclick=function() 
    {
        if (check == 1) 
        {
            check = 0;
        }
        if (display[display.length-1] == '-') return;
        display += "-";
        document.getElementById("result").value = display;
    }

    document.getElementById("multiply").onclick=function() 
    {
        if (check == 1) 
        {
            check = 0;
        }
        if (display[display.length-1] == '*') return;
        display += "*";
        document.getElementById("result").value = display;
    }

    document.getElementById("divide").onclick=function() 
    {
        if (check == 1) 
        {
            check = 0;
        }
        if (display[display.length-1] == '/') return;
        display += "/";
        document.getElementById("result").value = display;
    }

    document.getElementById("point").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += ".";
        document.getElementById("result").value = display;
    }

    document.getElementById("delete_one").onclick=function() 
    {
        if (check == 1)
        {
            return;
        }
        display = display.substring(0, display.length-1);
        document.getElementById("result").value = display;
    }

    document.getElementById("delete_all").onclick=function() 
    {
        display = "";
        document.getElementById("result").value = display;
    }

    document.getElementById("left_bracket").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += "(";
        document.getElementById("result").value = display;
    }

    document.getElementById("right_bracket").onclick=function() 
    {
        if (check == 1) 
        {
            display = "";
            document.getElementById("result").value = display;
            check = 0;
        }
        display += ")";
        document.getElementById("result").value = display;
    }

    document.getElementById("equal").onclick=function() 
    {

        try 
        {
            //这里处理0123 = 83 这个js认为数字前面有0就把原数字从八进制转化为十进制数字的bug
            while(display[0] == "0")
            {
                display = display.substr(1,(display.length-1)) ;
            }
            //这里处理 12 + 0123 这种表达式中出现0的bug
            for( var i = 0 ; i < display.length ; i ++ )
            {
                if( display[i] == "0" )
                {
                    if( display[i] == 0 && ( display[i-1] == "+" || display[i-1] == "-" || display[i-1] == "*" || display[i-1] == "/"))
                    {
                        display = display.replace("0","") ;
                    }
                }
            }
            display = eval(display);
        }

        catch(exception) 
        {
            alert("Enter Error!");
        }
        //这里处理浮点值如0.1+0.2 = 0.30000004的问题
        display = parseFloat( display ) ;
        display = parseFloat( display.toFixed(12) ) ;
        document.getElementById("result").value = display;
        check = 1 ;
    }

}

希望大家有什么意见可以多多在下面留言，一起进步。

旧事堪歌
关注
  • 3
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
制作一个简单的计算器
乐享代码中
02-06 661
# @coding :utf-8 # @Time : 2020/2/5 # @Author : WoWilliam210 # @File : calculator.py # @Software: PyCharm import win32com.client class ACalculator(object): def __check_num_zsq(func):...
制作一个简易的计算器
Rookie_one_bull的博客
04-29 1693
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表制作一个计算器 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑
用java实现一个简单的计算器
一个卑微的java开发
05-17 4331
用java实现一个简单的计算器预览确定需求创建接口代码实现 预览 先来看下最终实现的效果图，如下： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210514153633937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc4OTMzNA==,size_16,color_FFFFFF
HTML和JavaScript实现一个简单的计算器
最新发布
qq_57142520的博客
08-14 1682
使用HTML和JavaScript实现一个简单的计算器。
简易计算器设计
qq_46019173的博客
08-05 1万+
实 习 报 告 实习课程名称： 计算机硬件实习 实 习 题 目： 简易计算器设计 一、 实习任务书 单片机实习任务书 一、设计题目 简易计算器设计 二、设计背景 计算器是现代人发明的可以进行数字运算的电子机器。现代的电子计算器能进行数学运算的手持电子机器，拥有集成电路芯片，但结构比电脑简单得多，可以说是第一代的电子计算机（电脑），且功能也较弱，但较为方便与廉价，可广泛运用于商业交易中，是必备的办公用品之一。 三、设计内容及目标 设计内容： 1、 利用键盘及数码
制作简易计算器
m0_63647278的博客
06-18 103
【代码】制作简易计算器。
制作一个计算器
2201_75877506的博客
04-02 223
2.利用computed属性来进行计算，可以省去点击按钮才能计算出结果的步骤，并且computed 可以简化代码逻辑更加容易看懂。1.利用watch监听两个输入框和计算符号的改变，并在改变的时候进行计算。为了实现实时处理计算功能，需要加入computed和watch属性。
JavaScript简易计算器制作
10-15
JavaScript简易计算器制作是一个基础的前端开发实践项目，它涉及到HTML、CSS和JavaScript的结合使用，以实现简单的数学运算。在这个项目中，我们将学习如何利用JavaScript处理用户交互，并进行基本的算术运算。 ...
VB简易计算器制作
03-19
VB极简快速计算器制作，大学生作业实例，简单的VB程序计算器，应用了简单函数以及commandbutton还有label
Python简易计算器制作方法代码详解
09-18
Python简易计算器的制作涉及到基础的GUI编程，这里主要使用了Python的标准库Tkinter来构建图形用户界面。Tkinter是Python的默认GUI库，它提供了一系列的控件和方法，使得开发者能够快速创建交互式界面。 首先，我们...
基于MFC的简易计算器制作
12-17
总结，基于MFC的简易计算器制作涉及了MFC的基础概念、控件使用、消息映射、计算逻辑实现等多个方面，是学习MFC和Windows程序设计的良好实践项目。通过这个项目，开发者可以深入理解MFC的工作原理，提升Windows应用...
C++制作简易计算器
qq_31716541的博客
06-28 3166
C++制作简易计算器
Python基础教程——制作简单计算器（完整版，附源码）
热门推荐
2301_78217634的博客
07-18 2万+
程序运行后，将会弹出一个计算器窗口，用户可以通过该窗口进行数字和运算符的输入，计算结果将会显示在文本框中。这里我们使用了全局变量来存储用户输入的数字和运算符，以及计算结果。2. 数据类型：我们需要定义一些变量和数据类型来存储用户输入的数字和运算符，以及计算结果。在计算器中，我们需要定义一些变量和数据类型来存储用户输入的数字和运算符，以及计算结果。3. 运算逻辑：计算器需要根据用户输入的运算符来进行相应的数学运算，并输出计算结果。在计算器中，我们需要根据用户输入的运算符来进行相应的数学运算，并输出计算结果。
三种方法制作简易计算器
qq_72117148的博客
04-03 826
select下拉框放置符号，用v-model绑定输入框和计算符号。
制作网页版简易计算器（Calculator）
吟游诗人——吟唱生命的不朽
08-12 1万+
网页版计算器的制作比想象中要来的容易，界面上只需固定计算器面板的宽高和按钮的宽高即可。先放张图： 代码下载与演示：https://codepen.io/yinyoupoet/pen/oeewWw讲一下设计思路： 首先，将按键分成四种类型——数字与符号、等于、AC、CE。 Ans是保存上一次结果的，在这里点了没用。 如果点了数字，就显示在上面的input text框（以下称输出框）内，并追加
简单运算器的设计与仿真
鸽子的博客
08-06 5057
这一题我也不太懂，麻烦懂的人解释一下！ありがとう 1. 实验题目 简单运算器的设计与仿真 2. 实验内容 设计一个运算器模型，并进行仿真测试。 3. 实验要求 运算器的字长为 32 位，至少能够实现加法、减法、逻辑与、逻辑或四种运算，并产生N(结果为负)、Z(结果为零)、V(结果溢出)、C(进位)四个标志位。要求采用层次化的建模方法，即先...
如何制作一个简易的计算器
L_ZWge的博客
06-07 8655
今天，我们来学习如何完成一个简易计算器的功能吧！ 一.布局 我们可以在HTML中使用CSS完成计算器的布局。接下来，我们便先来看看我们所要实现的效吧！ 上图的计算器中，我们可以通过以下几个步骤完成对计算器的简单布局： 在输入的位置设置“input”标签得到三个输入框； 在运算符的位置设置一个“select”标签，其作用便是可通过点击更换选项。 在其中再添加四个“option”标签，并且“option”标签放入“+”，“-”，“*”，“/”四个运算符号 ； 然后，在后两个输入框之间设置一个“bu
用HTML实现简易版计算器
lkllkl123123的博客
08-13 1万+
计算器功能：实现了加减乘除、清零、回退、四则运算等等 HTML部分：用表格添加按键，用div块显示内容 CSS部分：将显示的内容定位到div块右下角 JavaScript部分：通过innerTHML属性添加 / 获取所需计算的内容，再调用eval方法将获取到的内容转换为js代码进行计算........................
编写一个简单的计算器程序
Aquarius_FE的博客
04-26 1万+
题目内容： 设计一个简单的计算器程序，根据输入的操作数和运算符可以完成 + 、—、* 、/ 、% 运算。输出结果必须是一个完整的算术运算式的格式。例如 ：输入3.1 5 + ，输出结果是 3.1+5=8.1。 注意：当输入的运算符是"/"且第二个操作数是0时，输出“除数不能为0” 当输入的运算符是"%"且操作数中含有小数(如6.5)时，输出“error!”。 输入格式: 按顺序依次输入两操作数和运算符。如3 5 / 输出格式： 输入样例1： 3.1 5 + 输出样...
winform简易计算器制作
07-28
要制作一个简易的 WinForm 计算器，您可以按照以下步骤进行操作： 1. 打开 Visual Studio，并创建一个新的 WinForm 项目。 2. 在窗体中添加一些按钮和一个文本框，用于显示计算结果。 3. 为每个按钮设置点击事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值