html计算机

来源：互联网发布：大数据营销医药公司编辑：程序博客网时间：2024/05/18 01:26

<!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>

阅读全文

0 0