javascript代码实现简易计算器


Posted in Javascript onJanuary 25, 2021

本文实例为大家分享了javascript实现简易计算器的具体代码,供大家参考,具体内容如下

编辑了几个小时研发了一个简易好理解的计算器。不停改Bug,终于改好了。

这是样式

javascript代码实现简易计算器

这是Css部分

<style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
</style>

这是HTML部分

<div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>
/* 定义两个标签来存放符号跟第一个值*/
 <input type="text" id="text1" style="display:none">
 <input type="text" id="per" style="display:none">

html部分的话就是吧所有数字定义为一个class名字,把所有运算符号定义为一个class 以及定义两个input来存放运算符

<script>
  lis = document.querySelectorAll("#box ul .num")//获取所有的数字
  opcr = document.querySelectorAll("#box ul .opcr")//获取运算符
  for (var i = 0; i < lis.length; i++) { //遍历所有的数字
   lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML)//点击input1显示
   }
  }
  //遍历所有的运算符
  for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//当存放第一个值为空时候
     text1.value = input1.value//存放第一个值
     input1.value = ""   //input框里的值为空
     per.value = this.innerHTML; //存放符号的值为空
    } else {
     text1.value = eval(text1.value + per.value + input1.value)//不是空的时候 计算
     per.value = this.innerHTML;//存放符号的值为点击的值
     input1.value = ""//input框里的值为空
    }
   }
  }
  //等于
  resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value)//计算里面的值
   per.value = "" //清空存放per的值
   text1.value = ""//input框里的值为空

  }
  //点击清空所有
  returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
</script>

完整部分

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>简易计算器</title>
 <style>
  #box {
   background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
   width: 500px;
   height: 420px;
   margin: auto;
   margin-top: 200px;
   position: relative;
  }

  .reckon {
   width: 280px;
   height: 200px;
   background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
   ;
   position: absolute;
   top: 100px;
   left: 100px;
   border: 5px solid #2a2b2c
  }

  #input1 {
   background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
   border: none;
   width: 220px;
   height: 8px;
   float: right;
   margin-top: 10px;
   margin-right: 20px;
   outline: none;
   padding: 10px
  }

  ul li {
   float: left;
   list-style: none;
   margin: 4px 2px;
   border-radius: 3px;
   background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
   box-shadow: 2px 2px #ccc;
   color: #fff;
   font-weight: "楷体";
   width: 50px;
   height: 30px;
   text-align: center;
   line-height: 30px;
  }

  ul {
   margin-top: 5px;
  }

  ul li:hover {
   opacity: 0.7;
  }
 </style>
</head>

<body>
 <div id="box">
  <div class="reckon" id="reckon">
   <input type="text" id="input1">
   <ul>
    <li class="num">7</li>
    <li class="num">8</li>
    <li class="num">9</li>
    <li class="opcr">+</li>

    <li class="num">4</li>
    <li class="num">5</li>
    <li class="num">6</li>
    <li class="opcr">- </li>

    <li class="num">1</li>
    <li class="num">2</li>
    <li class="num">3</li>
    <li class="opcr">*</li>

    <li class="num">0</li>
    <li id="returnZero">C</li>
    <li id="resule">=</li>
    <li class="opcr">/</li>
   </ul>
  </div>


 </div>

 <input type="text" id="text1" style="display:block">
 <input type="text" id="per" style="display:block">

 <script>
  lis = document.querySelectorAll("#box ul .num")//获取所有的数字
  opcr = document.querySelectorAll("#box ul .opcr")//获取+——*/
  for (var i = 0; i < lis.length; i++) { //遍历所有的数字
   lis[i].onclick = function () {
    input1.value += parseInt(this.innerHTML)//点击input1显示
   }
  }

  //遍历所有的+——*/
  for (let i = 0; i < opcr.length; i++) {
   opcr[i].onclick = function () {
    if (text1.value == "") {//当存放第一个值为空时候
     text1.value = input1.value//存放第一个值
     input1.value = ""   //input框里的值为空
     per.value = this.innerHTML; //存放符号的值为空
    } else {
     text1.value = eval(text1.value + per.value + input1.value)//不是空的时候 计算值
     per.value = this.innerHTML;//存放符号的值为点击的值
     input1.value = ""//input框里的值为空
    }
   }
  }
  //等于
  resule.onclick = function () {
   input1.value = eval(text1.value + per.value + input1.value)//计算里面的值
   per.value = "" //清空存放per的值
   text1.value = ""//input框里的值为空

  }
  //点击清空所有
  returnZero.onclick = function () {
   input1.value = ""
   per.value = ""
   text1.value = ""
  }
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Angularjs制作简单的路由功能demo
Apr 14 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
C++中的string类的用法小结
Aug 07 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
jQuery ajax调用后台aspx后台文件的两种常见方法(不是ashx)
Jun 28 Javascript
javascript中的后退和刷新实现方法
Nov 10 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
vue数据初始化initState的实例详解
Apr 11 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 #Javascript
JS中循环遍历数组的四种方式总结
Jan 23 #Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 #Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 #Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
You might like
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
PHP中定义数组常量(array常量)的方法
2014/11/17 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
Mac系统下Webstorm快捷键整理大全
2017/05/28 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
vue组件实现可搜索下拉框扩展
2020/10/23 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python列表生成器迭代器实例解析
2019/12/19 Python
python使用自定义钉钉机器人的示例代码
2020/06/24 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
四年级数学教学反思
2014/02/02 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
场地使用证明模板
2014/10/25 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
Java 数组内置函数toArray详解
2021/06/28 Java/Android
Python实现灰色关联分析与结果可视化的详细代码
2022/03/25 Python
Python绘制散乱的点构成的图的方法
2022/04/21 Python