要求:一页面给出矩形的长和宽,通过include动作标记,动态插入另一个页面计算矩形的面积,最后输出矩形的长、宽和面积
时间: 2024-10-12 19:11:01 浏览: 18
在一个网页设计中,如果你想要在一页面上输入矩形的长和宽,然后通过`<iframe>`或`<object>`等包含元素动态地加载另一个页面(假设这个页面是一个脚本或者服务器端程序),该程序会接收这些数据并计算出矩形的面积,你可以这样做:
1. **主页面(index.html)**:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<title>矩形面积计算器</title>
</head>
<body>
<form id="rectangle-form">
长度:<input type="number" id="length" required><br>
宽度:<input type="number" id="width" required><br>
<button onclick="calculateArea()">计算面积</button>
</form>
<!-- 使用 iframe 或其他嵌入标签 -->
<div id="result-container">
<iframe src="calculator.php" name="area-calculator" style="display:none;"></iframe>
</div>
<script>
function calculateArea() {
var length = document.getElementById('length').value;
var width = document.getElementById('width').value;
// 发送POST请求到calculator.php
var xhr = new XMLHttpRequest();
xhr.open("POST", "calculator.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
document.getElementById('result-container').innerHTML = xhr.responseText;
}
};
xhr.send("length=" + length + "&width=" + width);
}
</script>
</body>
</html>
```
2. **计算页面(calculator.php)**(这是一个PHP示例,实际可以是JavaScript或任何支持后端处理的语言):
```php
<?php
// 获取长度和宽度参数
$length = $_POST['length'];
$width = $_POST['width'];
// 计算面积
$area = $length * $width;
// 返回结果
echo "矩形的长度: $length<br>";
echo "矩形的宽度: $width<br>";
echo "矩形的面积: $area<br>";
?>
```
在这个例子中,用户在主页面填写矩形的长和宽,点击计算按钮后,会触发`calculateArea`函数,发送POST请求将数据传给`calculator.php`。服务器接收到请求后计算面积,并返回结果。
阅读全文