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


<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="+res+"株";
        }
    script>
head>

<body>
    <div class="basic">
        <label>边距:label>
        <input id="l1" style="width: 60px;" type="number" value="40" onchange="change5()">
        <label>厘米label>
           
        <lable class="yumi">植株lable>
           
        <label>行距1:label>
        <input id="l2" style="width: 60px;" type="number" value="38">
        <label>厘米label>
           
        <lable class="yumi">植株lable>
           
        <label>行距2:label>
        <input id="l3" style="width: 60px;" type="number" value="60">
        <label>厘米label>
           
        <lable class="yumi">植株lable>
           
        <label>行距3:label>
        <input id="l4" style="width: 60px;" type="number" value="38">
        <label>厘米label>
           
        <lable class="yumi">植株lable>
           
        <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>
              
        <button onclick="compute()">计算button>
    div>
    <div id="result">div>
body>

html>

总结

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

你可能感兴趣的:(学习,javascript)