使用html css js制作一个计算机
时间: 2024-03-09 17:03:19 浏览: 15
制作一个计算器可以使用HTML、CSS和JavaScript技术,以下是一个简单的计算器实现示例:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
#calculator {
width: 200px;
height: 250px;
background-color: #ccc;
border: 1px solid #333;
padding: 10px;
box-shadow: 0px 0px 10px #333;
margin: 0 auto;
}
input[type="button"] {
width: 40px;
height: 40px;
background-color: #fff;
border: 1px solid #333;
font-size: 20px;
cursor: pointer;
}
input[type="text"] {
width: 170px;
height: 30px;
font-size: 20px;
text-align: right;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" readonly>
<input type="button" value="1" onclick="insert('1')">
<input type="button" value="2" onclick="insert('2')">
<input type="button" value="3" onclick="insert('3')">
<input type="button" value="+" onclick="insert('+')"><br>
<input type="button" value="4" onclick="insert('4')">
<input type="button" value="5" onclick="insert('5')">
<input type="button" value="6" onclick="insert('6')">
<input type="button" value="-" onclick="insert('-')"><br>
<input type="button" value="7" onclick="insert('7')">
<input type="button" value="8" onclick="insert('8')">
<input type="button" value="9" onclick="insert('9')">
<input type="button" value="*" onclick="insert('*')"><br>
<input type="button" value="0" onclick="insert('0')">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="/" onclick="insert('/')">
</div>
<script>
function insert(num) {
document.getElementById("result").value += num;
}
function clearResult() {
document.getElementById("result").value = "";
}
function calculate() {
var expression = document.getElementById("result").value;
var result = eval(expression);
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
CSS代码用于设置计算器的样式,JavaScript代码用于实现计算器的功能。在HTML代码中,一个input元素表示一个按钮,其中type属性为button表示按钮类型,value属性表示按钮的文本内容,onclick属性表示按钮点击时执行的JavaScript代码。
使用以上代码可以创建一个简单的计算器,可以进行加减乘除计算。