java script生成计算器代码
时间: 2023-05-19 07:03:23 浏览: 88
java计算器代码
以下是一个简单的 JavaScript 计算器代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript 计算器</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
input[type="button"] {
width: 100%;
padding: 10px;
margin-bottom: 5px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
<div class="container">
<input type="text" id="result" placeholder="0">
<input type="button" value="1" onclick="addToResult('1')">
<input type="button" value="2" onclick="addToResult('2')">
<input type="button" value="3" onclick="addToResult('3')">
<input type="button" value="+" onclick="addToResult('+')">
<input type="button" value="4" onclick="addToResult('4')">
<input type="button" value="5" onclick="addToResult('5')">
<input type="button" value="6" onclick="addToResult('6')">
<input type="button" value="-" onclick="addToResult('-')">
<input type="button" value="7" onclick="addToResult('7')">
<input type="button" value="8" onclick="addToResult('8')">
<input type="button" value="9" onclick="addToResult('9')">
<input type="button" value="*" onclick="addToResult('*')">
<input type="button" value="C" onclick="clearResult()">
<input type="button" value="0" onclick="addToResult('0')">
<input type="button" value="=" onclick="calculateResult()">
<input type="button" value="/" onclick="addToResult('/')">
</div>
<script>
function addToResult(value) {
document.getElementById("result").value += value;
}
function clearResult() {
document.getElementById("result").value = "";
}
function calculateResult() {
var result = eval(document.getElementById("result").value);
document.getElementById("result").value = result;
}
</script>
</body>
</html>
```
这是一个简单的 HTML 页面,包含一个文本框和一些按钮,可以用来进行基本的加减乘除运算。
阅读全文