JavaScript计算器

最新推荐文章于 2024-01-23 16:40:43 发布

csdn_今日有雨

最新推荐文章于 2024-01-23 16:40:43 发布

阅读量573

点赞数 1

分类专栏： html javascript 文章标签： javascript html5

本文链接：https://blog.youkuaiyun.com/csdn_wyl/article/details/48263187

版权

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

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>