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

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

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript代码实现简单计算器

JavaScript代码实现简单计算器

2021-12-21 17:58小虫虫~ js教程

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

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

一、实现功能

(1)利用css样式、javascript语言和html语言实现计算器的算法 (2)对计算器的页面进行规划以及对界面进行颜色的填涂 (3)对界面各个边框边距进行适当的调整

二、展示

1.代码展示

代码如下:

?
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>计算器</title>
 
 <style>
 body{
 padding:0;margin:0;
 background-color:bisque;
 }
 #calculator{
 position:absolute;
 width:1200px;height:620px;
 left:50%;top:50%;
 margin-left:-600px;
 margin-top:-310px;
 }
 #calculator #c_title{
 margin:auto;
 width:800px;
 height:80px;
 margin-left: 150px;
 }
 #calculator #c_title h2{
 text-align:center;
 font-size:33px;font-family:微软雅黑;color:#666666;
 box-shadow: 1px 1px 1px 1px rgba(0, 0, 255, .2);
 }
 #calculator #c_text input{
 padding-right:20px;
 margin-left: 50px;
 width:970px;
 height:50px;
 font-size:25px;font-family:微软雅黑;color:#666666;
 text-align:right;
 border:double 1px;
 border:1px solid black;
 }
 #calculator #c_value{
 widows: 1080px;
 height:408px;
 margin:20px auto;
 }
 #calculator #c_value ul{
 margin:0px;
 }
 #calculator #c_value ul li{
 margin:10px;
 list-style:none;
 float:left;
 width:180px;
 height:80px;
 line-height:80px;
 text-align:center;
 background-color:coral;
 border:0px solid black;
 font-size:30px;
 font-family:微软雅黑;
 color:#666;
 box-shadow: 12px 12px 2px 1px rgba(0, 0, 255, .2);
 }
 #calculator #c_value ul li button{
 width: 160px;
 height:40px;
 font-size: 20px;
 }
 </style>
 
 <script>
 function onload(){
 //加载完毕后光标自动对应到输入框
 document.getelementbyid("input").focus();
 }
 //读取按钮的值,传给输入框
 function inputevent(e){
 //把val的值改为每个事件的innerhtml值 innerhtml 属性
 var val=e.innerhtml;
 //获取input标签
 var xsval=document.getelementbyid("input");
 //标签里的value连接每个事件的innerhtml值
 xsval.value+=val;
 }
 //计算出结果
 function inputoper(){
 var xsval=document.getelementbyid("input");//获取input标签
 xsval.value=eval(document.getelementbyid("input").value); //eval()方法计算
 }
 //清零
 function clearnum(){
 var xsval=document.getelementbyid("input");//获取input标签
 xsval.value="";
 document.getelementbyid("input").focus();
 }
 //退格
 function backnum(){
 var arr=document.getelementbyid("input");//获取input标签
 arr.value=arr.value.substring(0,arr.value.length-1); //substring()提取第一个至倒数第二个字符串
 }
 </script>
 
</head>
 
<body>
 <div id="calculator">
 <!--标题-->
 <div id="c_title">
 <h2>计算器</h2>
 </div>
 <!--输入框-->
 <div id="c_text">
 <input type="text" id="input" value="0" readonly="readonly"> <!-- input (id)-->
 </div>
 <!--计算器按钮元件-->
 <div id="c_value">
 <ul>
 <li><button onclick="inputevent(this)">7</button></li> <!--onlick 鼠标点击函数 this -->
 <li><button onclick="inputevent(this)">8</button></li>
 <li><button onclick="inputevent(this)">9</button></li>
 <li style="background: yellow"><button onclick="clearnum()">清零</button></li>
 <li style="background: burlywood"><button onclick="backnum()">退格</button></li>
 <li><button onclick="inputevent(this)">4</button></li>
 <li><button onclick="inputevent(this)">5</button></li>
 <li><button onclick="inputevent(this)">6</button></li>
 <li><button onclick="inputevent(this)">*</button></li>
 <li><button onclick="inputevent(this)">/</button></li>
 <li><button onclick="inputevent(this)">1</button></li>
 <li><button onclick="inputevent(this)">2</button></li>
 <li><button onclick="inputevent(this)">3</button></li>
 <li><button onclick="inputevent(this)">+</button></li>
 <li><button onclick="inputevent(this)">-</button></li>
 <li><button onclick="inputevent(this)">0</button></li>
 <li><button onclick="inputevent(this)">00</button></li>
 <li ><button onclick="inputevent(this)">.</button></li>
 <li><button onclick="inputevent(this)">%</button></li>
 <li style="background: red"><button onclick="inputoper(this)">=</button></li>
 </ul>
 </div>
 
 </div>
 
</body>
</html>

2.效果展示

效果如下:

JavaScript代码实现简单计算器

3.总结

由于第一次书写博客,页面过于丑陋,见谅。改demo学会了如何用js实现html计算器,熟悉了js的基础语法及基本使用。

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

原文链接:https://blog.csdn.net/weixin_45876462/article/details/111571723

延伸 · 阅读

精彩推荐
  • js教程JS 的 六种打断点的方式,你用过几种?

    JS 的 六种打断点的方式,你用过几种?

    Debugger 是前端开发很重要的一个工具,它可以在我们关心的代码处断住,通过单步运行来理清逻辑。而 Debugger 用的好坏与断点打得好坏有直接的关系。...

    神光的编程秘籍7772021-12-16
  • js教程js制作提示框插件

    js制作提示框插件

    这篇文章主要介绍了js制作提示框插件的方法,帮助大家更好的理解和使用js,感兴趣的朋友可以了解下...

    lanshanxiao10032021-12-18
  • js教程Javascript 模拟mvc实现点餐程序案例详解

    Javascript 模拟mvc实现点餐程序案例详解

    这篇文章主要介绍了Javascript 模拟mvc实现点餐程序案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参...

    LiOnTalKING12012021-12-18
  • js教程微信小程序实现modal弹出框遮罩层组件(可带文本框)

    微信小程序实现modal弹出框遮罩层组件(可带文本框)

    这篇文章主要给大家介绍了关于微信小程序实现modal弹出框遮罩层组件(可带文本框)的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者...

    BadmintonCode3432021-12-15
  • js教程JavaScript实现通讯录功能

    JavaScript实现通讯录功能

    这篇文章主要为大家详细介绍了JavaScript实现通讯录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    书写梦想的铅笔头5572021-12-20
  • js教程微信小程序自定义胶囊样式

    微信小程序自定义胶囊样式

    这篇文章主要为大家详细介绍了微信小程序自定义胶囊样式,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    四曦11272021-12-21
  • js教程JavaScript实现原型封装轮播图

    JavaScript实现原型封装轮播图

    这篇文章主要为大家详细介绍了JavaScript原型封装轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    zyhyoustrive11992021-12-21
  • js教程Javascript实现汉字和拼音互转的终极方案

    Javascript实现汉字和拼音互转的终极方案

    网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,有的不支持多音字、不支持声调或者字典文件太大,无法根据实际需要满足需求。这篇文章给...

    我是小茗同学10022021-12-15