1

如果您运行此测试代码，您将看到按钮上堆叠的日期。我想要一行中的日期和按钮。请记住，这是我的第一个 javascript 测试代码。

<html>

<head>
<script type="text/javascript">
<!--
var currentTime = new Date()
var month = currentTime.getMonth() + 1
var day = currentTime.getDate()
var year = currentTime.getFullYear()
document.write("Today's Date" + month + "/" + day + "/" + year)
//-->

</script>
</head>
<body>

<form name=myform>
<input type=button value="add days" onClick="prompt('How many days do you want to add?','5 or 6');">
</form>


</body>
</html>
4

3 回答 3

2

乔纳森是对的，document.write 真的不是最好的解决方案，除非你用它来测试什么的。

只是这样做

    <html>

      <head>
        <script type="text/javascript">
          var currentTime = new Date();
          var month = currentTime.getMonth() + 1;
          var day = currentTime.getDate();
          var year = currentTime.getFullYear();
          var dateString = "Today's Date " + month + "/" + day + "/" + year;
          function loadDate(){
            document.getElementById('dateSpan').innerHTML = dateString;
          }
        </script>

      </head>
      <body onload='loadDate()'> 
        <form name=myform>
          <span id='dateSpan'></span><input type=button value="add days" onclick="promptprompt('How many days do you want to add?','5 or 6')"/>
        </form>
      </body>
    </html>
于 2012-05-20T02:13:37.863 回答
1

不要使用document.write. 相反，更合适的方法是使用页面上的元素：

<form name="myForm">
  <span id="todaysDate"></span>
  <input type="button" />
</form>

此时，您可以将日期值分配给 id 为“todaysDate”的元素：

<script type="text/javascript">
  // Build your variables and message
  var currentTime = new Date();
  var month = currentTime.getMonth() + 1;
  var day = currentTime.getDate();
  var year = currentTime.getFullYear();
  var msg = document.createTextNode("Date: "+month+"/"+day+"/"+year);

  // When the body has loaded, set our message
  document.body.onload = function(){
      document.getElementById("todaysDate").appendChild(msg);
  };
</script>
于 2012-05-20T02:02:45.890 回答
0

您最初遇到重叠的原因不是日期字符串位于按钮的顶部，而是相反（按钮位于日期字符串的顶部）。如果使用的话，应该将 document.write() 放在 <body> 中其输出作为 HTML 有意义的确切位置。将它放在 <head> 中是没有意义的；您的浏览器对此感到困惑，并盲目地尝试立即执行它，但不更新布局（显然尚未初始化），所以稍后 <body> 中的第一件事（恰好是按钮）覆盖它。

这可能看起来像 OLD STYLE。这与当前的最佳实践编码标准不符，不应完全 模仿。但它可能会让您更好地了解“真正”发生的事情。请注意，这显示了一种使用“innerHTML”初始化表单的方法。它还说明了一种标记表单字段的方法。

我同意这里不应该使用“document.write”。它过于不灵活（总是在从服务器获取页面时执行，但在用户单击“返回”按钮时可能不会执行，并且您的 Javascript 程序无法用于其他目的，例如“重置表单”）。在许多情况下，它也确实会降低性能。

对齐表单上的所有输入字段以使它们“漂亮”和在整个表单周围绘制一个框都是很常见的。这样的事情很容易做到；但是，为了专注于您的问题领域，此示例并未说明它们。

通过命名表单以及表单中的字段，并使用一些特定于浏览器的数组 mumbo-jumbo 来访问它们，曾经有可能（并且是典型的）根本不使用 getElementById() 来做到这一点。但是使用 getElementById() 的方式要简单得多，并且适用于所有浏览器，我什至不会说明它过去是如何完成的。

使用 window.onload= （注意函数名后面没有括号中的参数列表）不再是正确的做事方式。我使用它只是因为它非常简短，让读者能够专注于真正重要的事情。

<html>
<head>
<title>Example of setting a Form Input field</title>
<script type="text/javascript">
function showDefaultDate() {
        var dateInputField = document.getElementById("dateInputField");
        dateInputField.value = provideToday();
}

function provideToday() {
        var currentTime = new Date();
        var month = currentTime.getMonth() + 1;
        var day = currentTime.getDate();
        var year = currentTime.getFullYear();
        var dateString = month + "/" + day + "/" + year;
        return dateString;
}

function initializeForm() {
        showDefaultDate();
}

window.onload = initializeForm;
</script>
</head>
<body>
<form>
Today's Date:
<input type="text" size=" 25" id="dateInputField">
<input type="button" value="Miscellaneous Button">
<br>
Another Field:
<input type="text" size="30">
<br>
<br>
<input type="submit" value="Click Me When Done" style="margin-left: 20ex;">
</form>
</body>
</html>
于 2012-05-20T03:52:36.533 回答