<button onclick="">现在的时间是？</button>
常用的给这个button添加onclick事件的几种方式：
1、内联Javascript函数
可以直接在onclick属性中编写 JavaScript 代码。
这种方式简单直接，将函数定义在<script>标签中，然后在onclick属性中调用这个函数。
不过，这种方式会使 HTML 和 JavaScript 代码混合在一起，不利于代码的维护和分离。
例如：
点击查看代码
//方法一
<button onclick="showTime()">现在的时间是？</button>
<script>
function showTime() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
}
</script>
//方法二
<button onclick="console.log(new Date().toLocaleTimeString())">现在的时间是？</button>
2、使用匿名函数
也可以在onclick属性中直接定义一个匿名函数。
这里在onclick属性中定义了一个匿名函数，当按钮被点击时，这个匿名函数就会执行。
但同样，这种方式也会使 HTML 代码变得复杂，并且不利于代码的复用。
例如：
点击查看代码
<button onclick="(function() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
})()">现在的时间是？</button>
3、通过 JavaScript 获取元素并添加事件监听器（推荐方式）
可以先在 HTML 中给按钮一个id，然后在 JavaScript 中获取这个元素并添加事件监听器。
这种方式将 JavaScript 代码与 HTML 代码分离，更符合现代的编程规范。
首先通过document.addEventListener('DOMContentLoaded',...)确保在 DOM 加载完成后再获取元素，
然后使用document.getElementById('timeButton')获取按钮元素，
最后通过button.addEventListener('click',...)为按钮添加点击事件监听器。
这样的代码结构更清晰，便于维护和扩展。
例如：
点击查看代码
<button id="timeButton">现在的时间是？</button>
<script>
document.addEventListener('DOMContentLoaded', function() {
let button = document.getElementById('timeButton');
button.addEventListener('click', function() {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
let seconds = date.getSeconds();
alert('现在的时间是：'+ hours +':'+ minutes +':'+ seconds);
});
});
</script>
补充：
DOMContentLoaded 是指在 HTML 文档加载完成后，
DOM（Document Object Model）树已经构建完成并可被操作的状态。
这个事件通常会在页面上的所有资源都加载完毕后触发，包括图片、脚本等。
当 DOMContentLoaded 事件被触发时，
可以执行 JavaScript 代码来操作页面元素或动态加载其他资源。
需要注意的是，**虽然 DOMContentLoaded 表示 DOM 树已经构建完成**，
但并不代表所有的外部资源都已经加载完毕。
如果需要等待所有资源都加载完毕后再执行某些操作，
可以使用 window.load 事件或者 jQuery 的 $(document).ready() 方法。