h5/js/script.js

// H5页面交互脚本
document.addEventListener('DOMContentLoaded', function() {
    // 平滑滚动到锚点
    const smoothScroll = () => {
        const links = document.querySelectorAll('a[href^="#"]');
        
        links.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 20,
                        behavior: 'smooth'
                    });
                }
            });
        });
    };
    
    // 返回顶部按钮
    const backToTop = () => {
        const backButton = document.querySelector('.back-button');
        if (backButton && backButton.getAttribute('href') === '#') {
            backButton.addEventListener('click', function(e) {
                e.preventDefault();
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        }
    };
    
    // 目录生成（如果页面有目录区域）
    // const generateTOC = () => {
    //     const tocContainer = document.querySelector('.toc');
    //     if (!tocContainer) return;
        
    //     const sections = document.querySelectorAll('.section-title');
    //     if (sections.length === 0) return;
        
    //     const tocList = document.createElement('ul');
    //     tocList.className = 'toc-list';
        
    //     sections.forEach((section, index) => {
    //         const sectionId = `section-${index + 1}`;
    //         section.id = sectionId;
            
    //         const listItem = document.createElement('li');
    //         listItem.className = 'toc-item';
            
    //         const link = document.createElement('a');
    //         link.className = 'toc-link';
    //         link.href = `#${sectionId}`;
    //         link.textContent = section.textContent;
            
    //         listItem.appendChild(link);
    //         tocList.appendChild(listItem);
    //     });
        
    //     tocContainer.appendChild(tocList);
    // };
    
    // 夜间模式切换
    // const darkModeToggle = () => {
    //     const darkModeBtn = document.getElementById('dark-mode-toggle');
    //     if (!darkModeBtn) return;
        
    //     const body = document.body;
    //     const container = document.querySelector('.container');
        
    //     // 检查localStorage中的设置
    //     const isDarkMode = localStorage.getItem('darkMode') === 'true';
    //     if (isDarkMode) {
    //         body.classList.add('dark-mode');
    //         if (container) container.classList.add('dark-mode');
    //         darkModeBtn.textContent = '切换到日间模式';
    //     }
        
    //     darkModeBtn.addEventListener('click', () => {
    //         body.classList.toggle('dark-mode');
    //         if (container) container.classList.toggle('dark-mode');
            
    //         const isNowDark = body.classList.contains('dark-mode');
    //         localStorage.setItem('darkMode', isNowDark);
    //         darkModeBtn.textContent = isNowDark ? '切换到日间模式' : '切换到夜间模式';
    //     });
    // };
    
    // 添加夜间模式样式
    // const addDarkModeStyles = () => {
    //     if (!document.querySelector('#dark-mode-styles')) {
    //         const style = document.createElement('style');
    //         style.id = 'dark-mode-styles';
    //         style.textContent = `
    //             body.dark-mode {
    //                 background-color: #1a202c;
    //                 color: #e2e8f0;
    //             }
                
    //             .container.dark-mode {
    //                 background-color: #2d3748;
    //                 color: #e2e8f0;
    //                 box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    //             }
                
    //             .dark-mode .header {
    //                 border-bottom-color: #4a5568;
    //             }
                
    //             .dark-mode .section-title {
    //                 color: #e2e8f0;
    //                 border-bottom-color: #4a5568;
    //             }
                
    //             .dark-mode .paragraph,
    //             .dark-mode .sub-title {
    //                 color: #cbd5e0;
    //             }
                
    //             .dark-mode .toc {
    //                 background-color: #4a5568;
    //                 border-left-color: #667eea;
    //             }
                
    //             .dark-mode .toc-link {
    //                 color: #cbd5e0;
    //             }
                
    //             .dark-mode .toc-link:hover {
    //                 color: #90cdf4;
    //             }
                
    //             .dark-mode .footer {
    //                 border-top-color: #4a5568;
    //             }
                
    //             .dark-mode .copyright {
    //                 color: #a0aec0;
    //             }
                
    //             .dark-mode .important {
    //                 background-color: #44337a;
    //                 border-left-color: #9f7aea;
    //             }
                
    //             .dark-mode .warning {
    //                 background-color: #742a2a;
    //                 border-left-color: #fc8181;
    //             }
                
    //             .dark-mode .note {
    //                 background-color: #2c5282;
    //                 border-left-color: #63b3ed;
    //             }
    //         `;
    //         document.head.appendChild(style);
    //     }
    // };
    
    // 初始化所有功能
    smoothScroll();
    backToTop();
    // addDarkModeStyles();
    // darkModeToggle();
    
    // 添加阅读进度指示器
    const addReadingProgress = () => {
        const progressBar = document.createElement('div');
        progressBar.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 0%;
            height: 3px;
            background: linear-gradient(90deg, #667eea, #764ba2);
            z-index: 1000;
            transition: width 0.1s;
        `;
        document.body.appendChild(progressBar);
        
        window.addEventListener('scroll', () => {
            const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
            const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
            const scrolled = (winScroll / height) * 100;
            progressBar.style.width = scrolled + '%';
        });
    };
    
    addReadingProgress();
    
    // 打印功能
    const printButton = document.getElementById('print-page');
    if (printButton) {
        printButton.addEventListener('click', () => {
            window.print();
        });
    }
    
    // 分享功能（基础版）
    const shareButton = document.getElementById('share-page');
    if (shareButton && navigator.share) {
        shareButton.style.display = 'inline-block';
        shareButton.addEventListener('click', async () => {
            try {
                await navigator.share({
                    title: document.title,
                    text: document.querySelector('.page-title')?.textContent || 'BEX条款',
                    url: window.location.href
                });
            } catch (err) {
                console.log('分享取消或出错:', err);
            }
        });
    }
});