创建一个html页面文件,设计两个输入框,一个按钮,输入数字后,点击按钮,弹出提示框:当前计算结果为:XXX;其中XXX为两个输入框中内容的乘积结果。当输入非法字符时,给出提示。
时间: 2023-12-14 15:05:11 浏览: 44
好的,这是一个简单的HTML页面,你可以将以下代码保存为`index.html`文件,使用浏览器打开即可看到页面效果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>乘法计算器</title>
</head>
<body>
<div>
<label for="input1">输入数字1:</label>
<input type="text" id="input1" />
</div>
<div>
<label for="input2">输入数字2:</label>
<input type="text" id="input2" />
</div>
<div>
<button onclick="calculate()">计算乘积</button>
</div>
<script>
function calculate() {
const input1 = document.getElementById("input1").value;
const input2 = document.getElementById("input2").value;
// 判断输入是否合法
if (!input1 || !input2 || isNaN(input1) || isNaN(input2)) {
alert("请输入合法数字!");
return;
}
const result = input1 * input2;
alert("当前计算结果为:" + result);
}
</script>
</body>
</html>
```
代码解释:
1. `label` 标签用于关联输入框,提高可访问性(accessibility)。
2. `input` 标签用于创建输入框,`type="text"` 表示是文本输入框。
3. `button` 标签用于创建按钮,`onclick` 属性指定按钮点击后要执行的函数。
4. `document.getElementById()` 方法用于获取指定 ID 的 HTML 元素。
5. `isNaN()` 函数用于判断一个值是否为非数字(Not-a-Number)。
6. `alert()` 函数用于在浏览器中弹出提示框。
相关推荐
![](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)
![](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)