如何获取用户名，并将其与消息一起显示，具体取决于一天中的时间(Javascript）

How to take in users name, and display it along with a message, depending on the time of day (Javascript)?

本文关键字：取决于 显示 Javascript 时间 一起 一天 用户 获取 何获取 消息      更新时间：2023-09-26

我正在尝试显示用户名，以及一条消息，具体取决于一天中的什么时间。我创建了一个函数来执行此操作，我使用提交按钮调用了该函数。但是，当我在网页上单击提交时，没有任何反应？，我在每条消息后输入了"名称"，以便它显示用户在表单中输入的名称。我在代码中做错了什么，我现在很困惑。感谢您提供的任何帮助，我将代码放在下面： 

<div id="main"><h2>Type your name in here:</h2>
<script type="text/javascript">
function runfunction()
{
var Datenow = new Date();   
 (Datenow.getHours() < 12 )  {     document.write("Good Morning!"); } else  
if ( Datenow.getHours() >= 12 && Datenow.getHours() <= 17 ) {  document.write("Good Afternoon,'Name'!"); } else   
if ( Datenow.getHours() > 17 && Datenow.getHours() <= 24 ) {     document.write("Good Evening,'Name'!"); } else  
if ( Datenow.getHours() > 24) { document.write("It's pretty late, 'Name', you should probably go to bed!");
}
</script>
<form action="">
<input type="text" name="Name" size="7" value="Name" />
<input type="button" name="process" onclick="runfunction()" value="Submit" />
</form>
</div>

你的代码几乎没有问题：

  1. 您需要在加载元素后放置script标签。
  2. 不要使用 document.write() .
  3. 函数runfunction()没有结束大括号}
  4. 第一个if语句缺少if关键字。

<body>
  <div id="main">
    <h2>Type your name in here:</h2>
    <form action="">
      <input type="text" name="Name" size="7" value="Name" />
      <input type="button" name="process" value="Submit" />
      <div id="message"></div>
    </form>
  </div>
  <script type="text/javascript">
    document.querySelector("input[type=button]").onclick = function () {
        var name = document.querySelector("input[type=text]").value;
        var m = document.getElementById("message");
        var Datenow = new Date().getHours();
        if (Datenow < 12) {
          m.innerHTML = "<br />Good Morning! " + name + "!";
        } else
        if (Datenow >= 12 && Datenow <= 17) {
          m.innerHTML = "<br />Good Afternoon, " + name + "!";
        } else
        if (Datenow > 17 && Datenow <= 24) {
          m.innerHTML = "<br />Good Evening, " + name + "!";
        } else
        if (Datenow > 24) {
          m.innerHTML = "<br />It's pretty late, " + name + ", you should probably go to bed!";
        }
      }
  </script>
</body>

当您单击<form>中的<input type="button" />时，它会提交<form>;如果没有指定的action属性，表单将提交到当前URL，这会导致页面重新加载。

若要防止这种情况，可以在要调用的函数中使用event.preventDefault()（阻止默认操作）或return false：

function runfunction(e) {
  (e || Window.event).preventDefault();
  var Datenow = new Date(),
    currentHour = Datenow.getHours(),
      name = document.querySelector('input[name=Name]').value;
  if (currentHour < 12) {
    document.write("Good Morning!");
  } else
  if (currentHour >= 12 && currentHour <= 17) {
    document.write("Good Afternoon, " + name + "!");
  } else
  if (currentHour > 17 && currentHour <= 24) {
    document.write("Good Evening, " + name + "!");
  } else
  if (currentHour > 24) {
    document.write("It's pretty late, " + name + " you should probably go to bed!");
  }
}
<form action="">
<input type="text" name="Name" size="7" value="Name" />
<input type="button" name="process" onclick="runfunction(event)" value="Submit" />
</form>

此外，最好缓存一个变量（当前小时），而不是重复调用相同的方法，以便在每次脚本移动到后续else if评估时获得相同的值。

顺便说一下，小时永远不会大于或等于24;它会从23:59:59直接移动到00:00:00。

您有一些小错误，例如忘记关闭函数。您可以在单击时返回 false 以阻止表单提交

function runfunction()
{
  var Datenow = new Date();
  if(Datenow.getHours() < 12 )  {    
    
   document.write("Good Morning!"); 
  } 
  else if ( Datenow.getHours() >= 12 && Datenow.getHours() <= 17 ) 
  { 
    document.write("Good Afternoon,'Name'!"); 
  } 
  else if ( Datenow.getHours() > 17 && Datenow.getHours() <= 24 )         {             document.write("Good Evening,'Name'!"); 
  }
  else  if ( Datenow.getHours() > 24) { 
    document.write("It's pretty late, 'Name', you should probably go to bed!");
}}
<div id="main"><h2>Type your name in here:</h2>
<form action="">
<input type="text" name="Name" size="7" value="Name" />
<input type="button" name="process" onclick="runfunction(); return false;" value="Submit" />
</form>
</div>

相关文章：