用原生JS怎么样写一个计算器
导读：相信很多人对“用原生JS怎么样写一个计算器”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助 本文实例为大家分享了js实现简单计算器功能的具体代码，供大家参考，具体内容如下 使用html和css写出...
相信很多人对“用原生JS怎么样写一个计算器”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助
本文实例为大家分享了js实现简单计算器功能的具体代码，供大家参考，具体内容如下
使用html和css写出计算器的基本结构和样式，用原生js实现计算器的加减乘除运算功能，只能计算简单的两位数的运算，不支持三个数连加或者连乘等等。一次计算完成之后再进行下一次运算不需要clear，可以直接进行下次运算。具体实现如下：
html结构：
div id="box">
!-- 文本框要禁止用户输入，只能通过代码中的input.value来修改 -->
input id="display" type="text" value="0" disabled>
div class="btn">
1/div>
div class="btn">
2/div>
div class="btn">
3/div>
div class="btn">
+/div>
div class="btn">
4/div>
div class="btn">
5/div>
div class="btn">
6/div>
div class="btn">
-/div>
div class="btn">
7/div>
div class="btn">
8/div>
div class="btn">
9/div>
div class="btn">
*/div>
div class="btn">
c/div>
div class="btn">
0/div>
div class="btn">
=/div>
div class="btn">
//div>
/div>
css样式：
#box {
width: 500px;
height: 600px;
border: 1px solid #000000;
}
#display {
width: 460px;
height: 60px;
margin: 15px;
text-align: right;
font-size: 60px;
line-height: 60px;
overflow: hidden;
/* overflow: hidden;
溢出隐藏 */
/* text-overflow: ellipsis;
文本溢出时显示省略号 */
/* word-wrap: none;
强制不换行 */
background: #ffffff;
}
.btn {
width: 100px;
height: 100px;
border: 1px solid #000000;
float: left;
margin: 10px 11px;
font-size: 40px;
line-height: 100px;
text-align: center;
user-select: none;
}
js代码：
firstvalue这个全局变量存储第一次输入的数，input的input.value属性也是一个变量，这个值既作为页面上显示的内容，也是输入的数值。让这两个值进行运算，结果再显示到输入框中即可。bool变量作用：当一次运算完成之后所有数值清零。
如果要实现用上一次的结果继续参与运算这个功能，可以再设置一个全局变量result来存储每次运算后的结果，当下次输入运算符号时，判断firstvalue和result，再决定用哪个值计算。当点击c按钮时，所有值清空，返回初始状态。
var input = document.getelementbyid("display");
var btncollection = document.getelementsbyclassname("btn");
var type;
var firstvalue = 0;
var bool = false;
for (var i = 0;
i btncollection.length;
i++) {
// 获取到每个按键并添加点击事件。点击后会触发function中代码执行。
btncollection[i].onclick = function () {
if(bool){
input.value = "0";
firstvalue = 0;
type = undefined;
bool = false;
}
// input.value = this.innerhtml;
//显示点击的数字在文本框内
if (!isnan(number(this.innerhtml))) {
input.value = number(input.value + this.innerhtml).tostring();
}
else if (this.innerhtml !== "c" &
&
this.innerhtml !== "=") {
firstvalue = number(input.value);
type = this.innerhtml;
input.value = 0;
}
else if (this.innerhtml === "c") {
firstvalue = 0;
type = undefined;
input.value = "0";
}
else {
switch (type) {
case "+":
input.value = (number(input.value) + firstvalue).tostring();
break;
case "-":
input.value = (firstvalue - number(input.value)).tostring();
break;
case "*":
input.value = (number(input.value) * firstvalue).tostring();
break;
case "/":
input.value = (firstvalue / number(input.value)).tostring();
break;
}
bool = true;
}
}
}
现在大家对于用原生JS怎么样写一个计算器的内容应该都清楚了吧，希望大家阅读完这篇文章能有所收获。最后，想要了解更多用原生JS怎么样写一个计算器的知识，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 用原生JS怎么样写一个计算器
本文地址： https://pptw.com/jishu/654345.html