【案例2-5】输入圆的半径计算面积和周长
一、案例描述
- 考核知识点
toFixed()、isNaN、window.document对象
- 练习目标
- 掌握toFixed()方法。
- 掌握数据类型检测。
- 了解windoe.document对象。
- 需求分析
用JavaScript代码来计算圆的周长和面积，用户自己输入正确的r半径，在页面中会显示出圆的周长也半径。
- 案例分析
- 效果如图2-7、2-8所示。
- 输入圆的半径
- 展示圆的周长和面积
- 具体实现步骤如下：
- 页面弹出框输入半径r。
- 在程序里判断r是否是正确的数字，如果是计算周长，面积。
- 如果r输入错误，则校验不通过，给出提示。
- 页面中展示r、周长、面积。
二、案例实现
根据上面的分析，可以通过简单的JavaScript代码来实现这一效果，具体代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>输入圆的半径计算面积和周长</title>
- </head>
- <body>
- <div>圆的半径：<input id="r" type="text"></div>
- <div>圆的周长：<input id="cir" type="text"></div>
- <div>圆的面积：<input id="area" type="text"></div>
- <script>
- var r = prompt('请输入圆的半径');
- if(!isNaN(r)){
- var cir = 2 * Math.PI * r;
- var area = Math.PI * r * r;
- // var area = Math.PI.toFixed(2) * Math.pow(r, 2)
- document.getElementById('r').value = r;
- document.getElementById('cir').value = cir.toFixed(2);
- document.getElementById('area').value = area.toFixed(2);
- }else{
- alert('请输入正确的数字')
- }
- </script>
- </body>
- </html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
