HTML+CSS+JS制作简单计算器
思路:把按钮输入的数据以字符串形式存储起来,再使用JS的eval()函数来计算字符串,最终在界面上显示出来。
代码如下:
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style type="text/css">
table{
margin:0 auto;
border-collapse:collapse;
caption-side:top;
border-style: inset;
width: 365px;
height: 440px;
}
.tbs{
width: 73px;
height: 50px;
background-color : lightgray;
font-size: 1.6em;
}
.screen{
width: 420px;
height: 60px;
font-size: 2.0em;
color: white;
background-color: black;
text-align:right;
}
.showtime{
width: 80px;
height: 20px;
background-color:lightgray;
color: black;
font-size: 1.5em;
}
</style>
</head>
<body>
<table bgcolor="Gray" border="8">
<caption style="font-size:30px">简易计算器</caption>
<tr>
<td colspan="5"><input class="screen" type="text" disabled /></td>
</tr>
<tr>
<td colspan="2" class="showtime" bgcolor="lightgray" id="showtime" align="center">00:00:00</td>
<