做一个简易的计算器, 1、只支持整数 2、只支持单步运算 3、运行后,页面在屏幕中央,页面颜色要做修改,页面上字体大小和颜色都做修改
时间: 2024-09-15 09:05:07 浏览: 36
labview设计简易计算器.zip_heards5n_labview_labview计算器_计算器
5星 · 资源好评率100%
要做一个简易的计算器,我们可以使用HTML、CSS和JavaScript来实现。下面是一个基本的实现步骤:
1. 使用HTML创建用户界面:包括两个输入框(一个用于输入数字,一个用于显示结果),以及几个按钮(用于执行加、减、乘、除运算)。
2. 使用CSS设计页面样式:包括将页面居中显示,以及修改页面背景颜色、字体大小和颜色。
3. 使用JavaScript编写计算器的逻辑:处理用户的输入和按钮点击事件,执行相应的运算,并将结果显示在屏幕上。
以下是具体的代码实现:
HTML代码(保存为index.html):
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>简易计算器</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="calculator">
<input type="text" id="num1" placeholder="请输入第一个整数">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<button onclick="calculate()">计算</button>
<input type="text" id="result" placeholder="结果将显示在这里" readonly>
</div>
</body>
</html>
```
CSS代码(保存为styles.css):
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#calculator {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, select, button {
margin: 10px;
padding: 10px;
font-size: 16px;
}
#result {
color: #ff4500;
font-weight: bold;
}
```
JavaScript代码(可以放在HTML文件的`<script>`标签内或外部的.js文件中):
```javascript
function calculate() {
var num1 = parseInt(document.getElementById('num1').value);
var operator = document.getElementById('operator').value;
var result = 0;
var num2;
if (num1 === NaN || isNaN(num1)) {
alert('请输入有效的整数!');
return;
}
num2 = parseInt(prompt('请输入第二个整数:'));
if (num2 === NaN || isNaN(num2)) {
alert('请输入有效的整数!');
return;
}
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
if (num2 === 0) {
alert('除数不能为0!');
return;
}
result = num1 / num2;
break;
default:
alert('请选择有效的运算符!');
return;
}
document.getElementById('result').value = result;
}
```
以上代码实现了一个简易的计算器,用户可以输入两个整数并选择运算符,点击计算后,结果会显示在页面上。页面在屏幕中央显示,页面颜色、字体大小和颜色都按照CSS样式进行了修改。
阅读全文