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

最新推荐文章于 2024-05-31 14:50:36 发布

wjm11

最新推荐文章于 2024-05-31 14:50:36 发布

阅读量637

点赞数

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

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

版权

基础版本：

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

最低0.47元/天解锁文章

wjm11

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaScript实现简单计算器（采用flex布局）

基础版本：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; .board { margin:
复制链接

扫一扫