jQuery实现简单计算器（Flex布局）

最新推荐文章于 2023-03-13 16:42:50 发布

wjm11

最新推荐文章于 2023-03-13 16:42:50 发布

阅读量656

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript练习文章标签：计算器 jQuery Flex布局

本文链接：https://blog.youkuaiyun.com/wjm11/article/details/80815178

JavaScript练习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一个简单的HTML网页计算器的实现过程，包括基本布局设置、样式设计及JavaScript交互逻辑编写等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.board {
margin: 60px auto;
padding:20px;
background-color: #000000;
color: white;
font-size: 30px;
width: 300px;
}
input.text {
width: 100%;
height:45px;
font-size: 23pt;
padding-left: 6px;
}
.line {
display: flex;
justify-content: space-between;
padding-top: 15px;
align-items: flex-start;
}
.cell {
width:60px;
height: 60px;
line-height:60px;
text-align: center;
border-radius: 50px;
background-color: grey;
cursor: pointer;
}
.cell-operate,.equal {
background-color: orange;
}
.cell-speOperate {
background-color: darkgrey;
}
.zero {
width: 140px;
height: 60px;
}
</style>
</head>
<body>
<div class="board">
<input type="text" class="text">
<div class="line">
<div class="cell cell-speOperate delete">AC</div>
<div class="cell cell-speOperate">+/-</div>
<div class="cell cell-speOperate">%</div>
<div class="cell cell-operate">/</div>
</div>
<div class="line">
<div class="cell cell-num">7</div>
<div class="cell cell-num">8</div>
<div class="cell cell-num">9</div>
<div class="cell cell-operate">*</div>
</div>
<div class="line">
<div class="cell cell-num">4</div>
<div class="cell cell-num">5</div>
<div class="cell cell-num">6</div>
<div class="cell cell-operate">-</div>
</div>
<div class="line">
<div class="cell cell-num">1</div>
<div class="cell cell-num">2</div>
<div class="cell cell-num">3</div>
<div class="cell cell-operate">+</div>
</div>
<div class="line line-last">
<div class="cell cell-num zero">0</div>
<div class="cell cell-num">.</div>
<div class="cell equal">=</div>
</div>
</div>
<script src="jquery-2.1.0.min.js"></script>
<script>
//获取文本框
var text = $('.text');
//获取删除按钮
var deleteButton = $('.delete');
//获取等于号
var equal = $('.equal');
//获取数字0-9和 .
var num = $('.cell-num');
//获取运算符
var operate = $('.cell-operate');
//给0-9添加点击事件
for(var i=0; i<num.length; i++) {
num[i].onclick = (e) => {
if(text.val() === ''){
text.val(e.target.innerText);
}else {
text.val(text.val() + e.target.innerText);
}
}
}
//给AC按钮添加清零事件；
deleteButton.click(() => {
text.val("");
})
//运算符点击事件
for(var i=0; i<operate.length; i++) {
operate[i].onclick = (e) => {
text.val(text.val() + e.target.innerText);
}
}
//等于号点击事件
equal.click(() => {
var c = eval(text.val());
text.val(parseFloat(c.toPrecision(12)));
})
</script>
</body>
</html>