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

最新推荐文章于 2024-12-20 13:17:54 发布

原创

最新推荐文章于 2024-12-20 13:17:54 发布 · 760 阅读

标签

#计算器 #javaScript #Flex布局

收录于

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

基础版本：

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