javascript实现-简易计算器

最新推荐文章于 2022-06-13 21:48:29 发布

原创最新推荐文章于 2022-06-13 21:48:29 发布 · 1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #表单

javascript 专栏收录该内容

25 篇文章

订阅专栏

本文介绍了一个使用原生JavaScript实现的简易加减乘除计算器。该计算器通过HTML表单输入两个数值及运算符，点击等号按钮即可显示计算结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

hello，大家好，学习一段时间了，学习了框架和后台的内容，为了防止前端的js和jq的熟练度不够，忘记很多算法和基础用法，会陆陆续续更新一些小的功能效果code，用于记录和积累，不足之处很多，封装性和代码冗余暂且不严格要求，尽力完善，保持更新..

简易加减乘除计算器，利用表单的value值取值，用原生js实现.可直接复制到编辑器，打开即可运行.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>加减乘除计算器</title>  
  <script type="text/javascript">
   function count(){    
    var a = parseInt(document.getElementById("txt1").value);
    var b = parseInt(document.getElementById("txt2").value) ;
    var sign = document.getElementById("select").value;
    var result = 0;
        switch(sign){
            case "+": result = a+b;
            break;
            case "-": result = a-b;
            break;
            case "*": result = a*b;
            break;
            case "/": result = a/b;
            break;
            case "%": result = a%b;
            break;
          }
    document.getElementById("answer").value = result;
   }
  </script> 
 </head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
        <option value="%">%</option>
   </select>
   <input type='text' id='txt2' /> 
       <input type='button' value=' = ' onclick="count()"/> 
       <!--通过 = 按钮来调用创建的函数，得到结果--> 
   <input type='text' id='answer' />   
 </body>
</html>