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

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

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

来源：阅读：669 次日期：2016-06-23 09:51:37

温馨提示：小编为您整理了“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>

上一篇：制作的网页在浏览时下方有多余的空白如何消除

下一篇：利用css的样式对文本进行隐藏和显示等操作

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

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