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 相关文章推荐
javascript 精粹笔记
May 09 Javascript
Vue.js第四天学习笔记(组件)
Dec 02 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
Vue.js标签页组件使用方法详解
Oct 19 Javascript
在vue中实现嵌套页面(iframe)
Jul 30 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正则
2006/07/07 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php返回json数据函数实例
2014/10/09 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
JavaScript 继承机制的实现(待续)
2010/05/18 Javascript
LazyLoad 延迟加载(按需加载)
2010/05/31 Javascript
JS 表单验证大全
2011/11/23 Javascript
jquery入门—选择器实现隔行变色实例代码
2013/01/04 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
2013/05/15 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
QQ登录背景闪动效果附效果演示源码下载
2015/09/22 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
AngularJs bootstrap搭载前台框架——基础页面
2016/09/01 Javascript
微信小程序 参数传递详解
2016/10/24 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
React如何实现浏览器打印部分内容详析
2019/05/19 Javascript
决策树的python实现方法
2014/11/18 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python装饰器限制函数运行时间超时则退出执行
2019/04/09 Python
Python制作微信好友背景墙教程(附完整代码)
2019/07/17 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
使用 Supervisor 监控 Python3 进程方式
2019/12/05 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
局部内部类是否可以访问非final变量?
2013/04/20 面试题
一套C#面试题
2013/10/09 面试题
生产助理岗位职责
2014/06/18 职场文书
个人查摆剖析材料
2014/10/04 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
机关工会工作总结2015
2015/05/26 职场文书
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python