Web calculator A JS calculator_Other special effects

It’s a pretty small JavaScript web calculator. I think the interface is pretty good. After all, it looks good without using any image modifications, and its functions are quite practical. It can complete basic mathematical calculations. Click "Run Code" You can run it to see the effect.

<title>Calculator</title> <style> button {width:40; border: 1 solid #808080;background-color: #FFFFFF} </style> <form name="Calc"> <table border="4" bordercolorlight="#808080" bordercolor="#808080" width="250" height="38"> <tr><td width="291" height="39" bgcolor="#C0C0C0">   <input type="text" name="Input" readonly size="21" style="background-color: #F5F5F5; font-family: Arial; border: 1 solid #000000">  <button name="back" onclick="backspace()">←</button> </td></tr> <tr> <td width="291" height="38"> <table border="0" width="100%" height="105" cellpadding="0"> <tr> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="1" onclick="addoperator()">1</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="2" onclick="addoperator()">2</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="3" onclick="addoperator()">3</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name=" " onclick="addoperator()"> </button> </td> </tr> <tr> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="4" onclick="addoperator()">4</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="5" onclick="addoperator()">5</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="6" onclick="addoperator()">6</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="-" onclick="addoperator()">-</button> </td> </tr> <tr> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="7" onclick="addoperator()">7</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="8" onclick="addoperator()">8</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="9" onclick="addoperator()">9</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="*" onclick="addoperator()">×</button> </td> </tr> <tr> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="clear" onclick="clearinput()">C</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="0" onclick="addoperator()">0</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="=" onclick="result()">=</button> </td> <td width="25%" height="31" align="center" bgcolor="#C0C0C0"> <button name="/" onclick="addoperator()">÷</button> </td> </tr> </table> </td> </tr> </table> </form>
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script> <!-- willclear=false //这个变量作为下一次输入是否先清空输入框的状态标志 function backspace(){ //退格 Calc.Input.value = Calc.Input.value.substring(0,Calc.Input.value.length-1) Calc.Input.title = Calc.Input.value.substring(0,Calc.Input.title.length-1) }//取长度为原长度减一的串，实现退格效果。 function addoperator(){ //加操作符 if (willclear){ //如果这次输入前需要清空输入框 willclear=false //先清除标志，避免下次再次被错误地重复清空 clearinput() //清除输入内容 } Calc.Input.value += event.srcElement.innerText //给用于显示的加上刚输入的运算符 Calc.Input.title += event.srcElement.name //给用于计算的表达式区加上刚输入的运算符 } function clearinput(){ //清除输入 Calc.Input.value='' //清空显示区 Calc.Input.title='' //清空表达式 } function result(){ //用于计算结果 Calc.Input.value = eval(Calc.Input.title)//执行表达式区的表达式，返回结果到显示区。 willclear=true//设定下次按键则先清除此次计算结果。 } //--> </script>