HTML实现简单计算器附详细思路

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

HTML实现简单计算器附详细思路

来源：阅读：715 次日期：2014-10-10 10:05:13

温馨提示：小编为您整理了“HTML实现简单计算器附详细思路”,方便广大网友查阅！

代码如下:

<!DOCTYPE html>

<html>

<head>

<title>Calculator</title>

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>

<table border="1" align="center" bgColor="#bbff77"

style="height: 350px; width: 270px">

<tr>

<input type="text" id="nummessege"

style="height: 90px; width: 350px; font-size: 50px" />

</td>

</tr>

<tr>

<td>

<input type="button" value="1" id="1" onclick="onclicknum(1)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="2" id="2" onclick="onclicknum(2)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="3" id="3" onclick="onclicknum(3)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="+" id="add" onclick="onclicknum('+')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td>

<input type="button" value="4" id="4" onclick="onclicknum(4)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="5" id="5" onclick="onclicknum(5)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="6" id="6" onclick="onclicknum(6)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="-" id="sub" onclick="onclicknum('-')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<td>

<input type="button" value="7" id="7" onclick="onclicknum(7)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="8" id="8" onclick="onclicknum(8)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="9" id="9" onclick="onclicknum(9)"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="*" id="mul" onclick="onclicknum('*')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<input type="button" value="0" id="0" onclick="onclicknum(0)"

style="height: 70px; width: 190px; font-size: 35px">

</td>

<td>

<input type="button" value="." id="point" onclick="onclicknum('.')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

<td>

<input type="button" value="/" id="division"

onclick="onclicknum('/')"

style="height: 70px; width: 90px; font-size: 35px">

</td>

</tr>

<tr>

<input type="button" value="Del" id="clear"

onclick="onclickclear()"

style="height: 70px; width: 190px; font-size: 35px" />

</td>

<input type="button" value="=" id="result"

onclick="onclickresult()"

style="height: 70px; width: 190px; font-size: 35px" />

</td>

</tr>

</table>

</body>

</html>

更多信息请查看IT技术专栏

上一篇：HTML打折计算价格实现原理与脚本代码

下一篇：关于分割线 hr 在各浏览器中的差异

手机网站地址：HTML实现简单计算器附详细思路

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！