JS实现根据行株距计算亩株数

程序员文章站 2022-07-07 18:36:17
...
<!DOCTYPE html>
<html>

<head>
    <style>
        body{
            width: 1150px;
            margin: 0 auto;
        }
        .basic {
            height: 50px;
        }
        .yumi {
            font-size: 18px;
            color: darkred;
            font-weight: bold;
        }
        .but{
            width: 200;
            margin-left:400px;
            height: 100px;
        }
        #result{
            margin-left: 400px;
        }
        #result label{
            font-size: 18px;
            color: black;
            font-weight: bold;
        }
    </style>
    <script>
        function change1() {
            var num1 = document.getElementById('l5').value; //获取第一个输入框的值
            if (isNaN(num1)) { //如果为非数字，结果为空
                document.getElementById('l1').value = "";
            } else { //将第二个输入框设置为美元值乘以汇率的结果
                document.getElementById('l1').value = num1;
            }
        }
        function change5() {
            var num1 = document.getElementById('l1').value; //获取第一个输入框的值
            if (isNaN(num1)) { //如果为非数字，结果为空
                document.getElementById('l5').value = "";
            } else { //将第二个输入框设置为美元值乘以汇率的结果
                document.getElementById('l5').value = num1;
            }
        }
        function compute(){
            document.getElementById("result").innerHTML="";
            var num1=Number(document.getElementById("l1").value);
            var num2=Number(document.getElementById("l2").value);
            var num3=Number(document.getElementById("l3").value);
            var num4=Number(document.getElementById("l4").value);
            var total=num1+num2+num3+num4;
            var rd=document.getElementById("rd").value;
            var res=80000000/(3*total*rd);
            document.getElementById("result").innerHTML="<label>当前行株距：每亩"+res+"株</label>";
        }
    </script>
</head>

<body>
    <div class="basic">
        <label>边距：</label>
        <input id="l1" style="width: 60px;" type="number" value="40" onchange="change5()">
        <label>厘米</label>
        &nbsp;&nbsp;&nbsp;
        <lable class="yumi">植株</lable>
        &nbsp;&nbsp;&nbsp;
        <label>行距1：</label>
        <input id="l2" style="width: 60px;" type="number" value="38">
        <label>厘米</label>
        &nbsp;&nbsp;&nbsp;
        <lable class="yumi">植株</lable>
        &nbsp;&nbsp;&nbsp;
        <label>行距2：</label>
        <input id="l3" style="width: 60px;" type="number" value="60">
        <label>厘米</label>
        &nbsp;&nbsp;&nbsp;
        <lable class="yumi">植株</lable>
        &nbsp;&nbsp;&nbsp;
        <label>行距3：</label>
        <input id="l4" style="width: 60px;" type="number" value="38">
        <label>厘米</label>
        &nbsp;&nbsp;&nbsp;
        <lable class="yumi">植株</lable>
        &nbsp;&nbsp;&nbsp;
        <label>边距：</label>
        <input id="l5" style="width: 60px;" type="number" value="40" onchange="change1()">
        <label>厘米</label>
    </div>
    <div class="but">
        <label>柱距：</label>
        <input id="rd" type="text" type="number">
        <label>厘米</label>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button onclick="compute()">计算</button>
    </div>
    <div id="result"></div>
</body>

</html>
总结

其中最值得关注的是input的onchange属性的应用，可以实现两个input的内容同步