<!DOCTYPE html>
<meta charset="UTF-8">
<title>我的自由页面</title>
<style>
/* 在这里写你的 CSS 样式 */
body { font-family: sans-serif; padding: 20px; text-align: center; }
button { padding: 10px 20px; margin: 10px; font-size: 16px; cursor: pointer; }
#messageBox { margin-top: 20px; padding: 10px; border: 1px solid #ccc; min-height: 50px; }
</style><h1>欢迎来到我的自由页面</h1>
<p>下面是一些可以交互的按钮:</p>
<button id="btn1">点我一下</button>
<button id="btn2">显示时间</button>
<button id="btn3">清空消息</button>
<div id="messageBox">
这里是消息显示区域
</div>
<script>
// 在这里写你的 JavaScript 交互代码
const btn1 = document.getElementById('btn1');
const btn2 = document.getElementById('btn2');
const btn3 = document.getElementById('btn3');
const messageBox = document.getElementById('messageBox');
btn1.addEventListener('click', () => {
messageBox.innerHTML = '你点击了按钮一!';
});
btn2.addEventListener('click', () => {
const now = new Date();
messageBox.innerHTML = `当前时间是:${now.toLocaleTimeString()}`;
});
btn3.addEventListener('click', () => {
messageBox.innerHTML = '消息已清空';
});
</script>