话不多说我们上代码
<!DOCTYPE html><html><head><meta charset="utf-8"><style>
input[type='button']{width:50px;height:50px;}//设置输入框的宽高都为50px.mydiv{width:215px;height:250px;border:1px solid black;margin:0 auto;}//设置计算器的边框的大小和居中对齐</style><script>
functionsetVal(myval){str= document.getElementById("mytext1").value+=myval;}//此函数是累加输入框的内容到str
functioncale(){ document.getElementById("mytext1").value=eval(str);}//计算器计算的主要功能通过elval函数来实现的//eval函数的主要功能就是字符串的的数值计算
functionzro(){document.getElementById("mytext1").value="";}//此功能是清空输入框的内容实现归0</script></head><body><divclass="mydiv"><input id="mytext1" style="width: 210px; height: 40px;" type="text"/><br/><input type="button" value="7" onclick="setVal('7')"/><input type="button" value="8" onclick="setVal('8')"/><input type="button" value="9" onclick="setVal('9')"/><input type="button" value="+" onclick="setVal('+')"/><input type="button" value="4" onclick="setVal('4')"/><input type="button" value="5" onclick="setVal('5')"/><input type="button" value="6" onclick="setVal('6')"/><input type="button" value="-" onclick="setVal('-')"/><input type="button" value="1" onclick="setVal('1')"/><input type="button" value="2" onclick="setVal('2')"/><input type="button" value="3" onclick="setVal('3')"/><input type="button" value="*" onclick="setVal('*')"/><input type="button" value="0" onclick="setVal('0')"/><input type="button" value="归零" onclick="zro()"/><input type="button" value="=" onclick="cale()"/><input type="button" value="/" onclick="setVal('/')"/></div></body></html>代码很少功能也不完善，适合初级入门找找代码的实现感