简单计算器——JavaScript小实例

最新推荐文章于 2024-04-04 00:13:16 发布
最新推荐文章于 2024-04-04 00:13:16 发布
阅读量3.2k 收藏 36
点赞数 11
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62858590/article/details/123443477
版权

简单计算器——JavaScript小实例

先来看一下下我们要做的计算器（以iQOO neo5手机计算器为例）：

这就是我们今天要做的计算器的模板，成品的样子会略有不同，但功能完善。

好，当我们看到这个计算器时，我们首先要想到它有几个功能，首先是，基础的加减乘除功能，正负号切换功能，AC(清除)功能，百分号功能，删除(Del)功能

1.基本的HTML与CSS代码

​ 首先，我们要写一个HTML页面，这包括一个屏幕(screen)，5行按钮(实现我们刚才所说的功能)，像这样，

HTML代码如下：

<div class="box">
    <!-- 屏幕 -->
    <input type="button" value="" id="screen" class="screen">
    <!-- 按钮 -->
    <div>
        <input type="button" value="AC" class="count" οnclick="clear_screen()">
        <input type="button" value="Del" class="count" οnclick="Delete()">
        <input type="button" value="+/-" class="count" οnclick="punctuation()">
        <input type="button" value="/" class="count" οnclick="add_string(this.value)">
    </div>
    <div>
        <input type="button" value="7" class="count" οnclick="add_string(this.value)">
        <input type="button" value="8" class="count" οnclick="add_string(this.value)">
        <input type="button" value="9" class="count" οnclick="add_string(this.value)">
        <input type="button" value="*" class="count" οnclick="add_string(this.value)">
     </div>
     <div>
        <input type="button" value="4" class="count" οnclick="add_string(this.value)">
        <input type="button" value="5" class="count" οnclick="add_string(this.value)">
        <input type="button" value="6" class="count" οnclick="add_string(this.value)">
        <input type="button" value="-" class="count" οnclick="add_string(this.value)">
     </div>
     <div>
        <input type="button" value="1" class="count" οnclick="add_string(this.value)">
        <input type="button" value="2" class="count" οnclick="add_string(this.value)">
        <input type="button" value="3" class="count" οnclick="add_string(this.value)">
        <input type="button" value="+" class="count" οnclick="add_string(this.value)">
     </div>
     <div>
        <input type="button" value="%" class="count" οnclick="add_string('*0.01')">
        <input type="button" value="0" class="count" οnclick="add_string(this.value)">
        <input type="button" value="." class="count" οnclick="add_string(this.value)">
        <input type="button" value="=" class="count" οnclick="answer()">
     </div>
</div>

简单的解释一下，在HTML中，每个按钮都有其对应的value，点击数字或符号按钮，我们会将相应的数字或符号(input中的value)以字符的形式相加，并将相加的值(字符串)赋值给id为screen的input标签的value属性，这样，就可以在屏幕中显示出来，点击等于号后，使用同样的方法，计算结果就能在屏幕中显示出来

CSS 代码如下：

*{
    margin: 0;
    text-decoration: none;
    padding: 0;
    list-style: none;
    border: none;
}
.box1{
    width: 100%;
}
.box{
    width: 300px;
    margin: 0 auto;
}
.count{
    width:70px;
    height: 70px;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    background-color: white;
    transition: 0.8s all;
}
.count:hover{
    background-color: rgb(144, 144, 233);
}
.screen{
    height: 70px;
    width: 280px;
    border: transparent;
    text-align: right;
    font-size: 35px;
}

2.计算器功能的实现

  • 加减乘除功能：

    ​ 这里要介绍一个函数，叫作eval(string)，eval()函数会计算括号内的字符串，返回计算的结果，比如说eval(1+1)，返回值为2，下面涉及到加减乘除的功能都会使用这个方法。

    ​ 通过按钮传输进来的参数会相加，成为一个字符串，进而用eval()函数实现加减乘除

    ​ 例如：按下2，，5，则会使用将25变为一个字符串，并使用eval()函数进行计算，得出结果

    //将screen变量与屏幕绑定
var screen = document.getElementById("screen");
//将输入的字符相加为字符串
function add_string(a) {
    screen.value += a;
}
//等于号功能(加减乘除功能)
function answer() {
    //eval方法可以计算字符串表达式
    var a;
    try {
        a = screen.value = eval(screen.value);
    }
    catch (err) {
        if (a == undefined) {
            screen.value = "错误";
        }
    }
}

  • AC全部清除功能

    ​ 想要清空屏幕，根据上面对HTML的介绍，我们只需要将id为screen的input标签的value值清除即可，这样屏幕便可清空

    //将screen变量与屏幕绑定
var screen = document.getElementById("screen");
//AC全部清除功能
function clear_screen() {
    screen.value = "";
}

  • 删除功能

    ​ 接下来，又要给大家介绍一种新的函数，split()函数，将字符串分割，并返回一个字符数组，具体的使用方法是string.split(separator,limit)，string为字符串变量，separator为分割字符串的字符，limit为返回字符数组的最大length(长度)，也就是limit写多少，数组就会有几个元素，接下来给大家演示一下

    //定义一个数组
var a="without you";
//将数组按o分割
var arr=a.spilt('o');

    ​ 则，此时arr是一个字符数组，输出后的结果为

    ​ with,out ,y,u

    ​ 这时有人就要问了，如果我不写spilt内的值，像这样：

    var arr=a.spilt('');

    ​ 会怎样呢

    ​ 好问题，这样我们就可以获得以单个字符为基准的字符数组(空格也是字符哦)，如下：
    ​ w,i,t,h,o,u,t, ,y,o,u

    ​ 好，我们的删除功能就是靠这个函数来实现的，我们先用上面的方法将字符串分开，然后，再去掉最后一个字符，就完成了删除的功能

    ​ 我的想法是通过遍历(for循环)，将每一个字符相加，但是不加最后一个字符，这样，就去掉了最后一个字符，相加后说的字符串便是删除后的字符串

    ​ 代码如下：

    //将screen变量与屏幕绑定
var screen = document.getElementById("screen");
//删除功能
function Delete() {
    //将显示器中的字符串分隔为一个一个的字符数组
    var str = screen.value;
    var arr = str.split("");

    //将字符串str定义为空，不然，默认的定义为undefined
    var str1 = '';

    //删去最后一个字符，将字符重新连接成字符串
    for (var i = 0; i < arr.length - 1; i++) {
        str1 += arr[i];
    }

    //重新为显示器赋值
    screen.value = str1;
}

  • 百分号功能：

    ​ 这里的百分号是不能用eval()来计算的，功能主要使用0.01来替换，当输入%时，在屏幕上，会显示输入*0.01

    ​ 这里说一下，并不是博主想要偷懒，而是，如果，我们想要实现百分号的功能的话，会涉及很多种情况，包括在字符串末尾，字符串中间，以及百分号的查找，识别，值的替换等等，十分繁琐，具体可以参考下面的正负号切换功能

    ​ 当然，大家也可以参照下面的正负号切换来写这个百分号的功能

    ​ 期待与大佬进行讨论

  • 正负号切换功能：

    ​ 这个功能的解释篇幅有点多，如果大家不想看的话，可以跳过，直接看代码

    ​ 好，首先来看一个思维导图：

    split方法
    for遍历
    右括号
    加减乘除符号
    无
    字符串
    字符数组
    找到最后一个不为数字的字符
    有括号负数变正数
    正数变负数以及无括号负数变正数
    单一个数字的正数变负数
    去括号和负号
    加括号和负号
    加括号和负号
    负数变正数
    正数变负数
    正负号切换功能

    ​ 这里 ，要再次为大家介绍一个函数，join()，这个函数可以将分开的字符数组连接，返回一个字符串值，使用方法如下：

    ​ array.join(separator)

    ​ array为数组，separator为一个可选参数，表示指定的分隔符，比如：

    var friends=["Ja","va","Sc","ri","pt"];
var arr=friends.join('');

    ​ 输出arr，则输出结果为

    ​ JavaScript

    ​ 如果不设置分隔符，则默认分隔符为逗号

    var friends=["Ja","va","Sc","ri","pt"];
var arr=friends.join();

    ​ 则输出结果为

    ​ Ja,va,Sc,ri,pt

    接下来，正式开始介绍正负号切换：

    ​ 1.将字符分隔开，并找到最后一个不为数字的字符(且不为小数点)，使用for循环，使i的初值为字符数组的长度(最后一个字符的下标)，然后循环，直到找到最后一个不为数字的字符并将其下标存起来为止

    ​ 这样，就可以将正负号切换的几种情况分开

    ​ 此步的代码如下：

    var str = screen.value;     //屏幕的值
var arr = str.split("");    //将屏幕值分为字符
var a;  //装载最后一个不为数字的字符
var m;  //传递右括号位置
//找出最后一个不为数字的字符(且不为小数点)
for (var i = arr.length - 1; i >= 0; i--) {
	//字符与数字比较返回布尔值为false
    if (!(arr[i] < 10) && arr[i] != '.') {
        //将a赋值为最后一个字符，并以此分割
        a = arr[i];
        m = i;
        break;
    }
}

    ​ 2.第一步结束后，最后一个不为数字的字符分为三种情况：undefined(无，单一个数字，正数变负数)，右括号(负数变正数)，加减乘除符号（正数变负数，无括号负数变正数），所以我们下面分三种情况来讨论

    ​ 3.1 undefined(无，单一个数字，正数变负数)

    ​ 这里举一个例子，例如66这个数，无符号，单一个数字，我们首先将它乘以-1，再将其变为一个字符型常量，操作为

    var str=666;
str*=(-1);
str+='a';

    ​ 这样上面的str的值就变为了666a，成为了一个字符型常量

    ​ 这时，为了计算方便同时不出错，就要加括号了，首先，将str分割为字符数组

    var arr1 = str1.split("");

    ​ 将数组中的字符统一向后移一位，留下左括号的位置，然后再将最后一个数组元素，也就是a替换为右括号，最后使用join函数连接，这样就大功告成了，示意图

    图示

    ​ 此功能全部代码如下：

    var str = screen.value;     //屏幕的值
var arr = str.split("");    //将屏幕值分为字符
var a;  //装载最后一个不为数字的字符
var m;  //传递右括号位置
var n;  //传递左括号位置
//找出最后一个不为数字的字符(且不为小数点)
for (var i = arr.length - 1; i >= 0; i--) {
	//字符与数字比较返回布尔值为false
    if (!(arr[i] < 10) && arr[i] != '.') {
    	//将a赋值为最后一个字符，并以此分割
        a = arr[i];
        m = i;
        break;
    }
}
//正数变负数
//最后一个不为数字字符不存在
if (a == undefined) {
	//分割字符串为字符数组，并用arr1变量来装
    var str1 = str;
    str1 *= (-1);
    if (str1 < 0) {
    	//将数字变为字符，不然无法分割
        str1 += 'a';
        var arr1 = str1.split("");
        //将所有字符向后移一位
        for (var i = arr1.length - 1; i >= 0; i--) {
        	arr1[i + 1] = arr1[i];
        }
        //加上括号
        arr1[0] = '(';
        arr1[arr1.length - 1] = ')';
        str1 = "";
        for (var i = 0; i < arr1.length; i++) {
        	str1 += arr1[i];
        }
	}
    screen.value = str1;
}

    ​ 3.2 加减乘除符号（正数变负数，无括号负数变正数）

    ​ 找出最后一个不为数字的符号为加减乘除符号后，并以此分割，这里以1+2-3为例，它的最后一个字符为减号，那么，我们就用减号作为split的分隔符

    var str='1+2-3';
var str1=str.split('-');

    ​ 这样，则会得到一个数组，按照正负号切换的功能，我们要将计算字符串中最后一个数字切换正负号，比如，1+2-3切换正负号的结果为1+2-(-3)，所以，我们只需要分割后的字符数组的最后一个元素，这里，也就是3

    ​ 然后，将3转换为(-3)

    ​ 将3转换为(-3)的方法和**3.1undefined(无，单一个数字，正数变负数)**的方法是一样的

    ​ 之后，用split使用过的分隔符连接1+2和(-3)

    var str[1]='1+2';
var str[2]='(-3)';
var str1=str.join('-');

    ​ 结果为1+2-(-3);

    ​ 此功能全部代码如下：

    var str = screen.value;     //屏幕的值
var arr = str.split("");    //将屏幕值分为字符
var a;  //装载最后一个不为数字的字符
var m;  //传递右括号位置
var n;  //传递左括号位置
//找出最后一个不为数字的字符(且不为小数点)
for (var i = arr.length - 1; i >= 0; i--) {
	//字符与数字比较返回布尔值为false
    if (!(arr[i] < 10) && arr[i] != '.') {
    	//将a赋值为最后一个字符，并以此分割
        a = arr[i];
        m = i;
        break;
    }
}
//最后一个不为数字字符存在且不为右括号
else {
	//分割字符串为字符数组，并用arr1变量来装
    var arr1 = str.split(a);
    //将arr2赋值为字符数组最后一个字符
    var arr2 = arr1[arr1.length - 1];
    //正负号切换
    arr2 *= (-1);
    //如果切换后为负值，将最后一个字符串分为一个一个的字符，插入括号
    if (arr2 < 0) {
    	arr2 += 'a';
        var arr3 = arr2.split("");
        for (var i = arr3.length - 1; i >= 0; i--) {
        	arr3[i + 1] = arr3[i];
        }
        arr3[0] = '(';
        arr3[arr3.length - 1] = ')';
        arr2 = "";
        for (var i = 0; i < arr3.length; i++) {
        	arr2 += arr3[i];
        }
    }
    //将最后一个值替换为正负号切换后的值
    arr1[arr1.length - 1] = arr2;
    //将分开的字符串连接
    str = arr1.join(a);
    screen.value = str;
}

    ​ 3.3 右括号(负数变正数)

    ​ 举个例子，比如(-3)，将它变正数，需要将括号和负号去掉

    ​ 先将其分解为字符数组arr

    ​ 先找到右括号的数组元素，将其赋值为空，在找到左括号的数组元素，设其下标为index，则3的下标则为index+2，使用for循环使arr[index]=arr[index+2]，这样之后，就只存在数字，负号与括号就都被去掉了，图示如下

在这里插入图片描述

到此，简单计算机的JavaScript块就结束了，全部JavaScript代码如下：

//将screen变量与屏幕绑定
var screen = document.getElementById("screen");
//将输入的字符相加为字符串
function add_string(a) {
    screen.value += a;
}
//等于号功能(加减乘除功能)
function answer() {
    var a;
    try {
        a = screen.value = eval(screen.value);
    }
    catch (err) {
        if (a == undefined) {
            screen.value = "错误";
        }
    }
}
//清屏功能
function clear_screen() {
    screen.value = "";
}
//删除功能
function Delete() {
    //将显示器中的字符串分隔为一个一个的字符数组
    var str = screen.value;
    var arr = str.split("");

    //将字符串str定义为空，不然，默认的定义为undefined
    var str1 = '';

    //删去最后一个字符，将字符重新连接成字符串
    for (var i = 0; i < arr.length - 1; i++) {
        str1 += arr[i];
    }

    //重新为显示器赋值
    screen.value = str1;
}



//切换正负号功能
function punctuation() {
    var str = screen.value;     //屏幕的值
    var arr = str.split("");    //将屏幕值分为字符
    var a;  //装载最后一个不为数字的字符
    var m;  //传递右括号位置
    var n;  //传递左括号位置
    //找出最后一个不为数字的字符(且不为小数点)
    for (var i = arr.length - 1; i >= 0; i--) {
        //字符与数字比较返回布尔值为false
        if (!(arr[i] < 10) && arr[i] != '.') {
            //将a赋值为最后一个字符，并以此分割
            a = arr[i];
            m = i;
            break;
        }
    }
    //正数变负数
    //最后一个不为数字字符不存在
    if (a == undefined) {
        //分割字符串为字符数组，并用arr1变量来装
        var str1 = str;

        str1 *= (-1);
        if (str1 < 0) {
            //将数字变为字符，不然无法分割
            str1 += 'a';
            var arr1 = str1.split("");
            //将所有字符向后移一位
            for (var i = arr1.length - 1; i >= 0; i--) {
                arr1[i + 1] = arr1[i];
            }
            //加上括号
            arr1[0] = '(';
            arr1[arr1.length - 1] = ')';
            str1 = "";
            for (var i = 0; i < arr1.length; i++) {
                str1 += arr1[i];
            }
        }
        screen.value = str1;
    }
    //有括号负数变正数
    //最后一个不为括号字符为右括号
    else if (a == ')') {
        //将装有右括号赋值为空
        arr[m] = '';
        var i;
        //找到左括号位置
        for (i = 0; i < arr.length; i++) {
            if (arr[i] == '(') {
                break;
            }
        }
        //将左括号赋值为数字
        for (n = i; n < arr.length; n++) {
            //左括号与数字字符相差两个字符
            arr[n] = arr[n + 2];
        }
        //将字符再次连接
        var arr1 = arr.join('');
        screen.value = arr1;
    }
    //最后一个不为数字字符存在且不为右括号
    else {
        //分割字符串为字符数组，并用arr1变量来装
        var arr1 = str.split(a);
        //将arr2赋值为字符数组最后一个字符
        var arr2 = arr1[arr1.length - 1];
        //正负号切换
        arr2 *= (-1);
        //如果切换后为负值，将最后一个字符串分为一个一个的字符，插入括号
        if (arr2 < 0) {
            arr2 += 'a';
            var arr3 = arr2.split("");
            for (var i = arr3.length - 1; i >= 0; i--) {
                arr3[i + 1] = arr3[i];
            }
            arr3[0] = '(';
            arr3[arr3.length - 1] = ')';
            arr2 = "";
            for (var i = 0; i < arr3.length; i++) {
                arr2 += arr3[i];
            }
        }
        //将最后一个值替换为正负号切换后的值
        arr1[arr1.length - 1] = arr2;
        //将分开的字符串连接
        str = arr1.join(a);
        screen.value = str;
    }
}

好像这个简单计算器也没那么简单，思路简单，但是写起来麻烦，哈哈哈

最后，感谢大家的阅读，谢谢，如果觉得有用可以点个赞哦

如果，有什么错误，可以在评论区指出，期待与你们的讨论！

命中不缺狗——
关注
  • 11
    点赞
  • 踩
  • 36
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
微信小程序 简易计算器实现代码实例
10-16
主要介绍了微信小程序 简易计算器实现代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
用js编写的简单的计算器代码程序
10-23
主要介绍了用js编写的简单的计算器代码程序，非常具有实用性,感兴趣的小伙伴可以参考下
JavaScript制作简易版计算器——求任意两个数的和差积商取余
最新发布
ghfgjfg679的博客
04-04 316
1·2 JavaScript的输入输出语句alert（msg）：浏览器弹出警示框console.log(msg)：浏览器控制台打印输出信息prompt（info）：浏览器弹出输入框，用户可以输入1·3 变量。
微信小程序项目实例——体质计算器
05-27
微信小程序项目实例——体质计算器 体质计算器是一款简单的健康类小程序 用户可以根据自身的身高和体重 选择所测标准（中国、亚洲、国际） 生成自身BMI值和当前身体状况 并给出标准体重和相关疾病的预测
加减计算器————————
07-30
啊
简单计算器——C语言版.doc
07-03
简单计算器——C语言版
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
用javascript做一个计算器,用js做一个计算器代码
阿发狗伪原创
10-18 3265
大家好，给大家分享一下怎么用javascript做一个简单的计算器，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！  由于在之前的博客中有对html和css进行详细的讲解，再次就不多叙述，直接上代码。因为js中用到了JQuery选择器所以在html中使用标签引入了JQuery，在html中为每个按钮单击绑定计算器事件cal()并传入当前点击对象thispython for语句用法。   .html文件：   .css文件：   静态页面如图示： 1.功能：实现简单的数值的加减乘
JS：做个计算器
weixin_50517811的博客
06-26 1211
JS实现计算器功能
JS原生——编写简易计算器
m0_64954687的博客
12-06 8987
计算器
js实现计算器
qq_64037242的博客
06-22 676
【代码】html5+css3+js实现计算器。
基于51单片机的简易计算器——带密码锁.c
12-14
这是我在学习过程中做的一个基于51单片机的简易计算器，主要是实现简单的加减乘除，但是不能连乘，连除或者连加，连减。另外还做了一个简单的密码锁。
如何使用 JavaScript 创建百分比计算器
我的博客，不一样的自我表达
05-24 155
每个计算器都有几乎相同的 HTML 标记，JavaScript 的唯一区别是用于计算解决方案的数学。示例 – 50 到 75 = 50% || (75 / 50) / 50 * 100 = 50%示例 – 250 的 50% = 125 || (50 / 100) * 250 = 125。示例 – 50 是 250 的 20% || (50 / 250) * 100 = 20%#3 – X 和 Y 之间的增减百分比是多少？#1 – X 占 Y 的百分比是多少？#2 – Y 的 X% 是多少？
js制作一个简易计算器,使用js制作简易计算器
chatgpt001的博客
10-28 936
大家好，给大家分享一下js制作简易计算器代码怎么写，很多人还不知道这一点。下面详细解释一下。现在让我们来看看！
【JavaScript项目】如何用JavaScript实现 计算器？（附完整源码）
tutu6663的博客
12-01 2388
实现了如上图所示的一般计算器的功能包括（1）加、减、乘、除、取余这样的基本运算（好像计算器“%”这个符号不是取余，是百分号的意思，但在这里是取余的意思）（2）还有功能按键按键：退格，清空，按键“+/-”是给当前数字取相反数的意思（3）最上面的长格子用来显示输入的算式，点击“=”号后会变成计算后结果（4）有一定交互响应，比如鼠标放在按键上，按键颜色会变深。
用js 去除数字后面的百分号
南北极之间
10-18 6547
parseInt(“100%”) parseFloat(“21.5%”)
js实现简单计算机
qq_69555866的博客
06-13 1205
js实现简单计算机
javascript简易计算器代码,用js做一个计算器代码
chatgpt001的博客
11-14 1421
大家好，小编来为大家解答以下问题，利用javascript制作简单的计算器，javascript简易计算器代码，今天让我们一起来看看吧！
javascript制作简易计算器,javascript简易计算器代码
chatgpt001的博客
11-09 2131
计算器*{margin: 0;padding: 0;body{.box{.box h2{.box a{.box .sp{789X456-1
全局函数——用JavaScript实现一个简易计算器
09-19
下面是一个使用JavaScript实现简易计算器的全局函数的示例代码： ``` function calculator() { var num01 = parseFloat(document.getElementById('input01').value); var num02 = parseFloat(document....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

命中不缺狗——

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

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

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

打赏作者

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

抵扣说明：

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

余额充值