Question

我有一个项目，我必须在监视器上输出一些安全信息。我有完美的工作，但它的日期是动态的，我需要一个表格，以方便任何人更改信息。这是其中一个页面的代码。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>First Aid Days</title>
    <style type="text/css">
        /*circle image */
        #imgFirstaid { position: absolute; top: 10px; left: 110px; z-index: 0; } 

        /* large xx of days in the center of the circle */
        #strFirstaid{ width: 579px; height: 579px; text-align: center; margin-top: 125px; position: absolute; top: 25px; left: 115px; z-index: 0; font-family: calibri; font-weight: bold; font-size: 250px; color: #403152;  } 

        /* small date at the bottom of the circle */
        #txtFirstaid{ width: 579px; height: 579px; text-align: center; margin-top: 365px; position: absolute; top: 25px; left: 115px; z-index: 0; font-family: calibri; font-size: 28px; color: #403152;  }
    </style>
    <script>

    function GetFirstaid(){

    var then = new Date(2013, 2, 27), // month is zero based, i.e. jan = 0 (yyyy, m, dd)
        now = new Date;               // no arguments -> current date
    // 24 hours, 60 minutes, 60 seconds, 1000 milliseconds
    out=Math.abs((now - then) / (1000 * 60 * 60 * 24)); // round the amount of days
    rou=Math.round(out)
    document.getElementById('strFirstaid').innerHTML=rou;
    }
    window.onload=function(){GetFirstaid();}//call when everything has loaded

    </script>
</head>

<body>
    <div id="imgFirstaid"><img src="../images/lg-f.png" /></div>
    <div id="strFirstaid"></div>
    <div id="txtFirstaid">_____________________ <br />03/27/2013</div> <!-- enter the date as normal -->
</body>
</html>

就像我说的那样，输出效果很好但是我想弄清楚我是否可以在这个html中使用某个表单，或者我是否需要重新开始并使用一些ASP或javascript？

Answer 1

有两种方法可以做到这一点。一个（就像你提到的那样）是通过表格;另一种是使用“提示”javascript方法询问日期。

这是方法一（带表格）:: 抛出身体标签之前的形式 -

    <form action="">
      Enter date: <input type="text" name="then" value="" />
      <input type="submit" value="Submit" />
    </form>

正如您所看到的，此表单基本上会调用同一页面并附加表单参数。因此，如果您键入日期，比如说“4/27/2013”，然后按ENTER键，您最终会被重定向到同一页面，但这次它最终将具有？= 4％2F27％2F2013。

现在，您只需要在GetFirstaid方法中解析它。因此，不要使用“then”变量中的硬编码日期，而是执行此操作 -

        var thenStr = window.location.search.substr(6);
        var thenDtArr = thenStr.split("%2F");
        var then = new Date(thenDtArr[2], thenDtArr[0], thenDtArr[1]);

您（显然）应该执行所有错误处理和数字格式检查;我已经避免这样做，以使这个讨论变得简单。

这是方法二（使用提示方法）:: 在此方法中，您不需要表单。您只需点击该页面，它所做的第一件事就是提示您输入日期。所以你需要的就是你的GetFirstaid方法（在方法的开头） -

        thenStr = prompt("Please Enter a date:");
        var then = null;
        if (thenStr != null && thenStr != "") {
          var thenDtArr = thenStr.split("/");
          then = new Date(thenDtArr[2], thenDtArr[0], thenDtArr[1]);
        }

我要做的另一件事是更新“txtFirstaid”字段，以反映用户输入的日期。所以，就在你渲染strFirstaid的地方，再添加一行来更新txtFirstaid，就像这样 -

    document.getElementById('strFirstaid').innerHTML=rou;
    document.getElementById('txtFirstaid').innerHTML = "_____________________ <br />"+thenDtArr[0]+"/"+thenDtArr[1]+"/"+thenDtArr[2];

希望这有帮助。

关于表单的建议，用于动态数据输入到html页面

1 个答案: