• 售前

  • 售后

热门帖子
入门百科

javascript代码实现浅易盘算器

[复制链接]
哈哈小强呀 显示全部楼层 发表于 2021-10-25 19:23:05 |阅读模式 打印 上一主题 下一主题
本文实例为各人分享了javascript实现简易计算器的具体代码,供各人参考,具体内容如下
编辑了几个小时研发了一个简易好理解的计算器。不停改Bug,终于改好了。
这是样式

这是Css部门
  1. <style>
  2.   #box {
  3.    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  4.    width: 500px;
  5.    height: 420px;
  6.    margin: auto;
  7.    margin-top: 200px;
  8.    position: relative;
  9.   }
  10.   .reckon {
  11.    width: 280px;
  12.    height: 200px;
  13.    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  14.    ;
  15.    position: absolute;
  16.    top: 100px;
  17.    left: 100px;
  18.    border: 5px solid #2a2b2c
  19.   }
  20.   #input1 {
  21.    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  22.    border: none;
  23.    width: 220px;
  24.    height: 8px;
  25.    float: right;
  26.    margin-top: 10px;
  27.    margin-right: 20px;
  28.    outline: none;
  29.    padding: 10px
  30.   }
  31.   ul li {
  32.    float: left;
  33.    list-style: none;
  34.    margin: 4px 2px;
  35.    border-radius: 3px;
  36.    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  37.    box-shadow: 2px 2px #ccc;
  38.    color: #fff;
  39.    font-weight: "楷体";
  40.    width: 50px;
  41.    height: 30px;
  42.    text-align: center;
  43.    line-height: 30px;
  44.   }
  45.   ul {
  46.    margin-top: 5px;
  47.   }
  48.   ul li:hover {
  49.    opacity: 0.7;
  50.   }
  51. </style>
复制代码
这是HTML部门
  1. <div id="box">
  2.   <div class="reckon" id="reckon">
  3.    <input type="text" id="input1">
  4.    <ul>
  5.     <li class="num">7</li>
  6.     <li class="num">8</li>
  7.     <li class="num">9</li>
  8.     <li class="opcr">+</li>
  9.     <li class="num">4</li>
  10.     <li class="num">5</li>
  11.     <li class="num">6</li>
  12.     <li class="opcr">- </li>
  13.     <li class="num">1</li>
  14.     <li class="num">2</li>
  15.     <li class="num">3</li>
  16.     <li class="opcr">*</li>
  17.     <li class="num">0</li>
  18.     <li id="returnZero">C</li>
  19.     <li id="resule">=</li>
  20.     <li class="opcr">/</li>
  21.    </ul>
  22.   </div>
  23. </div>
  24. /* 定义两个标签来存放符号跟第一个值*/
  25. <input type="text" id="text1" style="display:none">
  26. <input type="text" id="per" style="display:none">
复制代码
html部门的话就是吧全部数字定义为一个class名字,把全部运算符号定义为一个class 以及定义两个input来存放运算符
  1. <script>
  2.   lis = document.querySelectorAll("#box ul .num")//获取所有的数字
  3.   opcr = document.querySelectorAll("#box ul .opcr")//获取运算符
  4.   for (var i = 0; i < lis.length; i++) { //遍历所有的数字
  5.    lis[i].onclick = function () {
  6.     input1.value += parseInt(this.innerHTML)//点击input1显示
  7.    }
  8.   }
  9.   //遍历所有的运算符
  10.   for (let i = 0; i < opcr.length; i++) {
  11.    opcr[i].onclick = function () {
  12.     if (text1.value == "") {//当存放第一个值为空时候
  13.      text1.value = input1.value//存放第一个值
  14.      input1.value = ""   //input框里的值为空
  15.      per.value = this.innerHTML; //存放符号的值为空
  16.     } else {
  17.      text1.value = eval(text1.value + per.value + input1.value)//不是空的时候 计算
  18.      per.value = this.innerHTML;//存放符号的值为点击的值
  19.      input1.value = ""//input框里的值为空
  20.     }
  21.    }
  22.   }
  23.   //等于
  24.   resule.onclick = function () {
  25.    input1.value = eval(text1.value + per.value + input1.value)//计算里面的值
  26.    per.value = "" //清空存放per的值
  27.    text1.value = ""//input框里的值为空
  28.   }
  29.   //点击清空所有
  30.   returnZero.onclick = function () {
  31.    input1.value = ""
  32.    per.value = ""
  33.    text1.value = ""
  34.   }
  35. </script>
复制代码
完备部门
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>简易计算器</title>
  8. <style>
  9.   #box {
  10.    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
  11.    width: 500px;
  12.    height: 420px;
  13.    margin: auto;
  14.    margin-top: 200px;
  15.    position: relative;
  16.   }
  17.   .reckon {
  18.    width: 280px;
  19.    height: 200px;
  20.    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
  21.    ;
  22.    position: absolute;
  23.    top: 100px;
  24.    left: 100px;
  25.    border: 5px solid #2a2b2c
  26.   }
  27.   #input1 {
  28.    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
  29.    border: none;
  30.    width: 220px;
  31.    height: 8px;
  32.    float: right;
  33.    margin-top: 10px;
  34.    margin-right: 20px;
  35.    outline: none;
  36.    padding: 10px
  37.   }
  38.   ul li {
  39.    float: left;
  40.    list-style: none;
  41.    margin: 4px 2px;
  42.    border-radius: 3px;
  43.    background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  44.    box-shadow: 2px 2px #ccc;
  45.    color: #fff;
  46.    font-weight: "楷体";
  47.    width: 50px;
  48.    height: 30px;
  49.    text-align: center;
  50.    line-height: 30px;
  51.   }
  52.   ul {
  53.    margin-top: 5px;
  54.   }
  55.   ul li:hover {
  56.    opacity: 0.7;
  57.   }
  58. </style>
  59. </head>
  60. <body>
  61. <div id="box">
  62.   <div class="reckon" id="reckon">
  63.    <input type="text" id="input1">
  64.    <ul>
  65.     <li class="num">7</li>
  66.     <li class="num">8</li>
  67.     <li class="num">9</li>
  68.     <li class="opcr">+</li>
  69.     <li class="num">4</li>
  70.     <li class="num">5</li>
  71.     <li class="num">6</li>
  72.     <li class="opcr">- </li>
  73.     <li class="num">1</li>
  74.     <li class="num">2</li>
  75.     <li class="num">3</li>
  76.     <li class="opcr">*</li>
  77.     <li class="num">0</li>
  78.     <li id="returnZero">C</li>
  79.     <li id="resule">=</li>
  80.     <li class="opcr">/</li>
  81.    </ul>
  82.   </div>
  83. </div>
  84. <input type="text" id="text1" style="display:block">
  85. <input type="text" id="per" style="display:block">
  86. <script>
  87.   lis = document.querySelectorAll("#box ul .num")//获取所有的数字
  88.   opcr = document.querySelectorAll("#box ul .opcr")//获取+——*/
  89.   for (var i = 0; i < lis.length; i++) { //遍历所有的数字
  90.    lis[i].onclick = function () {
  91.     input1.value += parseInt(this.innerHTML)//点击input1显示
  92.    }
  93.   }
  94.   //遍历所有的+——*/
  95.   for (let i = 0; i < opcr.length; i++) {
  96.    opcr[i].onclick = function () {
  97.     if (text1.value == "") {//当存放第一个值为空时候
  98.      text1.value = input1.value//存放第一个值
  99.      input1.value = ""   //input框里的值为空
  100.      per.value = this.innerHTML; //存放符号的值为空
  101.     } else {
  102.      text1.value = eval(text1.value + per.value + input1.value)//不是空的时候 计算值
  103.      per.value = this.innerHTML;//存放符号的值为点击的值
  104.      input1.value = ""//input框里的值为空
  105.     }
  106.    }
  107.   }
  108.   //等于
  109.   resule.onclick = function () {
  110.    input1.value = eval(text1.value + per.value + input1.value)//计算里面的值
  111.    per.value = "" //清空存放per的值
  112.    text1.value = ""//input框里的值为空
  113.   }
  114.   //点击清空所有
  115.   returnZero.onclick = function () {
  116.    input1.value = ""
  117.    per.value = ""
  118.    text1.value = ""
  119.   }
  120. </script>
  121. </body>
  122. </html>
复制代码
以上就是本文的全部内容,希望对各人的学习有所帮助,也希望各人多多支持草根技术分享。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作