用js,html,css写一个计算器
时间: 2024-03-08 17:21:55 浏览: 21
以下是一个简单的计算器示例,使用HTML、CSS和JavaScript编写:
HTML代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<div class="display">
<input type="text" id="result" readonly>
</div>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendValue('(')"> ( </button>
<button onclick="appendValue(')')"> ) </button>
<button onclick="appendValue('/')"> / </button>
<button onclick="appendValue('7')"> 7 </button>
<button onclick="appendValue('8')"> 8 </button>
<button onclick="appendValue('9')"> 9 </button>
<button onclick="appendValue('*')"> * </button>
<button onclick="appendValue('4')"> 4 </button>
<button onclick="appendValue('5')"> 5 </button>
<button onclick="appendValue('6')"> 6 </button>
<button onclick="appendValue('-')"> - </button>
<button onclick="appendValue('1')"> 1 </button>
<button onclick="appendValue('2')"> 2 </button>
<button onclick="appendValue('3')"> 3 </button>
<button onclick="appendValue('+')"> + </button>
<button onclick="appendValue('0')"> 0 </button>
<button onclick="appendValue('.')"> . </button>
<button onclick="calculate()"> = </button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
.calculator {
width: 300px;
margin: 50px auto;
border: 2px solid #ccc;
border-radius: 5px;
padding: 10px;
box-shadow: 0px 0px 10px #ccc;
}
.display {
margin-bottom: 10px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
border-radius: 5px;
border: none;
background-color: #eee;
color: #333;
font-size: 18px;
cursor: pointer;
padding: 10px;
width: 100%;
}
button:hover {
background-color: #ccc;
}
```
JavaScript代码:
```
let result = document.getElementById("result");
function appendValue(val) {
result.value += val;
}
function clearResult() {
result.value = "";
}
function calculate() {
try {
result.value = eval(result.value);
} catch (err) {
alert("Invalid calculation");
}
}
```
这个计算器具有基本的加、减、乘、除、括号和小数点功能。当用户单击“C”按钮时,输入框将被清空。当用户单击“=”按钮时,计算器将尝试计算输入的表达式,并将结果显示在输入框中。如果表达式无效,则会出现警报窗口。