JavaScript
搜索
分类

javascript代码实现简易计算器

作者：Hope° 时间：2024-04-16 08:57:46　

本文实例为大家分享了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>

来源：https://blog.csdn.net/m0_52773472/article/details/109909622

标签：js,计算器
0
投稿

猜你喜欢

  • 修改新云CMS底部版权信息字数限制

    2008-07-31 18:00:00

  • Python简单基础小程序的实例代码

    2021-03-29 21:17:59

  • pytorch torchvision.ImageFolder的用法介绍

    2023-05-29 17:20:49

  • 深入探讨:PHP使用数据库永久连接方式操作MySQL的是与非

    2023-11-20 22:41:16

  • 让Python代码更快运行的5种方法

    2023-08-25 08:35:15

  • pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换

    2023-08-12 07:44:34

  • 详解Python爬取并下载《电影天堂》3千多部电影

    2023-07-07 23:48:24

  • mysql中从字段中URL提取域名信息

    2009-05-25 10:35:00

  • Php中用PDO查询Mysql来避免SQL注入风险的方法

    2023-07-18 06:37:42

  • Python在线和离线安装第三方库的方法

    2023-08-24 19:37:11

  • 如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)

    2023-07-02 17:08:10

  • flask中过滤器的使用详解

    2023-03-01 16:00:55

  • 如何使用django的MTV开发模式返回一个网页

    2023-07-04 21:47:06

  • 聊聊Python代码中if __name__ == ‘__main__‘的作用是什么

    2022-05-10 18:06:44

  • python编程开发时间序列calendar模块示例详解

    2023-04-25 14:59:19

  • 对django views中 request, response的常用操作详解

    2021-02-21 15:00:51

  • python实现感知器

    2021-03-18 09:12:13

  • MySQL的Query Cache原理分析

    2024-01-25 05:20:29

  • anaconda创建、查看、激活与删除虚拟环境指令总结

    2023-04-09 13:01:23

  • Google的设计导引

    2008-04-06 14:18:00
    • asp之家 网络编程 m.aspxhome.com