<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>其他事件示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            margin: 0;
            height: 1000px;
            background: #f5f7fa;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            margin-bottom: 30px;
        }
        .section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        h2 {
            color: #333;
            margin-bottom: 15px;
            font-size: 18px;
        }
        .image-container {
            width: 100%;
            height: 200px;
            border: 1px solid #ddd;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            margin: 10px 0;
        }
        img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 8px;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
        }
        .scroll-info {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            padding: 10px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            font-size: 14px;
        }
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #007bff;
            color: white;
            border: none;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .back-to-top.visible {
            opacity: 1;
        }
        .size-info {
            margin: 10px 0;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 4px;
            font-size: 14px;
        }
        .example {
            width: 200px;
            height: 100px;
            background: #e3f2fd;
            border: 2px solid #2196f3;
            padding: 10px;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>其他事件示例</h1>
        
        <!-- 图片加载事件 -->
        <div class="section">
            <h2>1. 图片加载事件</h2>
            <div class="image-container">
                <img id="testImage" src="" alt="测试图片">
            </div>
            <div class="status" id="imageStatus">等待加载图片...</div>
        </div>
        
        <!-- 尺寸相关 -->
        <div class="section">
            <h2>2. 尺寸和位置</h2>
            <div class="example" id="sizeExample">尺寸测试元素</div>
            <div class="size-info" id="sizeInfo">元素尺寸和位置信息将显示在这里</div>
        </div>
        
        <!-- 页面加载事件 -->
        <div class="section">
            <h2>3. 页面加载事件</h2>
            <div class="status" id="loadStatus">等待页面加载...</div>
        </div>
    </div>
    
    <div class="scroll-info" id="scrollInfo">
        滚动位置: 0px
    </div>
    
    <button class="back-to-top" id="backToTop">↑</button>

    <script>
        // 获取元素
        const testImage = document.getElementById('testImage');
        const imageStatus = document.getElementById('imageStatus');
        const sizeExample = document.getElementById('sizeExample');
        const sizeInfo = document.getElementById('sizeInfo');
        const loadStatus = document.getElementById('loadStatus');
        const scrollInfo = document.getElementById('scrollInfo');
        const backToTop = document.getElementById('backToTop');

        // 1. 图片加载事件
        testImage.addEventListener('load', function() {
            imageStatus.textContent = '图片加载完成';
            imageStatus.style.backgroundColor = '#d4edda';
            console.log('图片加载完成');
            console.log('图片宽度:', this.width);
            console.log('图片高度:', this.height);
        });

        // 图片加载失败事件
        testImage.addEventListener('error', function() {
            imageStatus.textContent = '图片加载失败，显示默认图片';
            imageStatus.style.backgroundColor = '#f8d7da';
            this.src = 'https://via.placeholder.com/400x200?text=加载失败';
        });

        // 设置图片源
        testImage.src = 'https://picsum.photos/400/200?random=1';

        // 2. 页面滚动事件
        window.addEventListener('scroll', function() {
            const scrollTop = window.scrollY;
            scrollInfo.textContent = `滚动位置: ${scrollTop}px`;
            
            // 滚动超过300px显示返回顶部按钮
            if (scrollTop > 300) {
                backToTop.classList.add('visible');
            } else {
                backToTop.classList.remove('visible');
            }
        });

        // 返回顶部按钮点击事件
        backToTop.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 3. 页面加载事件
        window.addEventListener('load', function() {
            loadStatus.textContent = '所有资源加载完成';
            loadStatus.style.backgroundColor = '#d4edda';
            console.log('所有资源加载完成');
        });

        // DOM加载事件
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM加载完成');
            
            // 获取元素尺寸和位置
            if (sizeExample) {
                sizeInfo.textContent = `元素宽度: ${sizeExample.offsetWidth}px, 元素高度: ${sizeExample.offsetHeight}px, 左边距: ${sizeExample.offsetLeft}px, 上边距: ${sizeExample.offsetTop}px`;
                console.log('元素宽度:', sizeExample.offsetWidth);
                console.log('元素高度:', sizeExample.offsetHeight);
                console.log('元素左边距:', sizeExample.offsetLeft);
                console.log('元素上边距:', sizeExample.offsetTop);
            }
        });
    </script>
</body>
</html>