Question

我尝试过以下代码来显示消息，但仍然没有能够做到这一点......请帮助......

我想根据值显示几条条件消息回。即，如果返回的numdays = =＆lt; 29消息应该是＆＃34; OK＆＃34; 否则消息应该是＆＃34;不好＆＃34; 请忽略代码中的菜单位，此刻无关紧要。

`<!DOCTYPE html>
    <html>
     <head>

    <style>


    div {
        border-radius: 30px;
        background-color: LIGHTBLUE;
        padding: 10px;
    }
    input[type=date], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    input[type=submit] {
        width: 100%;
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }
    input { font-size: 18px; 

        text-align: center;

    }
    input[type=SUBMIT]:hover {
        background-color: #45a049;
    }


    input[type="text"], select {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 4px;
        box-sizing: border-box;
    }

    }
     ul {list-style: none;padding: 0px;margin: 0px;}
      ul li {display: block;position: relative;float: left;border:1px solid #000}
      li ul {display: none;}
      ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
               white-space: nowrap;color: #fff;}
      ul li a:hover {background: #f00;}
      li:hover ul {display: block; position: absolute;}
      li:hover li {float: none;}
      li:hover a {background: #f00;}
      li:hover li a:hover {background: #000;}
      #drop-nav li ul li {border-top: 0px;}
    </style>
    </head>

    <body>
    <ul id="drop-nav">
      <li><a href="#">Support</a></li>
      <li><a href="#">Web Design</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
    <br>
    <CENTER>

        <h1>BCG ASSESSMENT MODULE</H1>


        <div id="reserve_form">

        <div id="pickup_date"><label class="form">DATE OF BIRTH:</label>
        <input autofocus required type="date" class="textbox" id="pick_date" name="pickup_date" onchange="cal()"</p></div>
    <div id="dropoff_date"><label class="form">DATE BCG GIVEN:</label><input  type="date" class="textbox" id="drop_date" name="dropoff_date" onchange="cal()"/></div>

        <div id="numdays"><label class="form">CHILD'S AGE IN DAYS:</label><input placeholder="you can not type in this..." type="number" class="textbox" id="numdays2" name="numdays1" readonly /></div>








      <script type="text/javascript">
            function GetDays(){
                    var dropdt = new Date(document.getElementById("drop_date").value);
                    var pickdt = new Date(document.getElementById("pick_date").value);
                    return parseInt((dropdt - pickdt) / (24 * 3600 * 1000));
            }

            function cal(){
            if(document.getElementById("drop_date")){
                document.getElementById("numdays2").value=GetDays();

            } } 

          function myfunction(){
          var diff =  "numdays2";// the calculated  difference between two dates in days, assumed positive

              if(diff<= 28) {
                            document.getElementById("message").innerHTML = "OK";    // you will need a <span> with the id "message" to contain the displayed message.
    }
              else {
                            document.getElementById("message").innerHTML = "Not OK";
    }
          }



        </script>
               <p id="message"></p>message</br>
    </body>
        </html>`

根据返回的值显示消息

0 个答案: