1

我有一个项目，我必须在监视器上输出一些安全信息。我让它工作得很好，但其中的日期是动态的，我需要一个表格来让任何人都可以轻松更改信息。这是其中一页的代码。

<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？

4

1 回答 1

0

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

这是方法一（带表单）:: 像这样在 body 标签之前输入表单 -

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

正如你所看到的，这个表单基本上会调用同一个页面本身并附加表单参数。因此，如果您输入一个日期，比如“4/27/2013”​​，然后按 ENTER，您最终会被重定向到同一页面，但这次它最后会显示 ?then=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];

希望这可以帮助。

于 2013-04-09T19:40:53.133 回答