devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML+CSS+JS制作一个科学计算器_计算器的html和css

作者：凡人多烦事01 | 2024-02-29 05:18:25

赞

踩

计算器的html和css

可以实现基本的加减乘除，三角函数，对数，指数，阶乘，开根号，实现效果如下图：

 1.HTML代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>Document</title>
  9.     <link rel="stylesheet" href="style.css">
  10.     <script src="index.js"></script>
  11. </head>
  12.  
  13. <body>
  14.     <div id="calculator">
  15.         <div id="input">
  16.             <input type="text" id="Screen" name="Screen" class="screen" value="" readonly>
  17.         </div>
  18.         <div id="keys">
  19.             <input type="button" id="square" onclick="square()" value="x^2" />
  20.             <input type="button" id="cube" onclick="cube()" value="x^3" />
  21.             <input type="button" id="^" onclick="cal(this.id)" value="^" />
  22.             <input type="button" id="factorial" onclick="factorial()" value="n!" />
  23.  
  24.             <input type="button" id="sin" onclick="sin()" value="sin" />
  25.             <input type="button" id="cos" onclick="cos()" value="cos" />
  26.             <input type="button" id="tan" onclick="tan()" value="tan" />
  27.             <input type="button" id="log" onclick="log()" value="log" />
  28.  
  29.             <input type="button" id="sqrt" onclick="sqrt()" value="√" />
  30.             <input type="button" id="cbrt" onclick="cbrt()" value="³√" />
  31.             <input type="button" id="Back" onclick="back()" value="Back" />
  32.             <input type="button" id="C" onclick="clearNum()" value="CE" />
  33.  
  34.             <input type="button" id="7" onclick="cal(this.id)" value="7" />
  35.             <input type="button" id="8" onclick="cal(this.id)" value="8" />
  36.             <input type="button" id="9" onclick="cal(this.id)" value="9" />
  37.             <input type="button" id="/" onclick="cal(this.id)" value="/" />
  38.  
  39.             <input type="button" id="4" onclick="cal(this.id)" value="4" />
  40.             <input type="button" id="5" onclick="cal(this.id)" value="5" />
  41.             <input type="button" id="6" onclick="cal(this.id)" value="6" />
  42.             <input type="button" id="*" onclick="cal(this.id)" value="*" />
  43.  
  44.             <input type="button" id="1" onclick="cal(this.id)" value="1" />
  45.             <input type="button" id="2" onclick="cal(this.id)" value="2" />
  46.             <input type="button" id="3" onclick="cal(this.id)" value="3" />
  47.             <input type="button" id="-" onclick="cal(this.id)" value="-" />
  48.  
  49.             <input type="button" id="." onclick="cal(this.id)" value="." />
  50.             <input type="button" id="0" onclick="cal(this.id)" value="0" />
  51.             <input type="button" id="=" onclick="equal()" value="=" />
  52.             <input type="button" id="+" onclick="cal(this.id)" value="+" />
  53.         </div>
  54. </body>
  55.  
  56. </html>

2.CSS代码

  1. #calculator {
  2.     background-color: #eeeeee;
  3.     border: 1px solid gray;
  4.     margin: 30px auto;
  5.     width: 300px;
  6.     height: 430px;
  7.     padding: 15px;
  8. }
  9.  
  10. .screen {
  11.     width: 284px;
  12.     height: 40px;
  13.     background-color: #fcfdea;
  14.     box-shadow: 2px 3px 3px rgb(181, 187, 181) inset;
  15.     border-radius: 4px;
  16.     text-align: right;
  17.     padding-right: 10px;
  18.     font-size: 20px;
  19.     margin-top: 5px;
  20.     border: none;
  21.     outline: 1px solid rgb(136, 127, 127);
  22.     transition: all .1s;
  23. }
  24.  
  25. .screen:hover,.screen:focus{
  26.     outline: 1px solid rgb(65, 60, 60);
  27. }
  28.  
  29. #keys {
  30.     height: 350px;
  31.     margin-top: 25px;
  32. }
  33.  
  34. input[type="button"] {
  35.     float: left;
  36.     width: 75px;
  37.     height: 50px;
  38.     text-align: center;
  39.     background-color: #a6acb86c;
  40.     cursor: pointer;
  41. }
  42.  
  43. input[type="button"]:hover{
  44.     background-color: #a6acb8;
  45. }

3.JS代码（重头戏）

  1. function cal(num) {
  2.     var n = document.getElementById(num)
  3.     if (n === null) return
  4.     document.getElementById("Screen").value += n.value;
  5. }
  6.  
  7. var flag = true;
  8. function equal() {
  9.     var value = document.getElementById("Screen").value
  10.     if (value.indexOf('^') != -1) {
  11.         value = this.pow(value, value.indexOf('^'))
  12.     }
  13.     // 点击'='切换分数/小数
  14.     if (!flag) {
  15.         document.getElementById("Screen").value = this.decimalToFractional(eval(value))
  16.         flag = true
  17.     } else {
  18.         document.getElementById("Screen").value = eval(value)
  19.         flag = false
  20.     }
  21. }
  22.  
  23. function back() {
  24.     var n = document.getElementById("Screen");
  25.     n.value = n.value.substring(0, n.value.length - 1);
  26. }
  27.  
  28. function clearNum() {
  29.     document.getElementById("Screen").value = "";
  30. }
  31.  
  32. function sin() {
  33.     document.getElementById("Screen").value = Math.sin(document.getElementById("Screen").value);
  34. }
  35. function cos() {
  36.     document.getElementById("Screen").value = Math.cos(document.getElementById("Screen").value);
  37. }
  38. function tan() {
  39.     document.getElementById("Screen").value = Math.tan(document.getElementById("Screen").value);
  40. }
  41. function log() {
  42.     document.getElementById("Screen").value = Math.log(document.getElementById("Screen").value);
  43. }
  44. function sqrt() {
  45.     document.getElementById("Screen").value = Math.sqrt(document.getElementById("Screen").value);
  46. }
  47. function cbrt() {
  48.     document.getElementById("Screen").value = Math.cbrt(document.getElementById("Screen").value)
  49. }
  50. function square() {
  51.     document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 2);
  52. }
  53. function cube() {
  54.     document.getElementById("Screen").value = Math.pow(document.getElementById("Screen").value, 3);
  55. }
  56. function pow(value, pos) {
  57.     if (pos != -1) {
  58.         let arr = value.split("")
  59.         let powVal = Math.pow(arr[pos - 1], arr[pos + 1])
  60.         arr.splice(pos - 1, 3, powVal)
  61.         value = arr.join("")
  62.         return value
  63.     }
  64. }
  65.  
  66. // 阶乘
  67. function factorial() {
  68.     function func(num) {
  69.         if (num == 1) {
  70.             console.log(1);
  71.             return 1;
  72.         } else if (num == 0) {
  73.             console.log(0);
  74.             return 1;
  75.         } else {
  76.             return num * func(num - 1)
  77.         }
  78.     }
  79.     document.getElementById("Screen").value = func(document.getElementById("Screen").value)
  80. }
  81.  
  82. // 小数化为分数
  83. function decimalToFractional(decimal) {
  84.     if (decimal % 1 === 0) {
  85.         return decimal
  86.     }
  87.     const formatDecimal = decimal.toFixed(2)
  88.     let denominator = 100
  89.     let numerator = formatDecimal * 100
  90.     let bigger = 0
  91.     function recursion() {
  92.         bigger = denominator > numerator ? denominator : numerator
  93.         for (let i = bigger; i > 1; i--) {
  94.             if (
  95.                 Number.isInteger(numerator / i) && Number.isInteger(denominator / i)) {
  96.                 numerator = numerator / i
  97.                 denominator = denominator / i
  98.                 recursion()
  99.             }
  100.         }
  101.     }
  102.     recursion()
  103.     return `${numerator} / ${denominator}`
  104. }

这里因为按钮用的是input:button，而在实现指数运算（pow(a,b)）时分别需要上一次的输入和下一次的输入，而js获取下一次的输入实现起来比较麻烦，所以为指数运算的按钮(^)并没有直接绑定实现指数运算的方法，而是绑定的cal(this.id)，将指数运算保存起来，在按下“=”时再调用实现指数运算的方法。

在点击“=”得到运算结果后，还可以再次点击“=”，将小数转换为分数（小数为2位精度）。

  1. function equal() {
  2.     var value = document.getElementById("Screen").value
  3.     if (value.indexOf('^') != -1) {
  4.         value = this.pow(value, value.indexOf('^'))
  5.     }
  6.     // 点击'='切换分数/小数
  7.     if (!flag) {
  8.         document.getElementById("Screen").value = this.decimalToFractional(eval(value))
  9.         flag = true
  10.     } else {
  11.         document.getElementById("Screen").value = eval(value)
  12.         flag = false
  13.     }
  14. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/凡人多烦事01/article/detail/163843?site
推荐阅读
相关标签

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

  

闽ICP备14008679号