h1 标签内的函数？

Question

我想将我的函数插入 h1 标签内，这样它就会根据一天中的时间向用户致以问候。这是我的时间函数，但我如何将它实现到 h1 中？

var today = new Date();
var curHr = today.getHours();
function greeting() {
if ( curHr < 12) {
    document.write('Good Morning');
} else if ( curHr < 18) {
    document.write('Good Afternoon');
} else if ( curHr < 20) {
    document.write('Good Evening')
} else {
    document.write('Good Night');
}
}

Answer 1

您给您的 H1 一个 ID

<h1 id="goeshere">Message</h1>

然后将

document.write

替换为类似

document.getElementById('goeshere').textContent = 'Good Morning'.

并在所有条件下都这样做。

你不将JavaScript放入H1中，并且你不使用

document.write

，永远！

var today = new Date();
var curHr = today.getHours();
function greeting() {
    if ( curHr < 12) {
        document.getElementById('goeshere').textContent = 'Good Morning';
    } else if ( curHr < 18) {
        document.getElementById('goeshere').textContent = 'Good Afternoon';
    } else if ( curHr < 20) {
        document.getElementById('goeshere').textContent = 'Good Evening';
    } else {
        document.getElementById('goeshere').textContent = 'Good Night';
    }
}

greeting()

<h1 id="goeshere">Message</h1>

Answer 2

您将调用它的脚本放在那里。

<h1><script>greeting()</script></h1>

Answer 3

我认为你正在尝试编写一个支持更新标题标签的函数。

您应该在函数中获取日期（全局变量中不需要）。该函数应该返回所需的值（而不是document.write

）。并且您应该适当地使用该函数，例如：

function greeting() {
  var today = new Date();
  var curHr = today.getHours();
  if ( curHr < 12) {
    return 'Good Morning';
  } else if ( curHr < 18) {
    return 'Good Afternoon';
  } else if ( curHr < 20) {
    return 'Good Evening';
  } else {
    return 'Good Night';
  }
}

var h1 = document.getElementById('my-header');
// Check if such header actually exists
if (h1) {
  h1.innerHTML = greeting();
}

假设代码在

h1标记之后之后执行（当我们访问它时，该标记应该可用），例如：

<h1 id="my-header">Default header</h1>
<!-- ... -->
<script>/* here */</script>

Answer 4

  var today = new Date();
  var curHr = today.getHours();
  function greeting() {
  if ( curHr < 12) {
  return 'Good Morning';
  } else if ( curHr < 18) {
  return  'Good Afternoon';
  } else if ( curHr < 20) {
  return  'Good Evening';
  } else {
  return 'Good Night';
  }
}
 var xyz= greeting()
 //alert(xyz)
 document.getElementById('yourElementId').textContent =xyz

看看

这里是工作示例。

Answer 5

“h1标签内的函数调用？”

而不是 h1 标签内的函数？ JavaScript 函数可以通过几种不同的方式在 HTML 中调用：

内联事件处理程序：

使用 onclick、onchange 等属性。

事件监听器：

通过JavaScript的addEventListener方法。

内联脚本：

通过使用标签将脚本直接包含在 HTML 文件中。

外部脚本：

使用标签内的 src 属性链接外部 JavaScript 文件。