写一个计算器的web前端代码,样式简约
时间: 2024-05-05 18:17:09 浏览: 18
以下是一个简单的计算器前端代码示例,基于HTML、CSS和JavaScript实现。样式比较简约,你可以根据自己的喜好进行修改。
```html
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
.calculator {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
padding: 20px;
background-color: #f1f1f1;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
font-size: 24px;
text-align: center;
}
.calculator input {
grid-column: 1 / span 4;
padding: 10px;
margin-bottom: 10px;
font-size: 32px;
text-align: right;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
}
.calculator button {
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
background-color: #ffffff;
cursor: pointer;
}
.calculator button:hover {
background-color: #e6e6e6;
}
.calculator button:active {
box-shadow: none;
transform: translateY(2px);
}
.calculator button.clear {
grid-column: 1 / span 2;
background-color: #f44336;
color: #ffffff;
}
.calculator button.clear:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<button onclick="addToDisplay('7')">7</button>
<button onclick="addToDisplay('8')">8</button>
<button onclick="addToDisplay('9')">9</button>
<button onclick="addToDisplay('+')">+</button>
<button onclick="addToDisplay('4')">4</button>
<button onclick="addToDisplay('5')">5</button>
<button onclick="addToDisplay('6')">6</button>
<button onclick="addToDisplay('-')">-</button>
<button onclick="addToDisplay('1')">1</button>
<button onclick="addToDisplay('2')">2</button>
<button onclick="addToDisplay('3')">3</button>
<button onclick="addToDisplay('*')">*</button>
<button onclick="addToDisplay('0')">0</button>
<button onclick="addToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="addToDisplay('/')">/</button>
<button class="clear" onclick="clearDisplay()">清除</button>
</div>
<script>
let display = document.getElementById('display');
function addToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
display.value = eval(display.value);
}
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)