(36行代码)javascript实现简单的计算器
话不多说我们上代码
<!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>function setVal(myval){str = document.getElementById("mytext1").value+=myval;}//此函数是累加输入框的内容到str function cale(){ document.getElementById("mytext1").value = eval(str);}//计算器计算的主要功能通过elval函数来实现的//eval函数的主要功能就是字符串的的数值计算function zro(){document.getElementById("mytext1").value ="";}//此功能是清空输入框的内容实现归0</script></head><body><div class="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>
代码很少功能也不完善，适合初级入门找找代码的实现感