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 相关文章推荐
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
Oct 21 Javascript
from 表单提交返回值用post或者是get方法实现
Aug 21 Javascript
Jquery 例外被抛出且未被接住原因介绍
Sep 04 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
基于jQuery实现简单的折叠菜单效果
Nov 23 Javascript
简单总结JavaScript中的String字符串类型
May 26 Javascript
Javascript实现页面滚动时导航智能定位
May 06 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
原生js+canvas实现验证码
Nov 29 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
Search Engine Friendly的URL设计
2006/10/09 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
2009/08/24 Javascript
基于jquery的多功能软键盘插件
2012/07/25 Javascript
防止xss和sql注入:JS特殊字符过滤正则
2013/04/18 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
JS动态创建元素的两种方法
2016/04/20 Javascript
浅析jQuery 3.0中的Data
2016/06/14 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
2016/10/28 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
微信小程序个人中心的列表控件实现代码
2020/04/26 Javascript
[02:39]我与DAC之Newbee.Moogy:从论坛到TI
2018/03/26 DOTA
python判断计算机是否有网络连接的实例
2018/12/15 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
解决TensorFlow程序无限制占用GPU的方法
2020/06/30 Python
英国著名国际平价时尚男装品牌:Topman
2016/08/27 全球购物
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
巴西美妆购物网站:Kutiz Beauté
2019/03/13 全球购物
亲子读书活动方案
2014/02/22 职场文书
党的群众路线教育实践活动自我剖析材料
2014/10/08 职场文书
大雁塔导游词
2015/02/04 职场文书
结婚司仪主持词
2015/06/29 职场文书
python保存图片的四个常用方法
2022/02/28 Python
Java中API的使用方法详情
2022/04/06 Java/Android
MySQL慢查询中的commit慢和binlog中慢事务的区别
2022/06/16 MySQL
JavaScript原型链中函数和对象的理解
2022/06/16 Javascript