HTML和js实现计算器
时间: 2024-05-15 12:18:44 浏览: 13
HTML和JS可以一起实现一个简单的计算器。下面是一个简单的例子:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script src="calculator.js"></script>
</head>
<body>
<h1>Calculator</h1>
<input type="text" id="result" disabled>
<br>
<button onclick="buttonClick('1')">1</button>
<button onclick="buttonClick('2')">2</button>
<button onclick="buttonClick('3')">3</button>
<button onclick="buttonClick('+')">+</button>
<br>
<button onclick="buttonClick('4')">4</button>
<button onclick="buttonClick('5')">5</button>
<button onclick="buttonClick('6')">6</button>
<button onclick="buttonClick('-')">-</button>
<br>
<button onclick="buttonClick('7')">7</button>
<button onclick="buttonClick('8')">8</button>
<button onclick="buttonClick('9')">9</button>
<button onclick="buttonClick('*')">*</button>
<br>
<button onclick="buttonClick('0')">0</button>
<button onclick="buttonClick('.')">.</button>
<button onclick="buttonClick('/')">/</button>
<button onclick="calculate()">=</button>
<br>
<button onclick="clearResult()">Clear</button>
</body>
</html>
```
JS代码:
```
var result = document.getElementById("result");
function buttonClick(value) {
result.value += value;
}
function clearResult() {
result.value = "";
}
function calculate() {
result.value = eval(result.value);
}
```
这个例子中,HTML页面中定义了一个文本框和一些按钮,每个按钮都有一个onclick事件,点击按钮时会调用buttonClick函数,并将按钮的值作为参数传递给该函数。buttonClick函数将按钮的值添加到文本框中。此外,还有一个clearResult函数,它将文本框清空。最后,还有一个calculate函数,它将文本框中的表达式计算出结果并将结果显示在文本框中。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)