计算器原理
首先需要将计算器的框架搭出来
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body {
margin-top: 60px;
}
input {
width: 300px;
height: 40px;
font-size: 30px;
}
input:disabled {
background: plum;
border-style: none;
height: 90px;
font-size: 80px;
font-weight: bold;
}
td {
width: 75px;
height: 80px;
font-size: 40px;
font-weight: 600;
text-align: center;
}
td:hover {
background: paleturquoise;
cursor: pointer;
}
</style>
</head>
<body>
<center>
<input type="text" name="" id="show" value="0" disabled="disabled" />
</center>
<table border="1" cellspacing="0" cellpadding="" width="300px" height="400px" align="center">
<tr>
<td id="clear">C</td>
<td id="del" style="font-size:25px ;">退格</td>
<td>%</td>
<td class="ysf">/</td>
</tr>
<tr>
<td class="num">7</td>
<td class="num">8</td>
<td class="num">9</td>
<td class="ysf">*</td>
</tr>
<tr>
<td class="num">4</td>
<td class="num">5</td>
<td class="num">6</td>
<td class="ysf">+</td>
</tr>
<tr>
<td class="num">1</td>
<td class="num">2</td>
<td class="num">3</td>
<td class="ysf">-</td>
</tr>
<tr>
<td colspan="2" class="num">0</td>
<td class="num">.</td>
<td id="result">=</td>
</tr>
</table>
</body>
实现基本的运算
<script type="text/javascript">
//获取显示框
var show_value = document.getElementById("show");
//获取归零键
var clear = document.getElementById("clear");
var del = document.getElementById("del");
var result = document.getElementById("result")
var nums = document.getElementsByClassName("num");
//定义三个变量来保存连个运算数和一个运算符
var numValue1 = '';
var numValue2 = '';
var ysf = '';
//给所有的数字绑定点击事件
for (var i = 0; i < nums.length; i++) {
nums[i].onclick = function() {
numValue1 += this.innerText;
// if(numValue1.contains('.')&&this.innerText.contains('.')){
// show_value.value = numValue1;
// }else{
// numValue1 += this.innerText;
// show_value.value = numValue1;
// }
//实现小数点只能出现一次
if(numValue1.contains('.')&&this.innerText.contains('.')){
show_value.value = numValue1;
}else{
numValue1 += this.innerText;
show_value.value = numValue1;
}
}
}
//获取所有的操作符
var operate = document.getElementsByClassName("ysf");
//给所有的运算符绑定点击事件
for (var i = 0; i < operate.length; i++) {
operate[i].onclick = function() {
if (numValue2 == '') {
numValue2 = numValue1;
numValue1 = '';
//保存运算符
ysf = this.innerText;
}else{
// show_value.value=numValue2;
numValue2=numValue2.toString();
//numValue1=numValue1.toString();
showFun();
ysf = this.innerText;
}
}
}
//给等号绑定点击事件
result.onclick = function() {
showFun();
}
function showFun() {
//数据类型转换
var one = new Number(numValue2);
var two = new Number(numValue1);
var r = null;
switch (ysf) {
case '+':
r = one + two;
break;
case '-':
r = one - two;
break;
case '*':
r = one * two;
break;
case '/':
if (two == 0) {
alert("除数不能为0")
numValue1 = '';
numValue2 = '';
ysf = '';
r = 0;
} else {
r = one / two;
}
break;
}
//完成四则运算
numValue2 = new Number(r).toFixed(5);
numValue1 = '';
show_value.value = numValue2;
}
//归零
clear.onclick = function() {
numValue1 = '';
numValue2 = '';
ysf = '';
show_value.value = 0;
}
//退格
del.onclick = function() {
if (numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
} else if (numValue1.length == 1) {
numValue1 = '0';
show_value.value = numValue1;
}
}
</script>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/14639.html
