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

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

这里写代码片


<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);
        
        var gR = gheight/2+(Math.pow(glenth,2)/(8*gheight))
        
        var A = 2*Math.asin((glenth/2)/gR)
        
             
        
        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);
        
        var gR = Math.sqrt(Math.pow(gheight,2)+Math.pow(glenth/2,2));
        
        var A = 2*Math.PI-2*Math.asin((glenth/2)/gR)
        
             
        
        var S = Math.pow(gR,2)*A/2+gheight*glenth/2

        $('gxys').value = S;
    }
    script>
body>

html>s

你可能感兴趣的:(前端)