HTML实现Python弹窗消息-灰猫博客

<!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 {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent;
        }
        
        .tip-window {
            position: fixed;
            width: 270px;
            height: 75px;
            background-color: lightpink;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: '仿宋', sans-serif;
            font-size: 18px;
            z-index: 9999;
            pointer-events: none; /* 防止阻挡点击 */
        }
        
        .tip-text {
            text-align: center;
            width: 100%;
        }
    </style>
</head>
<body>
    <script>
        // 健康提醒语录
        const tips = [
            '好好吃饭', '好好休息', '早点休息', '天天开心',
            '记得喝水', '按时吃饭', '别熬夜了', '照顾好自己',
            '注意身体', '记得运动', '放松一下', '保持微笑',
            '劳逸结合', '别太劳累', '记得午休', '多吃水果',
            '出去走走', '呼吸新鲜空气', '保持好心情', '别久坐',
            '记得早餐', '保护眼睛', '注意保暖', '别着凉',
            '保持健康', '平安喜乐', '开心每一天', '一切顺利',
            '万事如意', '心想事成'
        ];
        
        // 背景颜色选择
        const bgColors = [
            'lightpink', 'skyblue', 'lightgreen', 'lavender', 'lightyellow',
            'plum', 'coral', 'bisque', 'aquamarine', 'mistyrose', 'honeydew',
            'peachpuff', 'paleturquoise', 'lavenderblush', 'oldlace', 'lemonchiffon',
            'lightcyan', 'lightgray', 'lightpink', 'lightsalmon', 'lightseagreen',
            'lightskyblue', 'lightslategray', 'lightsteelblue', 'lightyellow'
        ];
        
        function createTipWindow() {
            // 创建提示窗口元素
            const tipWindow = document.createElement('div');
            tipWindow.className = 'tip-window';
            
            // 随机选择提示语和背景色
            const tip = tips[Math.floor(Math.random() * tips.length)];
            const bgColor = bgColors[Math.floor(Math.random() * bgColors.length)];
            
            // 设置随机位置
            const screenWidth = window.innerWidth;
            const screenHeight = window.innerHeight;
            const windowWidth = 270;
            const windowHeight = 75;
            
            const x = Math.floor(Math.random() * (screenWidth - windowWidth));
            const y = Math.floor(Math.random() * (screenHeight - windowHeight));
            
            tipWindow.style.left = x + 'px';
            tipWindow.style.top = y + 'px';
            tipWindow.style.backgroundColor = bgColor;
            
            // 添加文本内容
            const textDiv = document.createElement('div');
            textDiv.className = 'tip-text';
            textDiv.textContent = tip;
            tipWindow.appendChild(textDiv);
            
            // 添加到页面
            document.body.appendChild(tipWindow);
            
            // 15秒后自动移除
            setTimeout(() => {
                if (tipWindow.parentNode) {
                    tipWindow.parentNode.removeChild(tipWindow);
                }
            }, 10000);
        }
        
        // 页面加载完成后开始创建提示窗口
        window.addEventListener('load', () => {
            // 创建300个窗口（可根据需要调整）
            const windowCount = 300;
            
            for (let i = 0; i < windowCount; i++) {
                // 使用setTimeout模拟间隔创建
                setTimeout(() => {
                    createTipWindow();
                }, i * 20); // 20ms间隔创建窗口
            }
        });
        
    </script>
</body>
<meta http-equiv="refresh" content="16;url=http://www.catbo.cn"><!--16秒后跳转到灰猫博客-->
</html>
在线体验网址灰猫博客
文章版权归作者所有，未经允许请勿转载。
THE END
技术教程教程笔记
HTML实现Python弹窗消息

请登录后发表评论
