JavaScript计算器

来源：互联网发布：淘宝背景音乐代码生成编辑：程序博客网时间：2024/04/27 15:31

JavaScript初学，实现一个只有基本功能的计算器，bug非常多，只实现了简单加减乘除。主要是为了练习JavaScript
js代码：

<script type="text/javascript">    //定义三个全局变量    //用来存第一个数    var num1;    //用来存第二个数    var num2;    //用来存运算符    var yunSuanFu;    //数字显示在文本框里    function numClick(num)    {        var btn = document.getElementById(num).value;        document.getElementById("txt").value += btn;        //txtValue = btn0;    }    //输入运算符后    function jiSuan(fuHao)    {        yunSuanFu = document.getElementById(fuHao).value;        num1 = document.getElementById("txt").value;        document.getElementById("txt").value ="";               }    //计算结果    function result()    {        num2 = document.getElementById("txt").value;        //if可用switch代替更好        if(yunSuanFu == "+")        {            var sum = parseInt(num2) + parseInt(num1);            document.getElementById("txt").value = sum;        }           if(yunSuanFu == "-")        {            var sum = parseInt(num1)-parseInt(num2);            document.getElementById("txt").value = sum;        }        if(yunSuanFu == "*")        {            var sum = parseInt(num2) * parseInt(num1);            document.getElementById("txt").value = sum;        }        if(yunSuanFu == "/")        {            var sum = parseFloat(num1)/parseInt(num2) ;            document.getElementById("txt").value = sum;        }       }</script>

html5代码

<!doctype html><html><head><meta charset="utf-8"><title>计算器</title><script type="text/javascript"></script></head><body><form name="form1" method="post" action="">  <table width="231" border="1">    <tr>      <td colspan="4">      <input type="text" name="txt" id="txt" >      <input type="reset" name="button" id="button" value="重置"></td>    </tr>    <tr>      <td width="43"><input type="button" name="9" id="7" value="7" onClick="numClick(7);"></td>      <td width="43"><input type="button" name="95" id="8" value="8" onClick="numClick(8);"></td>      <td width="43"><input type="button" name="97" id="9" value="9" onClick="numClick(9);"></td>      <td width="74"><input type="button" name="910" id="11" value="+" onClick="jiSuan(11)"></td>    </tr>    <tr>      <td><input type="button" name="93" id="4" value="4" onClick="numClick(4);"></td>      <td><input type="button" name="94" id="5" value="5" onClick="numClick(5);"></td>      <td><input type="button" name="98" id="6" value="6" onClick="numClick(6);"></td>      <td><input type="button" name="911" id="12" value="-" onClick="jiSuan(12)"></td>    </tr>    <tr>      <td><input type="button" name="92" id="1" value="1" onClick="numClick(1)"></td>      <td><input type="button" name="96" id="2" value="2" onClick="numClick(2);"></td>      <td><input type="button" name="99" id="3" value="3" onClick="numClick(3);"></td>      <td><input type="button" name="912" id="13" value="*" onClick="jiSuan(13)"></td>    </tr>        <tr>      <td><input type="button" name="92" id="0" value="0" onClick="numClick(0);"></td>      <td><input type="button" name="96" id="10" value="." onClick="numClick(10);"></td>      <td><input type="button" name="99" id="15" value="=" onClick="result()"></td>      <td><input type="button" name="912" id="14" value="/" onClick="jiSuan(14)"></td>    </tr>  </table></form></body></html>

1 0