纯JS写的计算器

最新推荐文章于 2023-12-01 19:30:20 发布

徐小邪

最新推荐文章于 2023-12-01 19:30:20 发布

阅读量93

点赞数

分类专栏： WEB 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/xuxiaoxie2012/article/details/84160632

版权

WEB 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

最近工作比较轻松，无聊的时候自己尝试写了一个简单的计算器，还望各位指正以下为运行效果

<html>
  <head>
    <title>CalSelf.html</title>
	<style type="text/css">
	input {
	width: 50px;
    }
	</style>
	<script type="text/javascript">
	  var str=""
	  var num1;
	  var num2;
	  var opear;
      function num(no){
      str=str+no;
      document.getElementsByTagName("input")[0].value=str;
      }
      function Clear(){
      document.getElementsByTagName("input")[0].value="";
      str="";
      }
      //点击加减乘除事件
      function fun(op){
      //全局变量num1保存当前表框显示的数字内容
      num1=parseInt(document.getElementsByTagName("input")[0].value);
      //全局变量保存运算符加减乘除
      opear=op;
      if(op==1){//加
      op="+"
      }else if(op==2){//减
      op="-"
      }else if(op==3){//乘
      op="*"
      }else{//除
      op="/"
       }
      document.getElementsByTagName("input")[0].value=op;
      str="";
       }
       //按下等号下做的事件！
      function calculate(){
       var  result;
       num2=parseInt(document.getElementsByTagName("input")[0].value);
       if(opear==1){
       result=num1+num2
      }else if(opear==2){
       result=num1-num2
      }else if(opear==3){
       result=num1*num2
      }else{
       result=num1/num2
      }
      num2=result;
      document.getElementsByTagName("input")[0].value=result;
      }
	</script>
  </head>
  <body>
  <input type="text" style="width: 200px;">
  <table>
   <tr>
   <td><input type="button" value="1" οnclick="num(1)"></td>
   <td><input type="button" value="2" οnclick="num(2)"></td>
   <td><input type="button" value="3" οnclick="num(3)"></td>
   <td><input type="button" value="+" οnclick="fun(1)"></td>
   </tr>
   <tr>
   <td><input type="button" value="4" οnclick="num(4)"></td>
   <td><input type="button" value="5" οnclick="num(5)"></td>
   <td><input type="button" value="6" οnclick="num(6)"></td>
   <td><input type="button" value="-" οnclick="fun(2)"></td>
   </tr>
   <tr>
   <td><input type="button" value="7" οnclick="num(7)"></td>
   <td><input type="button" value="8" οnclick="num(8)"></td>
   <td><input type="button" value="9" οnclick="num(9)"></td>
   <td><input type="button" value="*" οnclick="fun(3)"></td>
   </tr>
   <tr>
   <td><input type="button" value="0" οnclick="num(0)"></td>
   <td><input type="button" value="Clear" οnclick="Clear()"></td>
   <td><input type="button" value="=" οnclick="calculate()"></td>
   <td><input type="button" value="/" οnclick="fun(4)"></td>
   </tr>
   </table> 
  </body>
</html>

徐小邪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JS写的计算器

最近工作比较轻松，无聊的时候自己尝试写了一个简单的计算器，还望各位指正以下为运行效果 &lt;html&gt; &lt;head&gt; &lt;title&gt;CalSelf.html&lt;/title&gt; &lt;style type="text/css"&gt; input { width: 50px; } &lt;/style..
复制链接

扫一扫