HTML预览 - NexusTools

<div class="container">
    <h1>Hello World!</h1>
    <p>这是一个实时预览示例</p>
    <button onclick="sayHello()">点击我</button>
    <div id="output"></div>
</div>

.container {
    font-family: -apple-system, sans-serif;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #a855f7;
    margin-bottom: 16px;
}

p {
    color: #666;
    margin-bottom: 20px;
}

button {
    padding: 12px 24px;
    background: linear-gradient(135deg, #FFB6D9, #D4B8E8);
    border: none;
    border-radius: 8px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: transform 0.2s;
}

button:hover {
    transform: scale(1.05);
}

#output {
    margin-top: 20px;
    padding: 16px;
    background: #f5f5f5;
    border-radius: 8px;
    min-height: 40px;
}

let count = 0;

function sayHello() {
    count++;
    document.getElementById('output').innerHTML = 
        '你点击了 ' + count + ' 次！<br>' +
        '当前时间: ' + new Date().toLocaleTimeString();
}

实时预览