利用html,JavaScript计算常用图形面积

来源：互联网发布：单页模板网站源码编辑：程序博客网时间：2024/06/05 02:31

重点内容
利用html,JavaScript
今天2017.12.13，项目预上线阶段，闲着没事，帮老表写个常用图形面积计算的小工具，顺便复习下之前所学知识，源代码如下：

这里写代码片

<!DOCTYPE html><html ><head>    <meta charset="UTF-8">    <title>求图形面积</title></head> <style></style><body align=center>    <div>请输入矩形长度：        <input id="iptw" type="text">    </div>    <div>请输入矩形宽度：        <input id="ipth" type="text">    </div>    <div>        <button id="btn">点击计算结果</button>    </div>    <div>矩形面积为：        <input id="iptr" type="text">    </div>    <hr/>     <div>请输入圆半径：        <input id="ipr" type="text">    </div>    <div>        <button id="btc">点击计算结果</button>    </div>    <div>圆面积为：        <input id="ipc" type="text">    </div>    <hr/>    <h4>当弧是劣弧时<h4/>     <div>请输弓高：        <input id="gg" type="text">    </div>    <div>请输玄长：        <input id="xc" type="text">    </div>    <div>        <button id="btg">点击计算结果</button>    </div>    <div>弓形面积为：        <input id="gxs" type="text">    </div>    <hr/>    <h4>当弧是优弧时<h4/>     <div>请输玄到圆心的距离：        <input id="ygg" type="text">    </div>    <div>请输玄长：        <input id="yxc" type="text">    </div>    <div>        <button id="btyg">点击计算结果</button>    </div>    <div>弓形面积为：        <input id="gxys" type="text">    </div>    <script>    function $(id) {        return document.getElementById(id);    }    $('btn').onclick = function() {        var width = parseFloat($('iptw').value);        var height = parseFloat($('ipth').value);        var mianji = width * height;        $('iptr').value = mianji;    }     $('btc').onclick = function() {        var r = parseFloat($('ipr').value);        var mianji = Math.PI*Math.pow(r,2);        $('ipc').value = mianji;    }     $('btg').onclick = function() {        var gheight = parseFloat($('gg').value);        var glenth = parseFloat($('xc').value);        <!--(R-H)^2+(L/2)^2=R^2 勾股定理求圆半径-->        var gR = gheight/2+(Math.pow(glenth,2)/(8*gheight))        <!-- 三角函数求弧所对应的圆心角:A=2*ARC SIN((L/2)/R)-->        var A = 2*Math.asin((glenth/2)/gR)        <!--弓形面积为:S=PI*R^2*A/360-(L*R*COS(A/2))/2-->        <!--var S = Math.PI*Math.pow(gR,2)*A/360-(glenth*gR*Math.cos(A/2))/2-->             <!--var S = Math.PI*Math.pow(gR,2)*A*(180/Math.PI)/360-(gR-gheight)*glenth/2  简化成下列-->        var S = Math.pow(gR,2)*A/2-(gR-gheight)*glenth/2        $('gxs').value = S;    }     $('btyg').onclick = function() {        var gheight = parseFloat($('ygg').value);        var glenth = parseFloat($('yxc').value);        <!--gheight^2+(L/2)^2=R^2 勾股定理求圆半径-->        var gR = Math.sqrt(Math.pow(gheight,2)+Math.pow(glenth/2,2));        <!-- 三角函数求弧所对应的圆心角:A=2*Math.PI-2*ARC SIN((L/2)/R)-->        var A = 2*Math.PI-2*Math.asin((glenth/2)/gR)        <!--弓形面积为:S=PI*R^2*A/360+(L*R*COS(A/2))/2-->        <!--var S = Math.PI*Math.pow(gR,2)*A/360+(glenth*gR*Math.cos(A/2))/2-->             <!--var S = Math.PI*Math.pow(gR,2)*A*(180/Math.PI)/360+(gR-gheight)*glenth/2  简化成下列-->        var S = Math.pow(gR,2)*A/2+gheight*glenth/2        $('gxys').value = S;    }    </script></body></html>s

阅读全文

1 0