HTML是无法实现简单的算术运算的。原因如下：
1、HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
2、可以使用JavaScript技术实现网页中简单的算术运算，如：
var a=1 var b=2document.write(a+b)//结果会在网页中输出3
补充知识：
1、超级文本标记语言是标准通用标记语言下的一个应用，也是一种规范，一种标准，
超文本标记语言 (15张)
它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果
2、JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
代码如下:
<!DOCTYPE html>
<html>
<meta name="content-type" content="text/htmlcharset=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"
style="height: 350pxwidth: 270px">
<tr>
<td colspan="4">
<input type="text" id="nummessege"
style="height: 90pxwidth: 350pxfont-size: 50px" />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" id="1" onclick="onclicknum(1)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="2" id="2" onclick="onclicknum(2)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="3" id="3" onclick="onclicknum(3)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="+" id="add" onclick="onclicknum('+')"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="4" id="4" onclick="onclicknum(4)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="5" id="5" onclick="onclicknum(5)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="6" id="6" onclick="onclicknum(6)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="-" id="sub" onclick="onclicknum('-')"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
</tr>
<tr>
<td>
<input type="button" value="7" id="7" onclick="onclicknum(7)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="8" id="8" onclick="onclicknum(8)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="9" id="9" onclick="onclicknum(9)"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="*" id="mul" onclick="onclicknum('*')"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="0" id="0" onclick="onclicknum(0)"
style="height: 70pxwidth: 190pxfont-size: 35px">
</td>
<td>
<input type="button" value="." id="point" onclick="onclicknum('.')"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
<td>
<input type="button" value="/" id="division"
onclick="onclicknum('/')"
style="height: 70pxwidth: 90pxfont-size: 35px">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="Del" id="clear"
onclick="onclickclear()"
style="height: 70pxwidth: 190pxfont-size: 35px" />
</td>
<td colspan="2">
<input type="button" value="=" id="result"
onclick="onclickresult()"
style="height: 70pxwidth: 190pxfont-size: 35px" />
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title></title>
</head>
<body>
<table>
<tr>
<td><input type="button" value="add" onclick="setOp('+', 'add')"/></td>
<td><input type="button" value="miner" onclick="setOp('-', 'miner')"/></td>
<td><input type="button" value="times" onclick="setOp('*', 'times')"/></td>
<td><input type="button" value="divide" onclick="setOp('/', 'divide')"/></td>
</tr>
</table>
<table id="tb_calc" style="display:none">
<tr>
<td> <input id="x" type="text" style="width:100px" value="" name="x" /></td>
<td> <lable id="op" name="op"></lable> </td>
<td> <input id="y" type="text" style="width:100px" value="" name="y" /> </td>
<td> <input id="opTips" type="button" value="" onclick="calc()"/> </td>
<td> <lable id="z" name="z"></lable> </td>
</tr>
</table>
<script type="application/javascript">
function setOp(op, opTips)
{
var tb=document.getElementById("tb_calc")
tb.style.display = "none"
document.getElementById("x").value = ""
document.getElementById("y").value = ""
document.getElementById("z").innerText = ""
document.getElementById("op").innerText = op
document.getElementById("opTips").value = opTips
tb.style.display = "block"
}
function calc()
{
var x = parseInt(document.getElementById("x").value)
var y = parseInt(document.getElementById("y").value)
var op = document.getElementById("op").innerText
var z = ""
switch(op)
{
case '+':
z = x + y
break
case '-':
z = x - y
break
case '*':
z = x * y
break
case '/':
z = x / y
break
default:
z = ''
}
console.log(x, op, y, '=', z)
document.getElementById("z").innerText = z
}
</script>
</body>
</html>
实现的步骤，第一步是加4个按钮，如图所示：
第二步需要加两个输入框，两个，一个按钮
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）