ArtTemplate

代码编辑器

0/0

<!DOCTYPE html>
<html>
<head>
    <title>示例页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
       .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 10px;
            display: inline-block;
            transition: background-color 0.3s;
        }
    </style>
</head>
<body>
    <h1>欢迎来到示例页面</h1>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    
    <button id="changeColorBtn">更改颜色</button>
    
    <script>
        // DOM 操作示例
        const boxes = document.querySelectorAll('.box');
        boxes.forEach((box, index) => {
            box.addEventListener('click', function() {
                this.style.backgroundColor = `rgb(${(index + 1) * 50}, 0, 0)`;
            });
        });
        
        // 事件处理示例
        document.getElementById('changeColorBtn').addEventListener('click', function() {
            boxes.forEach(box => {
                box.style.backgroundColor = 'green';
            });
            
            // 控制台输出示例
            console.log('所有方块颜色已更改为绿色');
        });
        
        // 定时器示例
        setTimeout(() => {
            console.log('这是一个 2 秒后执行的定时器');
        }, 2000);
        
        // Promise 示例
        function fetchData() {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve({name: '示例数据', value: 42});
                }, 1500);
            });
        }
        
        fetchData().then(data => {
            console.log('异步获取的数据:', data);
        });
    </script>
</body>
</html>

代码编辑器

运行结果