闲来无事，练练手
样式比较随意，效果图如下：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="frame">
<div class="show-in-div"></div>
<div class="show-result-div">0</div>
<div class="key-div" onclick="symbol('%')">%</div>
<div class="key-div" onclick="clearValue('CE')">CE</div>
<div class="key-div" onclick="clearValue('C')">C</div>
<div class="key-div" onclick="clearValue('D')">删除</div>
<div class="key-div" onclick="symbol('⅟')">⅟</div>
<div class="key-div" onclick="symbol('x²')">x²</div>
<div class="key-div" onclick="symbol('√')">√</div>
<div class="key-div" onclick="operator('÷')">÷</div>
<div class="key-div" onclick="clickNumber(7)">7</div>
<div class="key-div" onclick="clickNumber(8)">8</div>
<div class="key-div" onclick="clickNumber(9)">9</div>
<div class="key-div" onclick="operator('×')">×</div>
<div class="key-div" onclick="clickNumber(4)">4</div>
<div class="key-div" onclick="clickNumber(5)">5</div>
<div class="key-div" onclick="clickNumber(6)">6</div>
<div class="key-div" onclick="operator('-')">-</div>
<div class="key-div" onclick="clickNumber(1)">1</div>
<div class="key-div" onclick="clickNumber(2)">2</div>
<div class="key-div" onclick="clickNumber(3)">3</div>
<div class="key-div" onclick="operator('+')">+</div>
<div class="key-div" onclick="symbol('+/-')">+/-</div>
<div class="key-div" onclick="clickNumber(0)">0</div>
<div class="key-div" onclick="symbol('.')">.</div>
<div class="key-div" onclick="operator('=')">=</div>
</div>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>CSS部分
.frame{
width: 300px;
height: 400px;
border: 1px solid black;
border-radius: 10px;
}
.show-result-input{
margin: 5px 0 0 2px;
width: 290px;
height: 100px;
border: none;
outline: none;
text-align: right;
direction : ltr;
font-size: 45px;
}
.show-in-div{
width: 295px;
height: 50px;
font-size: 25px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
color: darkgray;
}
.show-result-div{
width: 295px;
height: 50px;
font-size: 45px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: flex-end;
}
.key-div{
margin: 6px;
float: left;
width: 61px;
height: 35px;
text-align: center;
line-height: 35px;
border: 1px solid black;
font-size: 15px;
}JS部分
// 监听键盘
$(document).on('keydown', function (event){
if (!isNaN(event.key)){
clickNumber(event.key);
}
// 删除
if (event.key === 'Backspace'){
clearValue('D');
}
// 小数点
if (event.key === '.'){
symbol(event.key);
}
// 运算符
if (event.key === '+' || event.key === '-' || event.key === '='){
operator(event.key);
}
if (event.key === '*'){
operator('×');
}
if (event.key === '/'){
operator('÷');
}
})
// 数字点击
function clickNumber(number){
const nowNumber = $(".show-result-div").text();
if (nowNumber !== '0'){
$('.show-result-div').text(nowNumber+number);
}else {
$('.show-result-div').text(number);
}
}
// 清除值
function clearValue(value){
if (value === 'C'){
$('.show-in-div').text('');
$('.show-result-div').text('0');
}
if (value === 'CE'){
$('.show-result-div').text('0');
}
if (value === 'D'){
let nowNumber = $(".show-result-div").text();
if (nowNumber !== '0'){
nowNumber = nowNumber.slice(0, -1);
if (nowNumber === ''){
nowNumber = '0';
}
$('.show-result-div').text(nowNumber);
}
}
}
// 运算符
function operator(value){
let beforeNumber = $(".show-in-div").text();
let nowNumber = $(".show-result-div").text();
if (nowNumber === ''){
return false;
}
if (beforeNumber === ''){
$('.show-in-div').text(nowNumber+value);
$('.show-result-div').text('');
}else {
const beforeOperator = beforeNumber.substring(beforeNumber.length - 1);
beforeNumber = parseFloat(beforeNumber.slice(0, -1));
nowNumber = parseFloat(nowNumber);
if (beforeOperator === '+'){
nowNumber = beforeNumber + nowNumber;
}
if (beforeOperator === '-'){
nowNumber = beforeNumber - nowNumber;
}
if (beforeOperator === '×'){
nowNumber = beforeNumber * nowNumber;
}
if (beforeOperator === '÷'){
if (nowNumber === 0){
return false;
}
nowNumber = beforeNumber / nowNumber;
}
if (value === '='){
$('.show-in-div').text('');
$('.show-result-div').text(nowNumber);
}else {
$('.show-in-div').text(nowNumber+value);
$('.show-result-div').text('');
}
}
}
// 其他符号
function symbol(value){
let nowNumber = $(".show-result-div").text();
nowNumber = parseFloat(nowNumber);
// 小数点
if (value === '.'){
if (Number.isInteger(nowNumber)){
nowNumber = nowNumber+'.';
}
}
// 百分号
if (value === '%'){
nowNumber = nowNumber / 100;
}
// x分之一
if (value === '⅟'){
if (nowNumber === 0){
return false;
}
nowNumber = 1 / nowNumber;
}
// 平方
if (value === 'x²'){
nowNumber = nowNumber * nowNumber;
}
// 平方根
if (value === '√'){
nowNumber = Math.sqrt(nowNumber);
}
// 正负
if (value === '+/-'){
nowNumber = nowNumber > 0 ? -nowNumber : Math.abs(nowNumber);
}
$('.show-result-div').text(nowNumber);
}上边就是全部代码咯，写得比较随意，将就看了嘿嘿
标签：jquery,show,text,nowNumber,计算器,value,result,简单,div From： https://blog.csdn.net/zkxiaoxiangzhu/article/details/143770649