用html基础知识编辑简易计算器

最新推荐文章于 2024-08-12 18:48:17 发布

风行天下564

最新推荐文章于 2024-08-12 18:48:17 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： 7898 文章标签： html

本文链接：https://blog.youkuaiyun.com/u014209746/article/details/48091753

7898 专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了一个使用HTML实现的简易计算器。通过JavaScript函数，点击按钮可以将数值和运算符添加到输入框，当按下'='按钮时，利用eval()函数进行计算并显示结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>