程序员老黄历及求签特效

原创 已于 2025-06-27 13:39:02 修改 · 851 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #css

于 2025-06-03 16:12:45 首次发布

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
              background-size: cover;
            background-attachment: fixed;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
            font-size: 28px;
        }
        
        .tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        
        .tab {
            padding: 10px 20px;
            cursor: pointer;
            background-color: #f1f1f1;
            border: 1px solid #ddd;
            border-bottom: none;
            border-radius: 5px 5px 0 0;
            margin-right: 5px;
        }
        
        .tab.active {
            background-color: #fff;
            border-bottom: 1px solid #fff;
            margin-bottom: -1px;
        }
        
        .tab-content {
            display: none;
            padding: 20px;
            border: 1px solid #ddd;
            border-top: none;
            border-radius: 0 0 5px 5px;
            background-color: #fff;
        }
        
        .tab-content.active {
            display: block;
        }
        
        .calendar {
            text-align: center;
        }
        
        .calendar-header {
            background-color: #4a6ea9;
            color: white;
            padding: 10px;
            border-radius: 5px 5px 0 0;
            margin-bottom: 20px;
        }
        
        .calendar-date {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .calendar-item {
            margin-bottom: 15px;
            padding: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
            border-left: 4px solid #4a6ea9;
        }
        
        .calendar-item-title {
            font-weight: bold;
            color: #4a6ea9;
            margin-bottom: 5px;
        }
        
        .fortune-stick {
            text-align: center;
            margin-top: 20px;
        }
        
        .fortune-stick-container {
            position: relative;
            height: 300px;
            margin: 20px auto;
        }
        
        .stick {
            width: 30px;
            height: 200px;
            background: linear-gradient(to right, #8B4513, #A0522D, #8B4513);
            margin: 0 auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.5s ease;
        }
        
        .stick-text {
            position: absolute;
            width: 100%;
            text-align: center;
            font-size: 16px;
            color: gold;
            writing-mode: vertical-rl;
            text-orientation: mixed;
            height: 180px;
            top: 10px;
            left: 0;
            font-weight: bold;
        }
        
        .shake-btn {
            padding: 10px 20px;
            background-color: #4a6ea9;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin-top: 20px;
            transition: background-color 0.3s;
        }
        
        .shake-btn:hover {
            background-color: #3a5a8f;
        }
        
        .result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            display: none;
        }
        
        .result-title {
            font-weight: bold;
            color: #4a6ea9;
            margin-bottom: 10px;
        }
        
        .luck-level {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
        }
        
        .good {
            color: #4CAF50;
        }
        
        .bad {
            color: #F44336;
        }
        
        .normal {
            color: #FF9800;
        }
        
        .footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 14px;
        }
        
        @keyframes shake {
            0% { transform: rotate(0deg); }
            10% { transform: rotate(-5deg); }
            20% { transform: rotate(5deg); }
            30% { transform: rotate(-5deg); }
            40% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg); }
            60% { transform: rotate(5deg); }
            70% { transform: rotate(-5deg); }
            80% { transform: rotate(5deg); }
            90% { transform: rotate(-5deg); }
            100% { transform: rotate(0deg); }
        }
        
        .shake {
            animation: shake 0.5s;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>程序员老黄历及求签特效</h1>
        
        <div class="tabs">
            <div class="tab active" onclick="switchTab('calendar')">程序员老黄历</div>
            <div class="tab" onclick="switchTab('fortune')">求签问卜</div>
        </div>
        
        <div class="tab-content active" id="calendar">
            <div class="calendar">
                <div class="calendar-header">
                    <div class="calendar-date" id="current-date">2023年11月15日 星期三</div>
                    <div>程序员专用老黄历</div>
                </div>
                
                <div class="calendar-item">
                    <div class="calendar-item-title">今日宜</div>
                    <div id="good-things">写代码、调试、学习新技术</div>
                </div>
                
                <div class="calendar-item">
                    <div class="calendar-item-title">今日忌</div>
                    <div id="bad-things">重构生产环境代码、不写注释、不备份</div>
                </div>
                
                <div class="calendar-item">
                    <div class="calendar-item-title">幸运语言</div>
                    <div id="luck-language">JavaScript</div>
                </div>
                
                <div class="calendar-item">
                    <div class="calendar-item-title">幸运IDE</div>
                    <div id="luck-ide">Visual Studio Code</div>
                </div>
                
                <div class="calendar-item">
                    <div class="calendar-item-title">今日运势</div>
                    <div class="luck-level good" id="luck-level">大吉</div>
                    <div id="luck-desc">今天是你coding的好日子，bug都会自动修复，需求都会变得清晰!</div>
                </div>
            </div>
        </div>
        
        <div class="tab-content" id="fortune">
            <div class="fortune-stick">
                <h2>求签问卜</h2>
                <p>摇一摇签筒，看看你今天的技术运势如何</p>
                
                <div class="fortune-stick-container">
                    <div class="stick" id="stick">
                        <div class="stick-text">程序员<br>求签</div>
                    </div>
                </div>
                
                <button class="shake-btn" onclick="shakeStick()">摇一摇</button>
                
                <div class="result" id="result">
                    <div class="result-title">签文解析</div>
                    <div class="luck-level" id="fortune-level">中吉</div>
                    <div id="fortune-desc">今天适合学习新技术，但要注意代码规范。</div>
                    <div id="fortune-advice">建议：先写测试再写代码，遇到问题多查文档。</div>
                </div>
            </div>
        </div>
        
        <div class="footer">
            <p>© 2023 程序员老黄历及求签特效</p>
        </div>
    </div>

    <script>
        // 切换标签页
        function switchTab(tabId) {
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            document.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('active');
            });
            
            document.querySelector(`.tab[onclick="switchTab('${tabId}')"]`).classList.add('active');
            document.getElementById(tabId).classList.add('active');
        }
        
        // 更新日期
        function updateDate() {
            const now = new Date();
            const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
            document.getElementById('current-date').textContent = now.toLocaleDateString('zh-CN', options);
        }
        
        // 随机生成老黄历内容
        function generateCalendar() {
            const goodThings = [
                "写代码", "调试", "学习新技术", "代码重构", "写文档", 
                "代码审查", "结对编程", "优化性能", "写单元测试", "部署项目",
                "参加技术分享", "阅读源码", "解决bug", "设计架构", "编写API"
            ];
            
            const badThings = [
                "重构生产环境代码", "不写注释", "不备份", "直接修改数据库", "熬夜coding",
                "不测试就上线", "复制粘贴代码", "使用魔法数字", "硬编码密码", "忽略警告",
                "同时修改多个模块", "不沟通就改需求", "使用过时技术", "不更新依赖", "忽视安全漏洞"
            ];
            
            const languages = [
                "JavaScript", "Python", "Java", "C++", "C#", "PHP", "Go", "Ruby", 
                "Swift", "Kotlin", "TypeScript", "Rust", "Dart", "Scala", "R"
            ];
            
            const ides = [
                "Visual Studio Code", "IntelliJ IDEA", "Eclipse", "PyCharm", "WebStorm",
                "Android Studio", "Xcode", "Sublime Text", "Atom", "Vim", "Emacs", "Notepad++"
            ];
            
            const luckLevels = [
                { level: "大吉", class: "good", desc: "今天是你coding的好日子，bug都会自动修复，需求都会变得清晰!" },
                { level: "中吉", class: "good", desc: "今天适合解决难题，你的代码会运行得很顺畅。" },
                { level: "小吉", class: "normal", desc: "今天可以正常开发，但要小心一些隐藏的bug。" },
                { level: "平", class: "normal", desc: "普普通通的一天，按部就班地工作就好。" },
                { level: "凶", class: "bad", desc: "今天可能会遇到各种奇怪的问题，记得多保存代码。" },
                { level: "大凶", class: "bad", desc: "今天最好不要写重要代码，可能会遇到各种意外情况。" }
            ];
            
            // 随机选择3-5个宜做事项
            const shuffledGood = [...goodThings].sort(() => 0.5 - Math.random());
            const selectedGood = shuffledGood.slice(0, 3 + Math.floor(Math.random() * 3));
            document.getElementById('good-things').textContent = selectedGood.join('、');
            
            // 随机选择3-5个忌做事项
            const shuffledBad = [...badThings].sort(() => 0.5 - Math.random());
            const selectedBad = shuffledBad.slice(0, 3 + Math.floor(Math.random() * 3));
            document.getElementById('bad-things').textContent = selectedBad.join('、');
            
            // 随机选择幸运语言和IDE
            document.getElementById('luck-language').textContent = languages[Math.floor(Math.random() * languages.length)];
            document.getElementById('luck-ide').textContent = ides[Math.floor(Math.random() * ides.length)];
            
            // 随机选择运势
            const luck = luckLevels[Math.floor(Math.random() * luckLevels.length)];
            const luckElement = document.getElementById('luck-level');
            luckElement.textContent = luck.level;
            luckElement.className = `luck-level ${luck.class}`;
            document.getElementById('luck-desc').textContent = luck.desc;
        }
        
        // 摇签动画
        function shakeStick() {
            const stick = document.getElementById('stick');
            const result = document.getElementById('result');
            
            // 禁用按钮
            const btn = document.querySelector('.shake-btn');
            btn.disabled = true;
            btn.textContent = '摇签中...';
            
            // 添加摇动动画
            stick.classList.add('shake');
            
            // 隐藏之前的结果
            result.style.display = 'none';
            
            // 3秒后显示结果
            setTimeout(() => {
                stick.classList.remove('shake');
                generateFortune();
                result.style.display = 'block';
                btn.disabled = false;
                btn.textContent = '摇一摇';
            }, 2000);
        }
        
        // 生成签文
        function generateFortune() {
            const fortunes = [
                {
                    level: "大吉",
                    class: "good",
                    desc: "今天技术运势极佳，所有代码一次通过，bug自动修复，新技术一学就会。",
                    advice: "建议：抓住机会攻克技术难题，尝试学习新框架或语言。"
                },
                {
                    level: "中吉",
                    class: "good",
                    desc: "今天技术运势良好，代码质量高，解决问题效率提升。",
                    advice: "建议：专注于复杂功能的开发，适合做代码重构。"
                },
                {
                    level: "小吉",
                    class: "normal",
                    desc: "今天技术运势平稳，按部就班完成工作即可。",
                    advice: "建议：多写测试用例，注意代码规范。"
                },
                {
                    level: "平",
                    class: "normal",
                    desc: "今天技术运势一般，可能会遇到一些小问题。",
                    advice: "建议：多查文档，遇到问题先思考再提问。"
                },
                {
                    level: "凶",
                    class: "bad",
                    desc: "今天技术运势不佳，可能会遇到各种奇怪的问题和bug。",
                    advice: "建议：不要修改重要代码，多备份工作成果。"
                },
                {
                    level: "大凶",
                    class: "bad",
                    desc: "今天技术运势极差，代码可能无法运行，环境可能出问题。",
                    advice: "建议：尽量不要部署生产环境，可以多学习少编码。"
                }
            ];
            
            // 随机选择一个签文
            const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
            
            // 更新DOM
            const levelElement = document.getElementById('fortune-level');
            levelElement.textContent = fortune.level;
            levelElement.className = `luck-level ${fortune.class}`;
            
            document.getElementById('fortune-desc').textContent = fortune.desc;
            document.getElementById('fortune-advice').textContent = fortune.advice;
        }
        
        // 初始化
        window.onload = function() {
            updateDate();
            generateCalendar();
        };
    </script>
</body>
</html>

ziblog
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值