Js实现简单计算器
2017-11-23 17:46
204 查看
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>计算器的实现</title> </head> <script type="text/javascript"> function calCulate(val){ var num = document.getElementById("t"); switch(val){ case "=": num.value = eval(num.value); break; case "C": num.value = ""; break; default: num.value =num.value+val; break; } } </script> <style type="text/css"> #sDiv{ text-align: center; border: solid 1px; width: 300px; border-radius: 10px; background-color: aqua; } #t{ border:solid 1px ; width: 260px; border-radius: 10px; margin-top: 10px; margin-bottom: 10px; font-size: 20px; } input[type=button]{ border-radius: 5px; width: 55px; height: 30px; margin: 2px; font-size: 20px; } #equ{ width: 260px; font - size: 30px; margin-bottom: 10px; } </style> <body> <div id="sDiv"> <input type="text" name="t" id="t" value="" /><br/> <input type="button" name="" id="" value="1" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="2" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="3" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="4" onclick="calCulate(this.value)"/><br /> <input type="button" name="" id="" value="5" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="6" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="7" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="8" onclick="calCulate(this.value)"/><br /> <input type="button" name="" id="" value="9" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="0" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="." onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="C" onclick="calCulate(this.value)"/><br/> <input type="button" name="" id="" value="+" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="-" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="*" onclick="calCulate(this.value)"/> <input type="button" name="" id="" value="/" onclick="calCulate(this.value)"/><br/> <input type="button" name="" id="equ" value="=" onclick="calCulate(this.value)"/> </div> </body> </html>