用JavaScript制作简单的计算器
Posted 栀蓝
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JavaScript制作简单的计算器相关的知识，希望对你有一定的参考价值。
<html > <head> <title>简单计算器</title> <style type="text/css"> div{ margin:auto; background-color:#ff4365; width:550px; height:280px; border:ridge #ff4365 4px; } table{ width:500px; margin:auto; padding-top:10px; } td{ height:20px; padding:2px 6px; text-align:center; } input{ width:100px; height:35px; background:#99FFCC; font-size:16px; color:#0033CC; } .input1{ width:494px; padding:0px; margin:0px; padding:5px; font-size:25px; background:#FFFF93; color:#000000; } h1{ color:#ff4365; font-size:50px; border:groove 2px #ff4365; width:160px; background:#99FFCC; } </style> <script type="text/javascript"> var num; function buttontext(num) { document.getElementById(‘1‘).value+=document.getElementById(num).value; } function compute() { document.getElementById(‘1‘).value=eval(document.getElementById(‘1‘).value); } function del1() { document.getElementById(‘1‘).value=document.getElementById(‘1‘).value.substring(0,document.getElementById(‘1‘).value.length-1); } function del2() { document.getElementById(‘1‘).value=‘‘; } function sqrt1() { document.getElementById(‘1‘).value=Math.sqrt(document.getElementById(‘1‘).value); } function Pow() { document.getElementById(‘1‘).value=Math.pow(document.getElementById(‘1‘).value,2); } </script> </head> <body bgcolor="#ff7575"> <center> <h1>计算器</h1> </center> <div> <table> <tr> <td colspan="4"><input type="text" class="input1" id="1" value="0" name="text1"/></td> </tr> <tr> <td><input type="button" id="2" value="+" onclick="buttontext(‘2‘)"/></td> <td><input type="button" id="3" value="1" onclick="buttontext(‘3‘)"/></td> <td><input type="button" id="4" value="2" onclick="buttontext(‘4‘)"/></td> <td><input type="button" id="5" value="3" onclick="buttontext(‘5‘)"/></td> </tr> <tr> <td><input type="button" id="6" value="-" onclick="buttontext(‘6‘)"/></td> <td><input type="button" id="7" value="4" onclick="buttontext(‘7‘)"/></td> <td><input type="button" id="8" value="5" onclick="buttontext(‘8‘)"/></td> <td><input type="button" id="9" value="6" onclick="buttontext(‘9‘)"/></td> </tr> <tr> <td><input type="button" id="10" value="*" onclick="buttontext(‘10‘)"/></td> <td><input type="button" id="11" value="7" onclick="buttontext(‘11‘)"/></td> <td><input type="button" id="12" value="8" onclick="buttontext(‘12‘)"/></td> <td><input type="button" id="13" value="9" onclick="buttontext(‘13‘)"/></td> </tr> <tr> <td><input type="button" id="14" value="/" onclick="buttontext(‘14‘)"/></td> <td><input type="button" id="15" value="0" onclick="buttontext(‘15‘)"/></td> <td><input type="button" id="16" value="." onclick="buttontext(‘16‘)"/></td> <td><input type="button" id="17" value="=" onclick="compute()"/></td> </tr> <tr> <td><input type="button" id="18" value="√" onclick="sqrt1()"/></td> <td><input type="button" id="19" value="平方根" onclick="Pow()"/></td> <td><input type="button" id="20" value="C" onclick="del2()"/></td> <td><input type="button" id="21" value="←" onclick="del1()"/></td> </tr> </table> </div> </body> </html>
以上是关于用JavaScript制作简单的计算器的主要内容，如果未能解决你的问题，请参考以下文章