1. 创建HTML文件
首先，你需要创建一个HTML文件（比如叫做demo.html），这个文件将作为你的网页的基础。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单JavaScript Demo</title>
</head>
<body><h1>JavaScript 日期时间显示 Demo</h1><button id="showDate">显示当前日期和时间</button><p id="dateDisplay">点击上面的按钮查看日期和时间。</p><script src="demo.js"></script>
</body>
</html>
2. 创建JavaScript文件
然后，创建一个JavaScript文件（比如叫做demo.js），这个文件将包含控制按钮点击后显示日期和时间的JavaScript代码。
document.addEventListener('DOMContentLoaded', function() {var showDateButton = document.getElementById('showDate');var dateDisplay = document.getElementById('dateDisplay');showDateButton.addEventListener('click', function() {var now = new Date();var formattedDate = now.getFullYear() + '-' +('0' + (now.getMonth() + 1)).slice(-2) + '-' +('0' + now.getDate()).slice(-2) + ' ' +('0' + now.getHours()).slice(-2) + ':' +('0' + now.getMinutes()).slice(-2) + ':' +('0' + now.getSeconds()).slice(-2);dateDisplay.textContent = formattedDate;});
});
3. 合并HTML和JavaScript
你已经创建了HTML和JavaScript文件，并将它们链接在了一起。现在，你可以通过任何支持HTML的浏览器（如Chrome, Firefox, Safari等）打开demo.html文件来查看你的Demo。
4. 测试
打开demo.html文件后，你应该能看到一个标题和一个按钮，点击这个按钮后，下面的段落将显示当前的日期和时间。
这个简单的Demo展示了如何结合HTML和JavaScript来创建动态网页内容。你可以在此基础上进一步扩展，比如添加更多的按钮、输入框、表格等HTML元素，并使用JavaScript来增强它们的功能。
