简易计算器网页版-优快云博客

本文链接：https://blog.youkuaiyun.com/HongArcher/article/details/77914930

本文介绍了一个简单的网页版计算器实现方案，使用HTML、CSS和JavaScript构建。该计算器支持基本的四则运算，用户可以通过输入数字并选择运算符来完成计算。

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

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <input class="s1" type="text" name="" id="" />
       <select name="" id="">
                <option>+</option>
               <option>-</option>
               <option>*</option>
               <option>/</option>
       </select>
       <input class="s2" type="text" />
       <p>点击计算</p>
       <h1>结果是:</h1>
   </body>
   <script type="text/javascript">
       var s1 =document.getElementsByClassName('s1')[0];
       var s2 =document.getElementsByClassName('s2')[0];
       var btn=document.getElementsByTagName('p')[0];
       var fh=document.getElementsByTagName('select')[0];
       var result=document.getElementsByTagName('h1')[0];

       btn.onclick=function(){
           //获取两个参与计算的数字，并转化为number类型（因为input的value值为string，无法参与计算）
           var s11=Number(s1.value);
            var s22=Number(s2.value);

            //获取运算符
            var jieguo;
            switch(fh.value){
               case'+':
               jieguo=s11+s22;
               break;
               case'-':
               jieguo=s11-s22;
               break;
               case'*':
               jieguo=s11*s22;
               break;
               case'/':
               jieguo=s11/s22;
               break;
            }
           result.innerHTML='结果是:'+jieguo;
       }

   </script>
</html>

html计算机