KART 代码运行器

HTML 代码编辑器

<!DOCTYPE html>
<html>
<head>
    <title>我的页面</title>
</head>
<body>
    <h1>欢迎使用KART代码运行器</h1>
    <p>在这里编写HTML、CSS和JavaScript代码</p>
    <div id="output"></div>
</body>
</html>

运行结果

CSS 代码编辑器

body {
    font-family: Arial, sans-serif;
    background-color: #f0f8ff;
    padding: 20px;
    text-align: center;
}

h1 {
    color: #3498db;
}

p {
    color: #2c3e50;
    font-size: 18px;
}

运行结果

JavaScript 代码编辑器

document.addEventListener('DOMContentLoaded', function() {
    const outputDiv = document.getElementById('output');
    if (outputDiv) {
        outputDiv.innerHTML = '<h2>JavaScript已成功运行！</h2>';
        outputDiv.innerHTML += '<p>当前时间: ' + new Date().toLocaleTimeString() + '</p>';
        
        // 创建动态效果
        setInterval(() => {
            outputDiv.style.color = '#' + Math.floor(Math.random()*16777215).toString(16);
        }, 1000);
    } else {
        console.log('未找到输出元素');
    }
});

运行结果

混合模式编辑器

<!DOCTYPE html>
<html>
<head>
    <title>混合模式示例</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .card {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            padding: 30px;
            max-width: 600px;
            text-align: center;
        }
        
        h1 {
            color: #3498db;
            margin-bottom: 20px;
        }
        
        button {
            background: #3498db;
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 50px;
            font-size: 16px;
            cursor: pointer;
            margin: 20px 0;
            transition: transform 0.3s, background 0.3s;
        }
        
        button:hover {
            background: #2980b9;
            transform: translateY(-3px);
        }
        
        #colorBox {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            border-radius: 10px;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            transition: background 0.5s;
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>混合模式示例</h1>
        <p>此示例演示了HTML、CSS和JavaScript的混合使用</p>
        <button id="actionBtn">点击我！</button>
        <div id="colorBox">颜色方块</div>
    </div>

    <script>
        document.getElementById('actionBtn').addEventListener('click', function() {
            const colors = ['#3498db', '#2ecc71', '#e74c3c', '#9b59b6', '#f1c40f', '#1abc9c'];
            const randomColor = colors[Math.floor(Math.random() * colors.length)];
            
            const colorBox = document.getElementById('colorBox');
            colorBox.style.background = randomColor;
            colorBox.textContent = '颜色: ' + randomColor;
            
            this.textContent = '再点一次！';
        });
    </script>
</body>
</html>

运行结果

KART 代码运行器

用户登录

创建账户

找回密码