Javascript制作简易计算器并实现其功能

Meteor.792

已于 2023-01-11 14:20:57 修改

阅读量5.2k

点赞数 14

分类专栏： Web前端开发技术文章标签： javascript 前端 css html 计算器制作

于 2022-08-18 16:37:09 首次发布

本文链接：https://blog.csdn.net/qq_64314976/article/details/126408770

版权

Web前端开发技术专栏收录该内容

10 篇文章 4 订阅

订阅专栏

使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。并使用函数传参的方式完成计算器的功能。输入任意操作数，通过四则运算计算出结果，使用函数传参的方式完成计算器的功能。

CSS部分：

<style>
        body
        {padding: 0;margin: 0;
        background-color:bisque;}
        #calculator
        {position: absolute;
        border-style: solid;
        width: 570px;
        height: 600px;
        left: 70%;top: 50%;
        margin-left: -600px;
        margin-top: -310px;}
        #calculator #c_title h2
        {text-align: center;
        width: 570px;
        font-size: 30px;
        font-family: "微软雅黑";
        color: #666;
        line-height: 30px;}
        #calculator #c_text #text
        {margin-left: 50px;
        width: 462px;
        height: 50px;
        font-size: 25px;
        text-align: right;
        font-family: "微软雅黑";
        color: #666666;
        border: 1px white;
        border: double 1px;}
        #calculator #c_value ul li
        {margin: 10px;
        list-style: none;
        float:left;
        width: 100px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background-color:azure;
        border: 1px solid black;
        font-size: 30px;
        font-family: "微软雅黑";
        color: #666;}
        </style>

HTML部分：

<body>
     <div id="calculator">
            <div id="c_title"><h2>计算器</h2></div>
            <div id="c_text"><input type="text" id="text" /></div>
            <div id="c_value">
                <ul>
                    <li onclick="clearText()">C</li>
                    <li onclick="goBack()">←</li>
                    <li onclick="get('+')">+</li>
                    <li onclick="get('-')">-</li>
                    <li onclick="get('*')">×</li>
                    <li onclick="get('/')">÷</li>
                    <li onclick="get('.')">.</li>
                    <li onclick="get('%')">%</li>
                    <li onclick="get(6)">6</li>
                    <li onclick="get(7)">7</li>
                    <li onclick="get(8)">8</li>
                    <li onclick="get(9)">9</li>
                    <li onclick="get(2)">2</li>
                    <li onclick="get(3)">3</li>
                    <li onclick="get(4)">4</li>
                    <li onclick="get(5)">5</li>
                    <li onclick="get(0)">0</li>
                    <li onclick="get(1)">1</li>
                    <li onclick="get( )"> </li>
                    <li onclick="eq()">=</li>
                </ul></div></div>
</body>

Javascript部分：

<script>
    var IsClear = false;
    function get(key){
        var str = document.getElementById("text").value;
        if(str.length < 20){
        str = (str == "0" ? "" : str);
        if(str == "" && key == '00'){str = "0";}
        else{str += key;}}
        document.getElementById("text").value = str;}
    function goBack(){
        var str = document.getElementById("text").value;
        str = str.substring(0,str.length-1);
        if(str=="") str="0";
        document.getElementById("text").value = str;}
    function clearText(){
        document.getElementById("text").value = "0";}
    function eq(){IsClear = true;
        var str = document.getElementById("text").value;
        var result = eval(str)
        document.getElementById("text").value = result;}
</script>

效果图：

JavaScript介绍：

JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript的标准是ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为ECMAScript 6 或者ES2015。

JavaScript脚本语言具有以下特点:

（1）脚本语言。JavaScript是一种解释型的脚本语言，C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

（2）基于对象。JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

（3）简单。JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

（4）动态性。JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时，鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

（5）跨平台性。JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，JavaScript已被大多数的浏览器所支持。不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以在早期程序员比较倾向于使用JavaScript以减少对服务器的负担，而与此同时也带来另一个问题，安全性。

Meteor.792

关注

14
点赞
踩
97

收藏

觉得还不错? 一键收藏
打赏
1
评论
Javascript制作简易计算器并实现其功能

使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。并使用函数传参的方式完成计算器的功能。输入任意操作数，通过四则运算计算出结果，使用函数传参的方式完成计算器的功能。......
复制链接

扫一扫