首页
所有分类
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 相关文章推荐
使用Javascript接收get传递的值的代码
Nov 30 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript事件学习小结（三）js事件对象
Jun 09 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
JavaScript函数基础详解
Feb 03 Javascript
JS实现的模仿QQ头像资料卡显示与隐藏效果
Apr 07 Javascript
原生js FileReader对象实现图片上传本地预览效果
Mar 27 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
JS数组及对象遍历方法代码汇总
Jun 16 Javascript
JavaScript实现优先级队列
Dec 06 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
巫师(1) 战锤40K(1) LOL(1) 东方异文石(1) 暴雪(1) 我的世界(1) 艾尔登法环(1) 小缇娜的奇幻之地(1) 绿林侠盗(1) 遗弃(1)
You might like
PHP新手上路（十四）
2006/10/09 PHP
php压缩HTML函数轻松实现压缩html/js/Css及注意事项
2013/01/27 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php版微信返回用户text输入的方法
2016/11/14 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP代码覆盖率统计详解
2020/07/22 PHP
dropdownlist之间的互相联动实现（显示与隐藏）
2009/11/24 Javascript
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
纯js实现背景图片切换效果代码
2010/11/14 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
使用JS画图之点、线、面
2015/01/12 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
avalonjs制作响应式瀑布流特效
2015/05/06 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
AngularJS入门教程之控制器详解
2016/07/27 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
bootstrap switch开关组件使用方法详解
2017/08/22 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
jQuery zTree插件快速实现目录树
2019/08/16 jQuery
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
微信小程序学习总结（二）样式、属性、模板操作分析
2020/06/04 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
python赋值操作方法分享
2013/03/23 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
Django框架模板注入操作示例【变量传递到模板】
2018/12/19 Python
利用python清除移动硬盘中的临时文件
2020/10/28 Python
阿尔卡特（中国）的面试题目
2014/08/20 面试题
白酒业务员岗位职责
2013/12/27 职场文书
专家推荐信模板
2014/05/09 职场文书
网络安全倡议书（3篇）
2019/09/18 职场文书