網頁計算機 一個JS計算機_其他特效

一個挺小的JavaScript網頁計算器，介面美化的我想還是不錯的，畢竟在沒有使用任何圖片修飾的情況下，很好看，而且功能挺實用，可以完成基本的數學算數運算，點擊“運行代碼”可以運行一下看效果。

<title>計算器</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 全選 註:如需引入外部Js需刷新才能執行

]<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>