JS实现计算器功能
点击即可进入计算器页面
代码
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 样式 -->
<style>
tr,td{
text-align: center;
}
a{
/* 去除下划线 */
text-decoration: none;
color: black;
}
a:hover{
background-color:darkgray;
}
</style>
</head>
<body>
<!-- 表格 -->
<table border="1px" cellpadding="1" cellspacing="1" align="center">
<tr>
<td colspan="4" style="font-weight: 600;">计算器</td>
</tr>
<tr>
<td colspan="4">
<input type="text" id="numInput" style="text-align: right;"/>
</td>
</tr>
<tr>
<td onclick="onClick(this)"><a href="#">C</a></td>
<td onclick="onClick(this)"><a href="#">/</a></td>
<td onclick="onClick(this)"><a href="#">*</a></td>
<td onclick="onClick(this)"><a href="#">-</a></td>
</tr>
<tr>
<td onclick="onClick(this)"><a href="#">7</a></td>
<td onclick="onClick(this)"><a href="#">8</a></td>
<td onclick="onClick(this)"><a href="#">9</a></td>
<td onclick="onClick(this)" rowspan="2"><a href="#">+</a></td>
</tr>
<tr>
<td onclick="onClick(this)"><a href="#">4</a></td>
<td onclick="onClick(this)"><a href="#">5</a></td>
<td onclick="onClick(this)"><a href="#">6</a></td>
</tr>
<tr>
<td onclick="onClick(this)"><a href="#">1</a></td>
<td onclick="onClick(this)"><a href="#">2</a></td>
<td onclick="onClick(this)"><a href="#">3</a></td>
<td onclick="onClick(this)" rowspan="2"><a href="#">=</a></td>
</tr>
<tr>
<td onclick="onClick(this)"><a href="#">0</a></td>
<td onclick="onClick(this)" colspan="2"><a href="#">.</a></td>
</tr>
</table>
<script>
var strs = "";
function onClick(count) {
var numInput = document.getElementById("numInput");
// 接收显示
var str = count.innerText;
// 如果等于(点击)C就清空
if(str == "C"){
numInput.value = "";
str = "";
strs = "";
}
// 如果等于(点击)= 执行eval()算法 得到结果
if(str == "="){
str = eval(strs);
numInput.value = "";
strs = str + "";
}else{
// 否则继续将内容写入字符串后
strs += str;
}
// 如果等于(点击) + - * / 就显示 + - * /
if(str == "+" || str == "-" || str == "*" || str == "/"){
numInput.value = str;
}else{
// 如果第一次不是(没点击)数字 将此内容(运算符)清除
if(isNaN(numInput.value)){
numInput.value = "";
}
// 如果一直是数字则继续将内容写入字符串后
numInput.value += str;
}
}
</script>
</body>
</html>效果
样式效果图：
在这里插入图片描述
运行效果图：
在这里插入图片描述
在这里插入图片描述
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-10-23 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录