devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于js+css的计算器_用css和js做带有根号,回退,删除能计算的计算器

作者：IT小白 | 2024-02-29 05:16:21

赞

踩

用css和js做带有根号,回退,删除能计算的计算器

 html代码部分

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8" />
  5. 		<title>计算器</title>
  6. 		<link rel="stylesheet" href="css/计算器.css" />
  7. 	</head>
  8. 	<body>
  9. 		 <!-- 第一行输入框 -->
  10. 		
  11.          <!-- 六行行四列 -->
  12.          <table style="border: 1 px solid red;">
  13.          <tr>
  14.          	<td colspan="4"><input  id="text" type="text" /></td>
  15.          </tr> 
  16.          <tr>
  17.          	<td><button class="btn">AC</button></td>
  18.          	<td><button class="btn">/</button></td>
  19.            <td><button class="btn">*</button></td>
  20.            <td><button class="btn">←</button></td>
  21. 	    </tr>
  22. 	    <tr>
  23. 	        <td><button class="btn">9</button></td>
  24. 	        <td><button class="btn">8</button></td>
  25. 	        <td><button class="btn">7</button></td>
  26. 	        <td><button class="btn">-</button></td>
  27. 	    </tr>
  28. 	    <tr>
  29. 	        <td><button class="btn">6</button></td>
  30. 	        <td><button class="btn">5</button></td>
  31. 	        <td><button class="btn">4</button></td>
  32. 	        <td><button class="btn">+</button></td>
  33. 	    </tr>
  34. 	    <tr>
  35. 	        <td><button class="btn">3</button></td>
  36. 	        <td><button class="btn">2</button></td>
  37. 	        <td><button class="btn">1</button></td>
  38. 	        <td rowspan="2"><button class="btn" id="d">=</button></td>
  39. 	    </tr>
  40. 	    <tr>
  41. 	        <td colspan="2"><button class="btn">0</button></td>
  42. 	        <td><button class="btn">.</button></td>
  43. 	    </tr>
  44.         </table>
  45.     <script>
  46.     //获取按钮
  47.     var buttonal=document.getElementsByClassName ("btn");
  48.     var textal=document.getElementById("text");
  49.     var res=[];  //定义一个数组存储输入的值
  50.     var flag=false;
  51.     for(var i=0;i<buttonal.length;i++){
  52.         buttonal [i].onclick=addclick;
  53.         function addclick(){
  54.             //输入为数字或者为“.”
  55.             if(!isNaN(this.innerHTML) || this.innerHTML=="."){
  56.                 //文本框初值不为0
  57.                 flag = true;
  58.                 if(textal.value!== "0"){
  59.                     //文本框中含有“.”
  60.                     if(textal.value.indexOf(".")!==-1){
  61.                         //处理点重复的问题   文本框里面有点 不上去点（用户按的数字 得加  用户按的是点 不加）
  62.                         //输入"."时
  63.                         if(this.innerHTML!== "."){
  64.                             textal.value+=this.innerHTML;
  65.                         }
  66.                     }
  67.                     else{
  68.                         textal.value+=this.innerHTML;
  69.                     }
  70.                 }
  71.                 //文本框初值为0
  72.                 else{
  73.                   if(this.innerHTML =="."){
  74.                       textal.value="0"+this.innerHTML ;
  75.                   }
  76.                   else{
  77.                       textal.value=this.innerHTML;
  78.                   }
  79.                 }
  80.             }
  81.             //非数字
  82.             else{
  83.               switch(this.innerHTML ) {
  84.                   case "+" :save(this);
  85.                             break;
  86.                   case "-" :save(this);
  87.                             break;
  88.                   case "/" :save(this);
  89.                             break;
  90.                   case "*" :
  91.                             save(this);
  92.                             break;
  93.                   case "=":
  94.                             res.push(textal.value);
  95.                             var result=eval(res.join(""));
  96.                             if(result =="Infinity"){
  97.                              remove_add ("remove");
  98.                             }
  99.                             textal.value=result==Infinity?"除数不能为零":result;
  100.                             res=[];
  101.                             break;
  102.                   case "←":
  103.                             //从后往前一个一个的减数字  substr(start,count)
  104.                              textal.value = textal.value.length==1 ? "0":textal.value.substr(0,textal.value.length-1);
  105.                              break;
  106.                   case "AC":
  107.                             textal.value="";
  108.                             res=[];
  109.                             remove_add("add");
  110.                             break;
  111.               }
  112.             }
  113.         }
  114.     }
  115.     function save(mini){
  116.         //清屏之前存储用户按的值
  117.        // 确认一个条件  用户是连续按符号  还是数字+符号
  118.         if(!flag){ //连续两次按符号时
  119.             res[res.length-1]=mini.innerHTML ;  //第二次按的符号替代第一次的
  120.         }
  121.         else{
  122.             res.push(textal.value );
  123.             res.push(mini.innerHTML);
  124.         }
  125.         textal.value="";
  126.         flag=false;
  127.     }
  128.  
  129.     //卸载除AC以外的所有元素的事件
  130.      function remove_add(p){
  131.          for(var i=0;i<buttonal.length;i++){
  132.             if(p == "add"){
  133.                 buttonal[i].onclick = addclick;
  134.             }
  135.             else{
  136.                 if(buttonal[i].innerHTML!="AC"){
  137.                     buttonal[i].onclick = null;
  138.                 }
  139.             }
  140.          }
  141.      }
  142. </script>
  143. 	</body>
  144. </html>

css代码部分

  1. *{
  2.             padding:0;
  3.             margin:0;
  4.         }
  5.  table{
  6.     width:400px;
  7.     margin:auto;
  8.     border:1px solid silver;
  9.     border-collapse: collapse;/*列与列的间距*/
  10. }
  11. td {
  12.    width: 100px;
  13.    border: 1px solid #525252;
  14.  
  15. }
  16. td input{
  17.     width:98.7%;
  18.     height:60px;
  19.     outline: none;
  20.     text-align: right;
  21.     font-size: 20px;
  22.     background: white;
  23. }
  24. td button{
  25.     width:100%;
  26.     height:60px;
  27.     font-size: 22px;
  28.     background: rgba(223, 255, 243, 0.81);
  29. }
  30. #d{
  31. 	width:100%;
  32.     height:120px;
  33.     font-size: 22px;
  34.     background: rgba(223, 255, 243, 0.81);
  35. }

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号