服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - javascript模拟实现计算器

javascript模拟实现计算器

2022-02-23 15:57HelloWorld js教程

这篇文章主要为大家详细介绍了javascript模拟实现计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了javascript模拟实现计算器的具体代码,供大家参考,具体内容如下

功能:

1、实现单击按钮录入数字
2、实现基础四则运算功能,并添加必要的异常处理。
3、实现小数点功能并添加异常处理:小数点只能出现一次
4、实现正负号功能
5、实现退位功能,已经是最后一位时,显示框显示为0
6、AC清屏功能

使用的知识点:

1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程

综合练习的目的:

1、将css,html和js有效的进行技术组合,实现业务功能
2、锻炼和培养编程思想,解决问题的能力和方法
3、锻炼和培养利用多种编程思路,完成预先设定的目标

而且最近刚上手js,感觉特别有趣,学习java基础的时候没有那么大的兴趣。感觉刚一上手js感觉特别好玩有趣,在这里把一个简单的计算器源码展示出来:

html页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
 <title>js计算器</title>
<link rel="stylesheet" type="text/css"href="index.css" >
<script type="text/javascript" src="index.js">
</script>
</head>
<body onload="init()">
 <!-- 1个文本框10个数字....20个按钮 -->
<div id="div1">
 <form action="">
 <div id="div2">
 <input type="text" name="num" disabled="disabled" id="num" value="0">
 </div>
 </form>
 <div id="div3">
 <input type="button" name="" value="C" id="baidu">
 <input type="button" name="" value="←" id="">
 <input type="button" name="" value="+/-" id="">
 <input type="button" name="" value="/" id="">
 <input type="button" name="" value="7" id="">
 <input type="button" name="" value="8" id="">
 <input type="button" name="" value="9" id="">
 <input type="button" name="" value="*" id="">
 <input type="button" name="" value="4" id="">
 <input type="button" name="" value="5" id="">
 <input type="button" name="" value="6" id="">
 <input type="button" name="" value="-" id="">
 <input type="button" name="" value="1" id="" >
 <input type="button" name="" value="2" id="" >
 <input type="button" name="" value="3" id="" >
 <input type="button" name="" value="+" id="">
 <input type="button" name="" value="0" id="">
 <input type="button" name="" value="=" id="">
 <input type="button" name="" value="." id="">
 <input type="button" name="" value="AC" id="">
 </div>
</div>
</body>
</html>

js页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
function init(){
 var num=document.getElementById("num");
 num.value=0;
 var btn_num1;
 var fh;
 num.disabled="disabled";
 // var n1=document.getElementById("n1");
 // n1.οnclick=function(){
 // }
 var oButton=document.getElementsByTagName("input");
 for(var i=0;i<oButton.length;i++){
 oButton[i].onclick=function(){
 if(isnumber(this.value)){
 //num.value=(num.value+this.value)*1;//把默认0消除
 if(isNull(num.value)){
 num.value=this.value;
 }else{
 num.value=num.value+this.value;
 }
 }else{
 //测试功能是否正确
 // alert("bushishuzi")
 var btn_num=this.value;
 //测试功能是否正确(弹窗)
 // alert(btn_num);
 switch(btn_num){
 case "+":
 // alert(11);
 btn_num1=num.value*1;//=parseInt(num.value)这个也可以,后面的话需要改为number
 num.value=0;
 fh="+";
 break;
 case "-":
 btn_num1=num.value*1;
 num.value=0;
 fh="-";
 break;
 case "*":
 btn_num1=num.value*1;
 num.value=0;
 fh="*";
 break;
 case "/":
 btn_num1=num.value*1;
 num.value=0;
 fh="/";
 break;
 case ".":
 num.value=dec_number(num.value);
 break;
 case "←":
 num.value=back(num.value);
 break;
 case "+/-":
 num.value=sign(num.value);
 break;
 case "AC":
 num.value="0";
 break;
 case "C":
 init_baidu();
 break;
 case "=":
 switch(fh){
 case"+":
 num.value=btn_num1+num.value*1;
 break;
 case"-":
 num.value=btn_num1-num.value*1;
 break;
 case"*":
 num.value=btn_num1*num.value*1;
 break;
 case"/":
 if(num.value==0){
 num.value=0;
 alert("除数不能为0");
 }else{
 num.value=btn_num1/num.value*1;
 }
 break;
 }
 break;
 }
 }
 }
 }
}
//小数点的功能
function dec_number(n){
 if(n.indexOf(".")==-1){
 n=n+".";
 }
 return n;
}
//验证文本框是否为空或者为0
function isNull(n){
 if(n*1==0||n.length==0){
 return true;
 }else{
 return false;
 }
}
//退位键
function back(n){
 n=n.substr(0,n.length-1);
 if(isNull(n)){
 n="0";
 }
 return n;
}
//正负号+/-
function sign(n){
 if(n.indexOf("-")==-1){
 n="-"+n;
 }else{
 n=n.substr(1,n.length);
 }
 return n;
}
//isNaN:不能转换成数字:true,可以转换成数字是false
function isnumber(n){
 return !isNaN(n);
 }
 //C按钮使用一个超级链接,链接到百度,这个可以随便发挥
function init_baidu(){
 window.location.href="http://www.baidu.com";
}

css页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
*{
 margin:0px;
 padding:0px;
}
div{
 width:170px;
}
#div1{
 top:60px;
 left: 100px;
 position:absolute;
}
input[type="button"]{
 width:30px;
 margin-right: 5px;
}
input[type="text"]{
 width:147px;
 text-align: right;
 background-color:white;
 border:1px solid;
 padding-right:1px;
 box-sizing:content-box;
}
input[type="button"]:hover{/*//伪类和按钮的使用*/
 background-color:white;
 border:1px solid;
}

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

原文链接:https://blog.csdn.net/qq_37215985/article/details/115425902

延伸 · 阅读

精彩推荐
  • js教程前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装都有哪些呢?我们一起来看一下吧!...

    Find一只程序猿11422021-12-30
  • js教程JavaScript实现跟随鼠标移动的盒子

    JavaScript实现跟随鼠标移动的盒子

    这篇文章主要为大家详细介绍了JavaScript实现跟随鼠标移动的盒子,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    搬砖大法10872022-01-10
  • js教程NestJs使用Mongoose对MongoDB操作的方法

    NestJs使用Mongoose对MongoDB操作的方法

    这篇文章主要介绍了NestJs使用Mongoose对MongoDB操作的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友...

    ragga-time4062022-01-22
  • js教程详解三种Javascript图片预加载的方法

    详解三种Javascript图片预加载的方法

    预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。...

    锋享前端9562022-01-04
  • js教程javascript实现表格信息增添与删除

    javascript实现表格信息增添与删除

    这篇文章主要为大家详细介绍了javascript实现表格信息增添与删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    小徐世界第一可爱8632022-02-23
  • js教程JavaScript 判断浏览器是否是IE

    JavaScript 判断浏览器是否是IE

    这篇文章主要介绍了JavaScript 判断浏览器是否是IE,帮助大家更好的理解和学习前端知识,感兴趣的朋友可以了解下...

    Echoyya、11382022-01-21
  • js教程JS获取一个字符串中指定字符串第n次出现的位置

    JS获取一个字符串中指定字符串第n次出现的位置

    这篇文章主要介绍了JS获取一个字符串中指定字符串第n次出现的位置,文章内容实例讲解的很清晰,有需要的同学可以研究下...

    小king哥5142022-01-20
  • js教程js实现简单的倒计时

    js实现简单的倒计时

    这篇文章主要为大家详细介绍了js实现简单的倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    搬砖大法8272022-01-10