前端 实现 直角三角形 边长角度计算工具

Posted Love丶伊卡洛斯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端 实现 直角三角形 边长角度计算工具相关的知识,希望对你有一定的参考价值。

前言

原生html+CSS+JS实现,复制即用,简单粗暴。

功能说明

通过传入直角三角形的两条边来计算剩余的边和角度 或者 一条边和一个角度。运行信息打印在控制台和textarea中。
ps:由于浮点数的精度问题,计算结果会有浮动,所以不要无脑复制了,如果输出为29.999999这种可以手算一下看看是不是30的情况

在线试用

gitee pages传送门

效果图

2边求其他

1边1角求其他

源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="referrer" content="no-referrer" />
    <title>直角三角形边角计算</title>
    <style>
        table.default-table 
            width: 100%;
            border: solid #333;
            border-width: 1px 0px 0px 1px;
            font-size: #333;
            border-collapse: collapse;
            border-spacing: 0;
        

        table.default-table tbody tr 
            height: 20px;
            line-height: 20px;
        

        table.default-table tbody tr.odd 
            background-color: #fff;
        

        table.default-table tbody tr.even 
            background-color: #F5F5F5;
        

        table.default-table tbody tr:hover 
            background-color: #eee;
        

        table.default-table tbody tr th,
        table.default-table tbody tr td 
            padding: 3px 5px;
            text-align: left;
            /* border: 1px solid #ddd; */
            border: solid #333;
            border-width: 0px 1px 1px 0px;
        

        table.default-table tbody tr th 
            font-weight: bold;
            text-align: center;
        

        table.default-table tbody tr td.tac 
            text-align: center;
        

        table.default-table tbody tr td a:hover 
            color: #0080c0;
        

        input#c_angle 
            background: gainsboro;
        

        input#calculate_btn 
            width: 92px;
            height: 38px;
            line-height: 38px;
            border: 1px solid transparent;
            padding: 0 18px;
            background-color: #1E9FFF;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
        

        input#clear_btn 
            width: 92px;
            height: 38px;
            line-height: 38px;
            border: 1px solid transparent;
            padding: 0 18px;
            background-color: #FF5722;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border-radius: 2px;
            cursor: pointer;
        

        input 
            height: 38px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            color: rgba(0, 0, 0, .85);
            border-radius: 2px;
            font-size: 22px;
        

        textarea 
            width: 100%;
        
    </style>
</head>

<body>
    <div>
        <h1>直角三角形 边长、角度计算工具</h1>
        <p>说明:因为精度问题,算出的角度和长度会有一定的浮点偏差,如44.999999可以认为就是45</p>
        <svg width="327" height="278" xmlns="http://www.w3.org/2000/svg">
            <g>
                <title>直角三角形</title>
                <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_1" y2="241.64704" x2="35.70585"
                    y1="9.64704" x1="32.70585" stroke="#000" fill="none" />
                <line stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_2" y2="241.64704" x2="36.70585"
                    y1="242.64704" x1="299.70585" stroke="#000" fill="none" />
                <line transform="rotate(-0.118927 166.372 126.147)" stroke="#000" stroke-linecap="undefined"
                    stroke-linejoin="undefined" id="svg_3" y2="242.31266" x2="299.37535" y1="9.98058" x1="33.36961"
                    fill="none" />
                <rect stroke="#000" id="svg_4" height="6.33201" width="7.3318" y="235.18426" x="35.57987" fill="none" />
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="11"
                    stroke-width="0" id="svg_5" y="229.51878" x="46.2443" stroke="#000" fill="#000000">90°</text>
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24"
                    stroke-width="0" id="svg_6" y="138.53785" x="12.25142" stroke="#000" fill="#000000">a</text>
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24" id="svg_7"
                    y="272.17651" x="142.55744" stroke-width="0" stroke="#000" fill="#000000">b</text>
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="24"
                    stroke-width="0" id="svg_8" y="119.54184" x="173.21768" stroke="#000" fill="#000000">c</text>
                <path
                    d="m293.85905,236.18406c0,0 -0.25668,0.00891 -0.33325,0.33325c-0.1712,0.72528 -0.80515,0.92017 -1.33307,1.99957c-0.46301,0.94672 -0.33325,1.33307 -0.99979,1.9996l0,0.6665l0,0.66653l0,0.66653"
                    id="svg_9" stroke-width="0" stroke="#000" fill="#000000" />
                <path
                    d="m32.91377,19.22953c0,-0.33327 0.29378,-0.26986 1.33305,0.33326c0.64453,0.37403 1.66631,0.66653 1.99957,0.66653c0.33327,0 0.66653,0 2.33284,-0.33326l0.33327,-0.33327l0.66653,-0.99979"
                    id="svg_12" stroke-width="0" stroke="#000" fill="none" />
                <path
                    d="m32.91377,19.22953c0,0 0.66652,0 0.99979,0c0.33327,0 0.43086,0.09761 0.66652,0.33326c0.23566,0.23566 0.76985,0.22079 1.66632,-0.33326c0.40092,-0.24778 1.27454,-0.69915 1.66632,-1.33305c0.17522,-0.28349 -0.10245,-0.72851 0.33327,-1.33305c0.27557,-0.38234 0.33325,-0.99979 0.33325,-1.33305l0,-0.33327"
                    id="svg_14" stroke-width="0" stroke="#000" fill="#000000" />
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="13" id="svg_15"
                    y="42.22471" x="36.91292" stroke-width="0" stroke="#000" fill="#000000">∠b</text>
                <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="13" id="svg_16"
                    y="237.5171" x="259.53292" stroke-width="0" stroke="#000" fill="#000000">∠a</text>
            </g>

        </svg>
    </div>
    <div>
        <table>
            <tr>
                <td>
                    <p>a的长度</p>
                </td>
                <td>
                    <input id="a_len" type="text">
                </td>
            </tr>
            <tr>
                <td>
                    <p>b的长度</p>
                </td>
                <td>
                    <input id="b_len" type="text">
                </td>
            </tr>
            <tr>
                <td>
                    <p>c的长度</p>
                </td>
                <td>
                    <input id="c_len" type="text">
                </td>
            </tr>
            <tr>
                <td>
                    <p>a的角度</p>
                </td>
                <td>
                    <input id="a_angle" type="text">
                </td>
            </tr>
            <tr>
                <td>
                    <p>b的角度</p>
                </td>
                <td>
                    <input id="b_angle" type="text">
                </td>
            </tr>
            <tr>
                <td>
                    <p>c的角度</p>
                </td>
                <td>
                    <input id="c_angle" type="text" value="90" readonly="readonly">
                </td>
            </tr>
            <tr>
                <td>
                    <input id="calculate_btn" type="button" value="计算" onclick="calculate()">
                </td>
                <td>
                    <input id="clear_btn" type="button" value="清空" onclick="clear_input()">
                </td>
            </tr>
        </table>
    </div>
    <div>
        <textarea id="log_area" rows="30" cols="50" readonly="readonly"></textarea>
    </div>

    <script>
        function calculate() 
            // a b为直角边
            var a_len = document.getElementById("a_len").value;
            var b_len = document.getElementById("b_len").value;
            var c_len = document.getElementById("c_len").value;
            var a_angle = document.getElementById("a_angle").value;
            var b_angle = document.getElementById("b_angle").value;
            // var c_angle = document.getElementById("c_angle").value;

            var temp1 = (a_angle.length > 0 ? 1 : 0) + (b_angle.length > 0 ? 1 : 0);
            var temp2 = (a_len.length > 0 ? 1 : 0) + (b_len.length > 0 ? 1 : 0) + (c_len.length > 0 ? 1 : 0);

            // 排除错误数据
            if ((a_len.length > 0 && b_len.length == 0 && c_len.length == 0 && (temp1 == 2 || temp1 == 0)) ||
                (a_len.length == 0 && b_len.length > 0 && c_len.length == 0 && (temp1 == 2 || temp1 == 0)) ||
                (a_len.length == 0 && b_len.length == 0 && c_len.length > 0 && (temp1 == 2 || temp1 == 0)) ||
                (a_len.length > 0 && b_len.length > 0 && c_len.length > 0)) 
                console.log("数据有误,提供数据过多或过少,无法计算");
                document.getElementById("log_area").prepend("数据有误,提供数据过多或过少,无法计算\\n");
                return;
            

            // 浮点数筛查
            if ((BASEisNotFloat(a_len) && a_len.length > 0) ||
                (BASEisNotFloat(b_len) && b_len.length > 0) ||
                (BASEisNotFloat(c_len) && c_len.length > 0)) 
                console.log("数据有误,非浮点数,无法计算");
                document.getElementById("log_area").prepend("数据有误,非浮点数,无法计算\\n");
                return;
            

            if ((BASEisNotFloat(a_angle) && a_angle.length > 0) ||
                (BASEisNotFloat(b_angle) && b_angle.length > 0)) 
                console.log("数据有误,非浮点数,无法计算");
                document.getElementById("log_area").prepend("数据有误,非浮点数,无法计算\\n");
                return;
            

            // 角度筛查
            if ((parseFloat(a_angle) >= 90 && a_angle.length > 0) ||
                (parseFloat(a_angle) >= 90 && a_angle.length > 0)) 
                console.log("数据有误,角度超出范围,无法计算");
                document.getElementById("log_area").prepend("数据有误,角度超出范围,无法计算\\n");
                return;
            

            var a_float = parseFloat(a_len);
            var b_float = parseFloat(b_len);
            var c_float = parseFloat(c_len);

            if (b_float >= c_float || a_float >= c_float) 
                console.log("数据有误,直角边大于等于斜边,无法计算");
                document.getElementById("log_area").prepend("数据有误,直角边大于等于斜边,无法计算\\n");
                return;
            

            var a2 = Math.pow(a_float, 2);
            var b2 = Math.pow(b_float, 2);
            var c2 = Math.pow(c_float, 2);

            // 有2边,求1边和2角度
            if(temp2 == 2) 
                // 没有数据的即是要求的边
                if (a_len.length == 0) 
                    a_float = Math.sqrt(c2 - b2);
                    document.getElementById("a_len").value = a_float;
                 else if (b_len.length == 0) 
                    b_float = Math.sqrt(c2 - a2);
                    document.getElementById("b_len").value = b_float;
                 else if (c_len.length == 0) 
                    c_float = Math.前端 实现 直角三角形 边长角度计算工具

前端 实现 直角三角形 边长角度计算工具

python-求直角三角形斜边

OpenGL 计算三角形法线 C++

如何利用勾股定理求c的边长

边长为5、7、8的三角形的最大角与最小角之和是多少