test

FromOceans ·2026-02-16

<!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>


还没有评论