JavaScript制作简单计算器功能

更新时间：2022年07月29日 10:35:12 作者：今天我学习

这篇文章主要为大家详细介绍了JavaScript制作简单计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript制作简单计算器的具体代码，供大家参考，具体内容如下

1. 任务要求

1）掌握数据的类型转换

2）学会获取文本框控件的数据以及给相应控件赋值

3）掌握有参函数的定义

4）学会使用数值判断函数

5）学会使用eval()方法编译字符串算式

2. 需求说明

完成如下图所示的计算器，在页面单击数字和运算符能实现相应运算，单击AC可以实现清除屏幕内容。

3. 实现思路

1）在TNumber函数里实现对输入的数据进行累加，以便后面计算结果。

2）同时可以定义一个sum，将点击的每个按钮值进行累加，以便最后可以输出式子。

3）在Clear函数里实现点击“AC”按钮对txt进行清空，以及将sum=“”设为空。

4）在计算结果Calculator函数里使用eval()函数计算最终结果。

4.实现思路（JS部分的代码）

<script type="text/javascript">
    var sum="";
    function TNumber(value){
        document.getElementById("txt").value+=value;
        sum+=value;
    }
    function Clear(){
        document.getElementById("txt").value="";
        sum="";
        sum1="";
    }
    function Calculator(){
        document.getElementById("txt").value=sum+"="+eval(sum);
    }
</script>

5. 运行结果

6. 全部代码（其中的图片需要注意一下）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算器</title>
    <style type="text/css">
        #calculator
        {
            margin: 0 auto;
            border: #000  2px solid;
            border-radius: 15px 15px 15px 15px;
            width: 300px;
            height: 460px;
            background-image: url(img/background5.jpg);//url图片需要自己设定
        }
        #hiddentxt
        {
            height: 100px;
        }
        #txt
        {
            width: 88%;
            height: 80px;
            border-radius: 12px 12px 12px 12px;
            font-size: 24px;
            font-weight: bold;
            background: #F4F4F4;
            color: #080808;
            border: black 5px solid;
            margin-top: 15px;
            margin-left:12px;
            font-family: "Comic Sans MS", "Leelawadee UI";
        }
        input[type=button]
        {
            width: 56px;
            height: 56px;
            margin-top: 10px;
            margin-left: 13px;
            border-radius: 10px;
            font-size: 20px;
            font-weight: bold;
            background: #fff;
            font-family:"Comic Sans MS";
        }
        #Zero,#AC
        {
            width: 129px;
        }
        input[type=button]:hover
        {
            color: #fff;
            background: #000;
            animation-name:mybutton;
            animation-duration: 0.8s;
               animation-timing-function:ease-in-out;
        }
        @keyframes mybutton
        {
            0%
            {
                background: #fff;
                color: #000;
            }
    
            100%
            {
                background:#000;
                color: #fff;
            }
        }
    </style>
</head>
 
<body>
    <div id="calculator">
        
    <input type="text" id="txt"  readonly><br>
    <input type="button" id="AC" value="AC" onClick="Clear()">
    <input type="button"  onClick="TNumber(this.value)" value="/">
    <input type="button"  onClick="TNumber(this.value)" value="%">
    <br>
        
    <input type="button" id="Seven" onClick="TNumber(this.value)" value="7">
    <input type="button" id="Eight" onClick="TNumber(this.value)" value="8">
    <input type="button" id="Nine" onClick="TNumber(this.value)" value="9">
    <input type="button"  onClick="TNumber(this.value)" value="+">
    <br>
        
    <input type="button" id="Four"  onClick="TNumber(this.value)" value="4">
    <input type="button" id="Five" onClick="TNumber(this.value)" value="5">
    <input type="button" id="Six" onClick="TNumber(this.value)" value="6">
    <input type="button"  onClick="TNumber(this.value)" value="-">
    <br>
        
    <input type="button" id="One"  onClick="TNumber(this.value)" value="1" >
    <input type="button" id="Two"  onClick="TNumber(this.value)" value="2"  >
    <input type="button" id="Three" onClick="TNumber(this.value)" value="3">
    <input type="button"  onClick="TNumber(this.value)" value="*">
    <br>
 
    <input type="button" id="Zero" onClick="TNumber(this.value)" value="0">
    <input type="button" id="Dot" onClick="TNumber(this.value)" value=".">
    <input type="button"  onClick="Calculator()" value="=">
        
    </div>
    
    <script type="text/javascript">
        var sum="";
        function TNumber(value){
            document.getElementById("txt").value+=value;
            sum+=value;
        }
        function Clear(){
            document.getElementById("txt").value="";
            sum="";
            sum1="";
        }
        function Calculator(){
            document.getElementById("txt").value=sum+"="+eval(sum);
        }
    </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js
计算器

JS 图片压缩原理与实现方法详解
这篇文章主要介绍了JS 图片压缩原理与实现方法,结合实例形式详细分析了JS 图片压缩原理、实现方法与操作注意事项,需要的朋友可以参考下
2020-04-04
微信小程序连续签到7天积分获得功能的示例代码
今天通过一个案例给大家分享微信小程序连续签到7天积分获得功能，通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考价值，感兴趣的朋友一起学习吧
2020-08-08
JS实现点星星消除小游戏
这篇文章主要为大家详细介绍了JS实现点星星消除小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-03-03
JavaScript面试Module Federation实现原理详解
这篇文章主要为大家介绍了JavaScript面试Module Federation实现原理详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-10-10
学习JavaScript设计模式(封装)
这篇文章主要带领大家学习JavaScript设计模式，其中重点介绍封装，举例说明封装的思想，对封装进行详细剖析，感兴趣的小伙伴们可以参考一下
2015-11-11
canvas操作插件fabric.js使用方法详解
这篇文章主要为大家详细介绍了canvas操作插件fabric.js的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
JavaScript深入理解节流与防抖
防抖和节流严格算起来应该属于性能优化的知识,但实际上遇到的频率相当高,处理不当或者放任不管就容易引起浏览器卡死,下面这篇文章主要给大家介绍了关于JavaScript防抖与节流的实现与注意事项,需要的朋友可以参考下
2022-04-04
Three.js+React实现3D文字悬浮效果
这篇文章主要介绍了如何利用Three.js+React制作出神奇的3D文字悬浮效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手尝试一下
2022-03-03
用js实现手把手教你月入万刀(转贴)
用js实现手把手教你月入万刀(转贴)...
2007-11-11
微信小程序swiper左右扩展各显示一半代码实例
这篇文章主要介绍了微信小程序swiper左右扩展各显示一半代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-12-12