javascript代码实现简易计算器
作者：Hope° 发布时间：2024-04-16 08:57:46
标签：js,计算器
本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下
编辑了几个小时研发了一个简易好理解的计算器。不停改Bug，终于改好了。
这是样式
这是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
0
投稿猜你喜欢
- 本文实例讲述了Python装饰器decorator用法。分享给大家供大家参考。具体分析如下：1. 闭包（closure）闭包是Python所
- oracle wm_concat(column)函数使我们经常会使用到的，下面就教您如何使用oracle wm_concat(column)
爬虫：一段自动抓取互联网信息的程序，从互联网上抓取对于我们有价值的信息，一般来说，Python爬虫程序很多时候都要使用（飞猪IP）代理的IP- 保存Python程序，可以使用以下方法：使用编辑器编写代码并保存1、打开Notepad++2、需要新建文本时，点击左上角”文本“，在弹出的菜
- 1、标识符与关键字在了解数据类型之前，先了解一下go的标识符和关键字1.1 标识符在编程语言中标识符就是定义的具有某种意义的词，比如变量名、
- 本文实例为大家分享CentOS 7.2 Yum安装mysql5.6的方法，供大家参考，具体内容如下配置CentOS SCLo源[3] 添加
- 今天学习php，当然是要先安装好运行环境了，phpstyudy是一个运行php的集成环境， 一键安装对新手很友好，与时作为一个新手，便跟着教
- 概述很多人接触Python，都是从爬虫开始，其实很多语言都可以做爬虫，只是Python相对其他语言来说，更加简单而已。但是Python并不止
- 〝 古人学问遗无力，少壮功夫老始成 〞python之tkinter库弹窗messagebox，常码字不易，出精品更难，没有特别幸运，那么请先
- 1 写在前面前期一篇文章Python TensorFlow深度学习回归代码：DNNRegressor详细介绍了基于TensorFlow&nb
- 最近，我在做网页的时候，经理老是反应网页中一些栏目中没有背景图片。我说：背景图片有的，你刷新看看。但是他说：我可以刷新看看，但是你不能老是让
- 我们知道在国内使用 Docker，无论是 Pull、Build 还是 Push 镜像都十分慢，因为毕竟很多源都是国外的源，下载和上传慢是必然
- 本文转自微信公众号："算法与编程之美"，一、问题描述在collections模块中的defauldict使用时与dict
- 写在前面的话🪐学了Python一些基础知识之后,相信大家对Python使用方法有了一定的感悟,想要追求深层次的东西还要细细的学、慢慢的学。P
- 概述：CentOS 6.4下通过yum安装的MySQL是5.1版的，比较老，所以就想通过源代码安装高版本的5.6.14。正文：一、卸载旧版本
- Create a Simple API Using Django REST Framework in PythonWHAT IS AN AP
- 目录技术背景python对Excel表格的处理vaex的安装与使用vaex的安装性能对比数据格式转换总结概要技术背景数据处理是一个当下非常热
- 在《 详解Python拼接字符串的七种方式 》这篇文章里，我提到过，字符串是程序员离不开的事情。后来，我看到了一个英文版本的说法：There
- KNN算法算是最简单的机器学习算法之一了，这个算法最大的特点是没有训练过程，是一种懒惰学习，这种结构也可以在tensorflow实现。KNN
- 问题描述 windows错误安装方法：pip3 install numpy这种情况下虽然安装成功，但是在import numpy时会出现如下
