首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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代码实现简易计算器

- Author -

Hope°

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
Dec 02 Javascript
对象题目的一个坑 理解Javascript对象
Dec 22 Javascript
jQuery简单动画变换效果实例分析
Jul 04 Javascript
使用vue.js实现联动效果的示例代码
Jan 10 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
JS如何定义用字符串拼接的变量
Jul 11 Javascript
ant design vue 表格table 默认勾选几项的操作
Oct 31 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
python-pcl(1) 遍历文件夹(1) key(1) 有序排列(1) Anaconda(2) pycryto(1) kafka(2) shell脚本(1) 数据加密(1) 公共键(1)
You might like
PHP的SQL注入实现(测试代码安全不错)
2011/02/27 PHP
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php file_get_contents抓取Gzip网页乱码的三种解决方法
2013/11/12 PHP
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php while循环控制的简单实例
2016/05/30 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
php使用PDO下exec()函数查询执行后受影响行数的方法
2017/03/28 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
js 编写规范
2010/03/03 Javascript
Cookie 小记
2010/04/01 Javascript
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
jquery 插件开发 extjs中的extend用法小结
2013/01/04 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
tangram框架响应式加载图片方法
2013/11/21 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
jquery实现弹出层效果实例
2015/05/19 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
es6中的解构赋值、扩展运算符和rest参数使用详解
2017/09/28 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
关于vue的语法规则检测报错问题的解决
2018/05/21 Javascript
Python实现的递归神经网络简单示例
2017/08/11 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
HTML5 Canvas绘制五星红旗
2016/05/04 HTML / CSS
MySQL面试题
2014/01/12 面试题
道德之星事迹材料
2014/05/03 职场文书
教师教育教学随笔
2015/08/15 职场文书
大学生各类奖学金申请书
2019/06/24 职场文书
详细了解MVC+proxy
2021/07/09 Java/Android