用JS HTML CSS 实现简单计算器的制作
Posted 李欣没有梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用JS HTML CSS 实现简单计算器的制作相关的知识，希望对你有一定的参考价值。
html部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calculate</title>
<link rel="stylesheet" href="calculate.css">
<link rel="stylesheet" href="calculate.js">
</head>
<body>
<div class="box">
<!--大框框-->
<div class="input">
<!--输入框-->
<div class="tip">
<!--小点点-->
<div class="tip1"></div>
<div class="tip2"></div>
<div class="tip3"></div>
</div>
<div>
<!--输入数字框-->
<!--结果显示框-->
<input type="text" class="input_box" id="number">
</div>
</div>
<div id="ac">
<!--功能区域-->
<div class="AC">
<ul>
<li οnclick="deletes()">AC</li>
</ul>
</div>
<div class="AC">
<ul>
<li οnclick="just()">+/-</li>
</ul>
</div>
<div class="AC">
<ul>
<li οnclick="input('%')">%</li>
</ul>
</div>
<div class="orange">
<ul>
<li οnclick="input('/')">÷</li>
</ul>
</div>
</div>
<div id="ac">
<!--功能区域-->
<div class="BC">
<ul>
<li οnclick="input('7')">7</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('8')">8</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('9')">9</li>
</ul>
</div>
<div class="orange">
<ul>
<li οnclick="input('*')">×</li>
</ul>
</div>
</div>
<div id="ac">
<!--功能区域-->
<div class="BC">
<ul>
<li οnclick="input('4')">4</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('5')">5</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('6')">6</li>
</ul>
</div>
<div class="orange">
<ul>
<li οnclick="input('-')">-</li>
</ul>
</div>
</div>
<div id="ac">
<!--功能区域-->
<div class="BC">
<ul>
<li οnclick="input('1')">1</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('2')">2</li>
</ul>
</div>
<div class="BC">
<ul>
<li οnclick="input('3')">3</li>
</ul>
</div>
<div class="orange">
<ul>
<li οnclick="input('+')">+</li>
</ul>
</div>
</div>
<div class="bottom">
<div class="CD">
<ul>
<li οnclick="input('0')" class="CD_li">0</li>
</ul>
</div>
<div class="bottom_tip">
<ul>
<li οnclick="input('.')" class="CD_li">.</li>
</ul>
</div>
<div class="bottom_orange">
<ul>
<li οnclick="output('=')">=</li>
</ul>
</div>
</div>
</div>
<script src="calculate.js"></script>
</body>
</html>
CSS部分：
*
padding: 0;
margin: 0;
list-style: none;
*
user-select: none;
.hover
opacity: 0.8;
.box
width: 480px;
height: 570px;
border-radius: 20px;
border: 3px solid black;
position: relative;
justify-content: center;
margin: 150px auto;
background-color: #010101;
.input
width:460px;
height: 120px;
background-color: black;
border-top-left-radius:15px ;
border-top-right-radius:15px;
.input_box
width: 100%;
font-size: 80px;
color: aliceblue;
float: right;
background-color:#010101;
text-align: right;
height: 88px;
border: 0;
.tip
display: flex;
.tip1
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
background-color: red;
margin: 5px;
display: block;
.tip2
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
background-color:yellow;
display: block;
margin: 5px;
.tip3
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
background-color:green;
display: block;
margin: 5px;
.input_number
color: aliceblue;
font-weight: bold;
font-size: 60px;
float: right;
margin: 0px 20px;
font-family:'Courier New', Courier, monospace;
#ac
display: flex;
.AC
text-align: center;
font-size: 60px;
color: aliceblue;
width: 120px;
height: 90px;
background-color: #1e201e;
border: 1px solid #010101;
.orange
text-align: center;
font-size: 60px;
color: aliceblue;
width: 122px;
height: 90px;
background-color:rgb(226, 79, 25);
border: 1px solid #010101;
.orange_li
width: 1223px;
height: 90px;
.BC
text-align: center;
font-size: 60px;
color: aliceblue;
width: 120px;
height: 90px;
background-color: #666;
border: 1px solid #010101;
.CD
font-size: 60px;
color: aliceblue;
width: 242px;
height: 82px;
background-color: #666;
border: 1px solid #010101;
border-bottom-left-radius:15px ;
.CD_li
text-align: center;
.bottom
display: flex;
.bottom_tip
text-align: center;
font-size: 60px;
color: aliceblue;
width: 120px;
height: 82px;
background-color: #666;
border: 1px solid #010101;
.bottom_orange
text-align: center;
font-size: 60px;
color: aliceblue;
width: 122px;
height: 83px;
background-color:rgb(226, 79, 25);
border: 1px solid #010101;
border-bottom-right-radius:15px ;
.inputbox
background-color: #010101;
width: 100%;
JS部分：
function input(number)
var inputs = document.getElementById('number').value;
document.getElementById('number').value += number;
function output()
var put = document.getElementById('number').value;
var puts = eval(put);
document.getElementById('number').value = puts;
function deletes()
var inputs = document.getElementById('number').value;
document.getElementById('number').value = '';
function just()
var just = document.getElementById('number').value;
if(just.charCodeAt(0) == 45)
document.getElementById('number').value = just.substr(1,just.length);
else
document.getElementById('number').value = '-' + just;
以上是关于用JS HTML CSS 实现简单计算器的制作的主要内容，如果未能解决你的问题，请参考以下文章