javascript简单网页设计案例
时间: 2023-08-14 22:04:17 浏览: 135
下面是一个简单的网页设计案例,使用HTML和JavaScript实现了一个简单的计算器:
```html
<!DOCTYPE html>
<html>
<head>
<title>简单计算器</title>
<script>
function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var result = 0;
if (operator == "+") {
result = Number(num1) + Number(num2);
} else if (operator == "-") {
result = num1 - num2;
} else if (operator == "*") {
result = num1 * num2;
} else if (operator == "/") {
result = num1 / num2;
}
document.getElementById("result").innerHTML = result;
}
</script>
</head>
<body>
<h1>简单计算器</h1>
<form>
<label for="num1">数字1:</label>
<input type="number" id="num1" name="num1"><br><br>
<label for="num2">数字2:</label>
<input type="number" id="num2" name="num2"><br><br>
<label for="operator">运算符:</label>
<select id="operator" name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select><br><br>
<input type="button" value="计算" onclick="calculate()"><br><br>
<label for="result">结果:</label>
<span id="result"></span>
</form>
</body>
</html>
```
该计算器有两个输入框和一个下拉菜单,用户可以选择要进行的操作。JavaScript代码根据用户的选择进行计算,并将结果显示在页面上。