儿童身高预测网页应用-CSDN博客

本文链接：https://blog.csdn.net/u012271799/article/details/115909952
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    body,
    td,
    th {
      font-size: 12px;
    }

    a {
      color: #006699;
      text-decoration: none;
    }

    a:hover {
      color: #f60;
      text-decoration: underline;
    }

    dd,
    dl,
    ul,
    li,
    p,
    form {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      font-size: 14px;
      margin: 0;
      padding: 0;
      line-height: 28px;
    }

    .but {
      color: #FF8320;
      border: 1px solid #ccc;
      background: #fff;
      cursor: pointer;
      height: 25px;
      line-height: 25px;
      width: 80px;
    }

    .checkbox {
      border: 1px solid #FFD7B7;
      margin: 5px auto;
      background: #FFFBF4;
      padding: 15px;
      width: 600px;
    }

    .Test ul {
      margin: 0;
      padding: 0;
    }

    .Test li {
      border: 1px solid #FFFBF4;
      margin-bottom: 4px;
      cursor: pointer;
      width: 100%;
      height: 30px;
      line-height: 30px;
      padding-left: 5px;
      background: #FFFBF4
    }

    .Test li.myBox {
      border: 1px solid #e7e7e7;
      background: #f7f7f7;
    }

    .Problem {}

    .hidden {
      display: none;
    }

    #Result p {
      margin: 8px;
      padding: 8px;
      line-height: 25px;
      background: #FFF;
      width: 560px;
      border: 1px dotted #FF8E20;
    }

    #Result i {
      color: red;
      font-size: 16px;
      font-style: normal;
    }

    #fu,
    #mu {
      color: #ccc;
    }
  </style>
  <div class="checkbox">
    <div class="Test">
      <div id="Problem">
        <h3>儿童身高预测</h3>
        <form action="" method="get">
          <ul>
            <li>儿童性别：<input name="gender" type="radio">男孩<input name="gender" type="radio"> 女孩 </li>

            <li>爸爸的身高：<input type="text" size="8" maxlength="8" id="fu" fu="例：175" placeholder="例：175"> 厘米</li>

            <li>妈妈的身高：<input type="text" size="8" maxlength="8" id="mu" mu="例：165" placeholder="例：165"> 厘米</li>
          </ul>
          <input type="button" class="but" id="btn" value="查看结果" />
          <input type="button" class="but" id="reset" value="重新测试" onclick="" />
        </form>
      </div>

      <div id="Result">
        <h3>测试结果</h3>
        <p>
          小孩未来的身高是：<i id="Result2">未知</i> 厘米
        </p>
      </div>
    </div>
  </div>
  <script type="text/javascript">

  </script>

  注解：<br> 儿子成年身高=[(父身高+母身高)/2]×1.08

  <br> 女儿成年身高=(父身高×0.923+母身高)

  <br> 错误提示有提示：

  <br> 没选择儿童性别！
  <br> 输入父母身高不是数字！
  <br>
  <font color="red">输入父母身高要都是55-250之间！</font> <br>


  <script>
    // 获取查看结果
    let ckjg = document.querySelectorAll('.but')[0]
    // 获取重新测试
    let cxcs = document.querySelectorAll('.but')[1]
    // 获取性别男
    let boy = document.querySelectorAll('input')[0]
    // 获取性别女
    let girl = document.querySelectorAll('input')[1]

    let ul = document.querySelector('ul')

    // 获取结果框
    let jg = document.querySelector('#Result2')
    let fu;
    let mu;
    // 给参考结果绑定点击事件
    ckjg.addEventListener('click', function () {
      // 获取爸爸身高
      fu = document.querySelectorAll('input')[2].value
      // 获取妈妈身高
      mu = document.querySelectorAll('input')[3].value

      if (fu <= 250 && mu <= 250 && fu >= 50 && mu >= 50) {
        if (boy.checked) {

          jg.innerHTML = Math.round(((+fu + +mu) / 2) * 1.08)

        }
        else if (girl.checked) {

          jg.innerHTML = Math.round((+fu * 0.923 + mu))

        } else {
          alert('没选择儿童性别！请重新选择')
        }
      } else {
        alert('输入父母身高要都是55-250之间')
      }
    })


    // 重新测试
    cxcs.addEventListener('click', function () {
      document.querySelectorAll('input')[2].value = ''
      document.querySelectorAll('input')[3].value = ''
      let radio = ul.children[0].querySelectorAll('input')

      for (let i = 0; i < radio.length; i++) {
        radio[i].checked = false
      }
    })


  </script>
  </body>

</html>