JavaScript实现计算器运算网页
时间: 2023-07-11 13:14:57 浏览: 77
可以使用HTML、CSS和JavaScript来创建一个计算器运算网页。以下是一个简单的实现:
HTML代码:
```
<div class="calculator">
<input type="text" id="input" disabled>
<div class="buttons">
<button onclick="clearInput()">C</button>
<button onclick="backspace()">←</button>
<button onclick="insert('+')">+</button>
<button onclick="insert('-')">-</button>
<button onclick="insert('*')">*</button>
<button onclick="insert('/')">/</button>
<button onclick="calculate()">=</button>
<button onclick="insert('7')">7</button>
<button onclick="insert('8')">8</button>
<button onclick="insert('9')">9</button>
<button onclick="insert('4')">4</button>
<button onclick="insert('5')">5</button>
<button onclick="insert('6')">6</button>
<button onclick="insert('1')">1</button>
<button onclick="insert('2')">2</button>
<button onclick="insert('3')">3</button>
<button onclick="insert('0')">0</button>
<button onclick="insert('.')">.</button>
</div>
</div>
```
CSS代码:
```
.calculator {
width: 200px;
margin: 0 auto;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
padding: 10px;
font-size: 20px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
```
JavaScript代码:
```
var input = document.getElementById('input');
function insert(value) {
input.value += value;
}
function backspace() {
input.value = input.value.slice(0, -1);
}
function clearInput() {
input.value = '';
}
function calculate() {
try {
input.value = eval(input.value);
} catch (e) {
if (e instanceof SyntaxError) {
input.value = 'Error';
}
}
}
```
这个计算器运算网页支持加、减、乘、除、小数点和清空操作,并且使用了eval()函数来进行计算。需要注意的是,eval()函数可能存在安全隐患,不建议在生产环境中使用。