js实现简单的计算器功能
更新时间：2017年01月16日 09:06:25 作者：15871483684
本文主要分享了js实现简单的计算器功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的计算器</title>
<style>
* {
margin: 0 auto;
padding: 0px;
}
html, body {
width: 100%;
height: 100%;
}
a {
text-decoration: none;
}
.wrap {
width: 30%;
min-width: 250px;
margin: 0 auto;
border: 1px solid #b1b1b1;
}
.wrap .screen {
width: 100%;
height: 150px;
background-color: #8d8d8d;
}
.wrap .screen .string {
height: 100%;
user-select: none;
font-size: 30px;
word-break: break-all;
}
.wrap .button-group {
width: 100%;
margin-top: 5px;
}
.wrap .button-group td {
width: 25%;
}
.wrap .button-group td a {
display: inline-block;
height: 80px;
text-align: center;
background-color: #d5d5d5;
color: #000;
line-height: 80px;
font-size: 25px;
width: 100%;
user-select: none;
}
.wrap .button-group td a:hover {
background-color: #9d9d9d;
color: #002a80;
}
.wrap .button-group td a.active {
background-color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="screen">
<p class="string"></p>
</div>
<div class="button-group">
<table cellspacing="5" cellpadding="10" border="0" width="100%">
<tr>
<td><a href="javascript:void(0);">7</a></td>
<td><a href="javascript:void(0);">8</a></td>
<td><a href="javascript:void(0);">9</a></td>
<td><a href="javascript:void(0);">*</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">4</a></td>
<td><a href="javascript:void(0);">5</a></td>
<td><a href="javascript:void(0);">6</a></td>
<td><a href="javascript:void(0);">/</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">1</a></td>
<td><a href="javascript:void(0);">2</a></td>
<td><a href="javascript:void(0);">3</a></td>
<td><a href="javascript:void(0);">+</a></td>
</tr>
<tr>
<td><a href="javascript:void(0);">DEL</a></td>
<td><a href="javascript:void(0);">0</a></td>
<td><a href="javascript:void(0);" class="active">=</a></td>
<td><a href="javascript:void(0);">-</a></td>
</tr>
</table>
</div>
</div>
<script>
var numString = document.getElementsByClassName("string")[0];
var buttonGroup = document.getElementsByTagName("a");
var screen = document.getElementsByClassName("string")[0];
var num1 = 0;
var num2 = 0;
var count = 0;
var f;
var flag = true;
/*控制输入的是数字*/
var flag2 = true;
/*控制是否连续点击符号*/
screen.onclick = function () {
numString.innerHTML = "";
};
for (var i = 0; i < buttonGroup.length; i++) {
buttonGroup[i].onclick = function () {
switch (this.innerHTML) {
case "0":
case "1":
case "2":
case "3":
case "4":
case "5":
case "6":
case "7":
case "8":
case "9":
if (!flag) {
numString.innerHTML = "";
flag2 = true;
}
flag = true;
numString.innerHTML += this.innerHTML;
break;
case "DEL":
numString.innerHTML = numString.innerHTML.substr(0, numString.innerHTML.length - 1);
break;
case "+":
case "-":
case "*":
case "/":
f = this.innerHTML;
count++;
if (flag2) {
flag = false;
/*控制输入的是符号*/
if (count == 1) {
num1 = numString.innerHTML;
} else {
flag2 = false;
num2 = numString.innerHTML;
numString.innerHTML = eval(num1 + f + num2);
num1 = numString.innerHTML;
}
}
break;
case "=":
num2 = numString.innerHTML;
numString.innerHTML = eval(num1 + f + num2);
count = 0;
flag = !flag;
break;
}
}
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript实现表格点击排序的方法,可实现点击顶部数据项标题实现对应数据列的排序效果,涉及javascript鼠标事件及数据排序的技巧,需要的朋友可以参考下2015-05-05
这篇文章主要为大家详细介绍了微信小程序实现弹出框提交信息，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了JS中SetTimeout和SetInterval使用初探,需要的朋友可以参考下2017-03-03
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
这段代码是从网上看到的一段不错的代码，用for命令实现字符串的转移，而且使用的是for循环直接将后面的字符替换成前面的字符，这个逻辑以前没试过2020-12-12
JavaScript新增的两个原始数据类型详解(Record和Tuple)
js中原始数据类型有Number、String、Boolean、Null、Undefined、Symbol (ES6引入的数据类型),引用的数据类型有Object,Array,Function,下面这篇文章主要给大家介绍了关于JavaScript新增两个原始数据类型(Record和Tuple)的相关资料,需要的朋友可以参考下2022-03-03
这篇文章主要给大家介绍了关于JS匿名函数内部this指向的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用JS具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
这篇文章主要为大家介绍了postMessage及webSocket跨域方案详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
在 JavaScript 中,对象是一种非常重要的数据类型,理解如何遍历对象的属性以及对象属性的描述,对于高效使用 JavaScript 至关重要,本文将详细介绍对象属性的遍历方法和属性描述对象的相关内容,需要的朋友可以参考下2025-02-02
这篇文章主要介绍了JavaScript实现经纬度转换成地址,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-03-03
这篇文章主要介绍了JS如何替换文本域内的回车,需要的朋友可以参考下2014-02-02
最新评论