青少年编程与数学 01-008 在网页上完成计算 17课题、长方形的面积和周长计算

明月看潮生

于 2024-08-12 08:04:45 发布

阅读量222

点赞数 3

分类专栏： # 编程与数学第01阶段文章标签：青少年编程前端 JavaScript 编程与数学

本文链接：https://blog.csdn.net/qq_40071585/article/details/141116863

版权

编程与数学第01阶段专栏收录该内容

204 篇文章 0 订阅

订阅专栏

青少年编程与数学 01-008 在网页上完成计算 17课题、长方形的面积和周长计算

一、长方形的面积和周长
二、比例尺
三、编程计算
四、调试练习

编程计算长方形的面积和周长。

一、长方形的面积和周长

长方形的面积和周长可以通过以下公式计算：

面积 ( A ) = 长 ( l ) × 宽 ( w )
周长 ( P ) = 2 × (长 ( l ) + 宽 ( w ))

其中，( l ) 是长方形的长，( w ) 是长方形的宽。如果你提供具体的长和宽的数值，我可以帮你计算出具体的面积和周长。

二、比例尺

比例尺是一种表示地图或图表上的距离与实际地理或物理空间中相应距离的比例关系的工具。它用于帮助用户理解地图上的距离与现实世界中的距离之间的对应关系。比例尺通常以一个线性比例表示，例如1:10000，这表示地图上的1单位长度（如1厘米）代表实际地面上的10000单位长度（如10000厘米或100米）。

比例尺的计算公式是：
[ $\text{比例尺} = \frac{\text{地图上的距离}}{\text{实际距离}}$ ]

在不同的地图或图表中，比例尺可能以不同的形式出现，例如文字描述、线性比例尺或图形比例尺。例如，一个线性比例尺可能显示一个标尺，上面有地图单位和相应的实际单位，用户可以通过比较地图上的距离和标尺上的距离来估算实际距离。

三、编程计算

编写网页程序，完成长方形的面积和周长计算。要求：

功能要求：用户可以输入长方形的长和宽，点击计算按钮后由程序在页面上绘制一个长方形，并标注长和宽。
在图形下面，使用文本框输出面积和周长的计算结果。
需要HTML来构建界面，CSS来设置样式，以及JavaScript来实现计算逻辑。所有代码都写在一个.html文件中。
页面中显示中文。代码中添加中文注释。
设计尽量美观的样式，使用暗色调背景。页面元素在网页中合理居中。
用户可以多次输入并计算。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>长方形面积与周长计算器</title>
    <style>
        body {
            background-color: #222;
            color: white;
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
            height: 100vh;
        }

        .container {
            text-align: center;
        }

        input[type="number"],
        button {
            padding: 8px;
            margin: 8px;
        }

        svg {
            border: 1px solid #ccc;
            margin-bottom: 1em;
        }

        .results {
            font-size: 1.2em;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>长方形面积与周长计算器</h1>
        <input type="number" id="length" placeholder="请输入长方形的长度">
        <input type="number" id="width" placeholder="请输入长方形的宽度">
        <br>
        <button onclick="calculate()">点击此处计算面积和周长</button>
        <br>
        <br>
        <svg id="rectangleSvg" width="500" height="300" viewBox="0 0 500 300" preserveAspectRatio="xMidYMid meet"></svg>
        <div class="results" id="results"></div>
    </div>

    <script>
        function calculate() {
            // 获取用户输入的长方形的长度和宽度
            const length = parseFloat(document.getElementById('length').value);
            const width = parseFloat(document.getElementById('width').value);

            if (isNaN(length) || isNaN(width)) {
                alert('请输入有效的数值！');
                return;
            }

            // 计算面积和周长
            const area = length * width;
            const perimeter = 2 * (length + width);

            // 获取SVG元素
            const svgElement = document.getElementById('rectangleSvg');
            const svgWidth = svgElement.getAttribute('width');
            const svgHeight = svgElement.getAttribute('height');

            // 清除之前的图形
            while (svgElement.firstChild) {
                svgElement.removeChild(svgElement.firstChild);
            }

            // 计算比例因子，确保长方形在SVG内完全可见
            const scaleX = svgWidth / (length * 50);
            const scaleY = svgHeight / (width * 50);
            const scale = Math.min(scaleX, scaleY);

            // 计算长方形的位置以使其居中
            const x = (svgWidth - (length * 50 * scale)) / 2;
            const y = (svgHeight - (width * 50 * scale)) / 2;

            // 绘制长方形
            const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
            rect.setAttribute("x", x);
            rect.setAttribute("y", y);
            rect.setAttribute("width", length * 50 * scale);
            rect.setAttribute("height", width * 50 * scale);
            rect.setAttribute("fill", "none");
            rect.setAttribute("stroke", "#44ff44");
            rect.setAttribute("stroke-width", "2");

            // 添加长和宽的标签
            const textLength = document.createElementNS("http://www.w3.org/2000/svg", "text");
            textLength.setAttribute("x", 10);
            textLength.setAttribute("y", 20);
            textLength.textContent = `长: ${length}`;
            textLength.setAttribute("font-size", "20px"); // 设置字体大小
            textLength.setAttribute("fill", "white");

            const textWidth = document.createElementNS("http://www.w3.org/2000/svg", "text");
            textWidth.setAttribute("x", 10);
            textWidth.setAttribute("y", 40);
            textWidth.textContent = `宽: ${width}`;
            textWidth.setAttribute("font-size", "20px"); // 设置字体大小
            textWidth.setAttribute("fill", "white");

            // 将长方形和文字添加到SVG中
            svgElement.appendChild(rect);
            svgElement.appendChild(textLength);
            svgElement.appendChild(textWidth);

            // 显示结果
            const resultsElement = document.getElementById('results');
            resultsElement.innerHTML = `面积: ${area.toFixed(2)}<br>周长: ${perimeter.toFixed(2)}`;
        }
    </script>
</body>

</html>