编写一段完整的HTML页面代码并加入JavaScript脚本,要求(1)在JavaScript脚本中要求定义一个矩形对象,用户可通过该对象的构造器指定矩形的长和宽,该对象具有可以计算矩形面积的功能;(2)在HTML的body部分调用矩形对象实例,并将矩形面积计算结果输出到HTML页面中。(注:所定义的对象应至少包含三个实例变量,分别是矩形的高、宽和一个计算面积的成员函数。)
时间: 2024-02-25 21:57:20 浏览: 18
好的,以下是符合您要求的代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>矩形面积计算器</title>
</head>
<body>
<h1>矩形面积计算器</h1>
<p>请输入矩形的长和宽:</p>
<label>长:<input type="number" id="length"></label><br>
<label>宽:<input type="number" id="width"></label><br>
<button onclick="calculate()">计算</button>
<p id="result"></p>
<script>
// 定义矩形对象
function Rectangle(length, width) {
this.length = length;
this.width = width;
}
Rectangle.prototype.getArea = function() {
return this.length * this.width;
};
// 调用矩形对象实例并输出结果
function calculate() {
var length = document.getElementById("length").value;
var width = document.getElementById("width").value;
var rect = new Rectangle(length, width);
var area = rect.getArea();
document.getElementById("result").innerHTML = "矩形面积为:" + area;
}
</script>
</body>
</html>
```
这段代码中,我们在JavaScript脚本中定义了一个矩形对象,当用户输入矩形的长和宽后,我们通过该对象的构造器创建矩形实例,并调用其计算面积的成员函数。最后,我们将计算结果输出到HTML页面中。
注意,我们通过`<input>`标签获取了用户输入的长和宽,并在按钮的`onclick`事件中调用了`calculate()`函数来进行计算。最后,我们通过`document.getElementById()`方法获取HTML页面中的`<p>`标签,并将计算结果输出到其中。
阅读全文