<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="skyblue" >
<!--定义按键表格,每个按键对应一个事件触发-->
<table border="1" align="center" bgColor="skyblue"
style="height: 350px width: 270px">
<tr>
<td colspan="4">
<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>
<td colspan="2">
<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>
<td colspan="2">
<input type="button" value="Del" id="clear"
onclick="onclickclear()"
style="height: 70px width: 190px font-size: 35px" />
</td>
<td colspan="2">
<input type="button" value="=" id="result"
onclick="onclickresult()"
style="height: 70px width: 190px font-size: 35px" />
</td>
</tr>
</table>
</body>
</html>
首先要说明一点，纯html是不能编辑计算器的，因为html是标记语言，不是编程语言，不能编辑程序，要写计算器，还需要js代码，下面为全部代码：<html>
<head>
<title>计算器</title>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8"/>
</head>
<body>
<script language="JavaScript">
<!-- Hide the script from old browsers --
function compute(obj)
{obj.expr.value = eval(obj.expr.value)}
var one = '1'
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string)
{obj.expr.value += string}
function clear(obj)
{obj.expr.value = ''}
// --End Hiding Here -->
</script>
<form name="calc">
<table border=1>
<td colspan=4><input type="text" name="expr" size=30 action="compute(this.form)"><tr>
<td><input type="button" value=" 7 " onClick="enter(this.form, seven)">
<td><input type="button" value=" 8 " onClick="enter(this.form, eight)">
<td><input type="button" value=" 9 " onClick="enter(this.form, nine)">
<td><input type="button" value=" / " onClick="enter(this.form, divide)">
<tr><td><input type="button" value=" 4 " onClick="enter(this.form, four)">
<td><input type="button" value=" 5 " onClick="enter(this.form, five)">
<td><input type="button" value=" 6 " onClick="enter(this.form, six)">
<td><input type="button" value=" * " onClick="enter(this.form, multiply)">
<tr><td><input type="button" value=" 1 " onClick="enter(this.form, one)">
<td><input type="button" value=" 2 " onClick="enter(this.form, two)">
<td><input type="button" value=" 3 " onClick="enter(this.form, three)">
<td><input type="button" value=" - " onClick="enter(this.form, minus)">
<tr><td colspan=2><input type="button" value=" 0 " onClick="enter(this.form, zero)">
<td><input type="button" value=" . " onClick="enter(this.form, decimal)">
<td><input type="button" value=" + " onClick="enter(this.form, plus)">
<tr><td colspan=2><input type="button" value=" = " onClick="compute(this.form)">
<td colspan=2><input type="button" value="AC" size= 3 onClick="clear(this.form)"></table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
A:<input type="number" name="" id="a" value="" style="width: 40%height: 50px"/><br />
D:<input type="number" step="0.1" name="" id="d" style="width: 40%height: 50px" value="" min = '0.5' max="0.9" /><br>
<input type="button" name="" id="btn" value="结果" /><br>
<p id="p"></p>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn')
function getC (y){
if(y<10) return alert('错误 y<10')
if(y>=10 &&y<50) return y = 0.2
if(y>=50 &&y<100) return y = 0.3
if(y>=100 &&y<200) return y = 0.4
if(y>=200) return y = 0.5
}
btn.addEventListener('click',function(){
var a = document.getElementById('a').value
var d = document.getElementById('d').value
var b = 1
var y = a*b
var e = 2
var c = getC(y)
var e = 2
var p = document.getElementById('p')
var x = a*d*b*y*e*c*e
p.innerHTML = '你收到了' + a + '元的订单，是' + y + '的完成量，你的提成是' + d + '，计算比例是' + c+ '，则你的计算结果是：' + x+ '，等发工资一起结算。'
})
</script>
</html>
