前端实现简易计算器
效果展示:
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
<div id="calculator">
<div id="nothing"></div>
<div id="shuru">
<input type="text" id="text">
</div>
<div id="anniu">
<ul class="u">
<li class="b" onclick="qing()">c</li>
<li class="b" onclick="ru('/')">÷</li>
<li class="b" onclick="ru('*')">×</li>
<li class="b" onclick="qu()">←</li>
<li class="a" onclick="ru('7')">7</li>
<li class="a" onclick="ru('8')">8</li>
<li class="a" onclick="ru('9')">9</li>
<li class="b" onclick="ru('-')">-</li>
<li class="a" onclick="ru('4')">4</li>
<li class="a" onclick="ru('5')">5</li>
<li class="a" onclick="ru('6')">6</li>
<li class="b" onclick="ru('+')">+</li>
<li class="a" onclick="ru('1')">1</li>
<li class="a" onclick="ru('2')">2</li>
<li class="a" onclick="ru('3')">3</li>
<li class="b" onclick="zf()">±</li>
<li class="a" onclick="ru('0')">0</li>
<li class="a" onclick="ru('.')">.</li>
<li class="c" onclick="equal('')">=</li>
</ul>
</div>
</div>
</body>
</html>
css:
* {
user-select: none;
}
body {
background-image: url(images/background.png);
}
#calculator {
width: 280px;
height: 430px;
/* background-color: #FCFCFC; */
background: rgba(0, 0, 0, .1);
border-radius: 10px;
margin: 100px auto;
}
#calculator :hover {
box-shadow: 10px 10px 10px -4px rgba(10, 10, 10, 0.5);
}
#nothing {
width: 280px;
height: 50px;
/* background-color: #FCFCFC; */
}
#shuru {
width: 280px;
height: 50px;
/* background-color: #FCFCFC; */
}
#shuru input {
width: 274px;
height: 50px;
font-size: 30px;
color: orange;
background-color: transparent;
/* background-color: #FCFCFC; */
border-radius: 20px;
border:1px solid rgba(0, 0, 0, 0);
text-align: right;
}
#anniu {
float: left;
width: 100%;
height: 330px;
border-radius: 10px;
/* background-color: #F0F0F0; */
}
#anniu li {
float: left;
list-style-type: none;
}
#anniu .u {
position: relative;
right: 20px;
}
#anniu .a {
width: 50px;
height: 50px;
margin: 5px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 50px;
border-radius: 20px;
color: #FCFCFC;
font-size: 20px;
}
#anniu .a:hover {
background-color: #51c360;
}
#anniu .b {
width: 50px;
height: 50px;
margin: 5px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 50px;
border-radius: 30px;
color: #FCFCFC;
font-size: 20px;
}
#anniu .b:hover {
background-color: #ed9389;
}
#anniu .c {
width: 110px;
height: 50px;
margin: 5px;
background-color: rgba(0, 0, 0, .3);
text-align: center;
line-height: 50px;
border-radius: 20px;
color: #FCFCFC;
font-size: 20px;
}
#anniu .c:hover {
background-color: #01B0FF;
}
js:
script
// 获取函数 字符变为整型 连续输出
function ru(number) {
var chu = document.getElementById('text').value;
document.getElementById('text').value += number;
}
function equal() {
var chu = document.getElementById('text').value;
// 引入计算表达式
var result = eval(chu);
document.getElementById('text').value = result;
}
function qu() {
var qc = document.getElementById('text');
qc.value = qc.value.substring(0, qc.value.length - 1);
}
function qing() {
var chu = document.getElementById('text').value;
document.getElementById('text').value = '';
}
function zf() {
var zf = document.getElementById('text').value;
// 转换为ASCLL码判断
if (zf.charCodeAt(0) == 45) {
document.getElementById('text').value = zf.substr(1, zf.length);
}
else {
document.getElementById('text').value = '-' + zf;
}
}