javaScript实现简单计算器（采用flex布局）

最新推荐文章于 2024-08-17 02:22:40 发布

wjm11

最新推荐文章于 2024-08-17 02:22:40 发布

阅读量674

点赞数

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

本文链接：https://blog.csdn.net/wjm11/article/details/80815018

版权

这篇博客展示了如何用JavaScript和Flex布局创建一个简单的计算器。通过JavaScript为数字和运算符按钮添加点击事件，实现输入和计算功能。同时，CSS使用Flex布局为计算器设计了响应式界面。

摘要由CSDN通过智能技术生成

基础版本：

<!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 c