复制代码代码如下:
<!DOCTYPE html>
<html>
<meta name=”content-type” content=”text/html; charset=UTF-8″>
<head>
<title>Calculator</title>
<!–将按键内容以字符串形式存储在文字框中当按钮为“=”时，调用eval方法计算结果然后将结果输出文字框中–>
<script type=”text/javascript”>
var numresult;
var str;
function onclicknum(nums) {
str = document.getElementById(“nummessege”);
str.value = str.value + nums;
}
function onclickclear() {
str = document.getElementById(“nummessege”);
str.value = “”;
}
function onclickresult() {
str = document.getElementById(“nummessege”);
numresult = eval(str.value);
str.value = numresult;
}
</script>
</head>
<body bgcolor=”affff” >
<!–定义按键表格,每个按键对应一个事件触发–>
<table border=”1″ align=”center” bgColor=”#bbff77″
>
<tr>
<td colspan=”4″>
<input type=”text” id=”nummessege”
/>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”1″ id=”1″ onclick=”onclicknum(1)”
>
</td>
<td>
<input type=”button” value=”2″ id=”2″ onclick=”onclicknum(2)”
>
</td>
<td>
<input type=”button” value=”3″ id=”3″ onclick=”onclicknum(3)”
>
</td>
<td>
<input type=”button” value=”+” id=”add” onclick=”onclicknum(‘+’)”
>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”4″ id=”4″ onclick=”onclicknum(4)”
>
</td>
<td>
<input type=”button” value=”5″ id=”5″ onclick=”onclicknum(5)”
>
</td>
<td>
<input type=”button” value=”6″ id=”6″ onclick=”onclicknum(6)”
>
</td>
<td>
<input type=”button” value=”-” id=”sub” onclick=”onclicknum(‘-‘)”
>
</td>
</tr>
<tr>
<td>
<input type=”button” value=”7″ id=”7″ onclick=”onclicknum(7)”
>
</td>
<td>
<input type=”button” value=”8″ id=”8″ onclick=”onclicknum(8)”
>
</td>
<td>
<input type=”button” value=”9″ id=”9″ onclick=”onclicknum(9)”
>
</td>
<td>
<input type=”button” value=”*” id=”mul” onclick=”onclicknum(‘*’)”
>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” value=”0″ id=”0″ onclick=”onclicknum(0)”
>
</td>
<td>
<input type=”button” value=”.” id=”point” onclick=”onclicknum(‘.’)”
>
</td>
<td>
<input type=”button” value=”/” id=”division”
onclick=”onclicknum(‘/’)”
>
</td>
</tr>
<tr>
<td colspan=”2″>
<input type=”button” value=”Del” id=”clear”
onclick=”onclickclear()”
/>
</td>
<td colspan=”2″>
<input type=”button” value=”=” id=”result”
onclick=”onclickresult()”
/>
</td>
</tr>
</table>
</body>
</html>
—-想了解HTML实现简单计算器附详细思路分享 的全部内容且更多的html语言教程关注<计算机技术网(www.ctvol.com)!!>
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/htmltutorial/490629.html