简单计算器——JavaScript小实例
先来看一下下我们要做的计算器(以iQOO neo5手机计算器为例):
![](https://img-blog.csdnimg.cn/23ec6ef26ad04316ad483529234b8876.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZG95Lit5LiN57y654uX4oCU4oCU,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center==300x200)
这就是我们今天要做的计算器的模板,成品的样子会略有不同,但功能完善。
好,当我们看到这个计算器时,我们首先要想到它有几个功能,首先是,基础的加减乘除功能,正负号切换功能,AC(清除)功能,百分号功能,删除(Del)功能
1.基本的HTML与CSS代码
首先,我们要写一个HTML页面,这包括一个屏幕(screen),5行按钮(实现我们刚才所说的功能),像这样,
![](https://i-blog.csdnimg.cn/blog_migrate/905ed53c8f79530b2ebf278293bbf66b.png#pic_center)
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
这里说一下,并不是博主想要偷懒,而是,如果,我们想要实现百分号的功能的话,会涉及很多种情况,包括在字符串末尾,字符串中间,以及百分号的查找,识别,值的替换等等,十分繁琐,具体可以参考下面的正负号切换功能
当然,大家也可以参照下面的正负号切换来写这个百分号的功能
期待与大佬进行讨论
-
正负号切换功能:
这个功能的解释篇幅有点多,如果大家不想看的话,可以跳过,直接看代码
好,首先来看一个思维导图:
这里 ,要再次为大家介绍一个函数,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;
}
}
好像这个简单计算器也没那么简单,思路简单,但是写起来麻烦,哈哈哈
最后,感谢大家的阅读,谢谢,如果觉得有用可以点个赞哦
如果,有什么错误,可以在评论区指出,期待与你们的讨论!