首页使用prompt()或text输入框从键盘接收圆的半径,单击“计算”按钮计算圆的周长和面积。圆的半径、周长、面积信息均需显示在页面上。

使用prompt()或text输入框从键盘接收圆的半径,单击“计算”按钮计算圆的周长和面积。圆的半径、周长、面积信息均需显示在页面上。

时间: 2024-09-24 17:13:36 浏览: 40

这是一个基本的前端网页开发任务，通常使用HTML、CSS和JavaScript来实现。以下是简单的步骤： 1. **HTML** 部分：创建一个包含输入框、按钮以及两个用于显示结果的元素的结构。 ```html <!DOCTYPE html> <html> <body> <label for="radius">请输入圆的半径：</label> <input type="number" id="radius" name="radius"> <button onclick="calculate()">计算</button> <p>圆的周长：<span id="circumference"></span></p> <p>圆的面积：<span id="area"></span></p> </body> </html> ``` 2. **JavaScript** 部分：添加一个函数`calculate()`来处理用户点击事件，获取输入值并计算周长和面积。 ```javascript <script> function calculate() { const radiusInput = document.getElementById('radius'); const circumferenceSpan = document.getElementById('circumference'); const areaSpan = document.getElementById('area'); // 输入验证 if (isNaN(radiusInput.value) || radiusInput.value <= 0) { alert("请输入有效的半径值"); return; } const radius = parseFloat(radiusInput.value); const pi = Math.PI; // 圆周率 // 计算周长和面积 const circumference = 2 * pi * radius; const area = pi * radius * radius; // 显示结果 circumferenceSpan.textContent = `圆的周长：${circumference.toFixed(2)} 单位`; areaSpan.textContent = `圆的面积：${area.toFixed(2)} 平方单位`; } </script> ``` 在这个例子中，当用户输入半径并点击“计算”按钮，`calculate()`函数会被触发，计算出圆的周长和面积，并将结果显示在相应的`<span>`标签内。

阅读全文