向打工搬砖人致敬
996是打工人的归宿。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>每日搬砖倒计时</title> <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(180deg, #f7f3ee 0%, #efe8df 100%); color: #38302a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; align-items: center; justify-content: center; padding: 48px 20px; position: relative; overflow: hidden; } /* 彩色氛围层（模糊发光） */ .ambience { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0.95; } .ambience .blob { position: absolute; border-radius: 50%; filter: blur(80px); transform: translate3d(0,0,0); opacity: 0.55; } .ambience .b1 { width: clamp(220px, 28vw, 520px); height: clamp(220px, 28vw, 520px); left: -12%; top: 6%; background: radial-gradient(circle at 30% 30%, rgba(255,140,120,0.95), rgba(255,90,110,0.65) 40%, rgba(255,90,110,0.0) 70%); animation: blobMove1 12s ease-in-out infinite; } .ambience .b2 { width: clamp(180px, 22vw, 420px); height: clamp(180px, 22vw, 420px); right: -8%; top: 18%; background: radial-gradient(circle at 20% 20%, rgba(120,180,255,0.9), rgba(160,120,255,0.6) 45%, rgba(160,120,255,0.0) 75%); animation: blobMove2 14s ease-in-out infinite; } .ambience .b3 { width: clamp(260px, 34vw, 680px); height: clamp(260px, 34vw, 680px); left: 10%; bottom: -18%; background: radial-gradient(circle at 70% 30%, rgba(120,255,190,0.9), rgba(90,200,170,0.55) 40%, rgba(90,200,170,0.0) 75%); animation: blobMove3 18s ease-in-out infinite; } @keyframes blobMove1 { 0% { transform: translateY(0) scale(1) rotate(0deg); } 50% { transform: translateY(-18px) scale(1.06) rotate(6deg); } 100% { transform: translateY(0) scale(1) rotate(0deg); } } @keyframes blobMove2 { 0% { transform: translateY(0) scale(1) rotate(0deg); } 50% { transform: translateY(22px) scale(1.05) rotate(-5deg); } 100% { transform: translateY(0) scale(1) rotate(0deg); } } @keyframes blobMove3 { 0% { transform: translateY(0) scale(1) rotate(0deg); } 50% { transform: translateY(-28px) scale(1.08) rotate(3deg); } 100% { transform: translateY(0) scale(1) rotate(0deg); } } .container { position: relative; width: 100%; max-width: 980px; z-index: 2; } .card { background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(250,245,240,0.9)); border-radius: 14px; padding: 18px 26px; margin-bottom: 18px; box-shadow: 0 10px 30px rgba(51,40,30,0.06); border: 1px solid rgba(56,48,42,0.06); transform: translateY(6px); animation: cardIn 600ms ease both; } @keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(0.995); } to { opacity: 1; transform: translateY(6px) scale(1); } } .header { text-align: center; padding: 22px 24px; background: transparent; border-bottom: 1px solid rgba(56,48,42,0.04); } .header-title { font-family: 'Merriweather', 'Noto Sans SC', serif; font-size: clamp(20px, 2.6vw, 30px); font-weight: 700; color: #372d24; letter-spacing: 0.4px; margin-bottom: 6px; } .header-sub { font-size: 13px; color: #7d6f5b; } .date { margin: 0 auto; width: 100%; color: #6b5f50; font-weight: 600; font-size: clamp(13px, 1.2vw, 15px); text-align: center; opacity: 0.95; } #times { margin: 8px auto; width: 100%; font-size: clamp(36px, 8vw, 72px); font-weight: 700; text-align: center; line-height: 1; font-family: 'Merriweather', 'Noto Sans SC', serif; background: linear-gradient(90deg, #ff9a76, #ff5fb8 25%, #7a9bff 60%, #44d7b6 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 6s linear infinite, floatText 4s ease-in-out infinite; text-shadow: 0 6px 18px rgba(68,55,44,0.08); } @keyframes gradientShift { 0%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } 100%{ background-position: 0% 50%; } } @keyframes floatText { 0% { transform: translateY(0); } 50% { transform: translateY(-6px); } 100% { transform: translateY(0); } } #WorkFullYearDay { margin: 0 auto; width: 100%; color: #6b5f50; font-size: clamp(13px, 1.1vw, 15px); text-align: center; font-weight: 600; } .card.small { padding: 12px 20px; } @media (max-width: 720px) { #times { font-size: clamp(28px, 10vw, 40px); } .header-title { font-size: 18px; } } @media (max-width: 360px) { #times { font-size: clamp(24px, 12vw, 30px); } } @media (prefers-reduced-motion: reduce) { .ambience .blob, #times, .card { animation: none !important; transition: none !important; } } </style> <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> <!-- <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.7.0.min.js"></script> --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js"></script> </head> <body> <div class="ambience" aria-hidden="true"> <span class="blob b1"></span> <span class="blob b2"></span> <span class="blob b3"></span> </div> <div class="container"> <header class="header card" role="banner"> <div class="header-title">每日搬砖倒计时</div> <div class="header-sub">努力工作，健康生活！</div> </header> <div class="card"> <div class="date"></div> </div> <div class="card times-card"> <div id="times"></div> </div> <div class="card small"> <div id="WorkFullYearDay"></div> </div> </div> <script> var jData_holiday = null; var holiday_name = null; var gloable_year = new Date().getFullYear(); var gloable_month = new Date().getMonth() + 1; var gloable_day = new Date().getDate(); function sendGetRequestXMLHttpRequest(url) { var xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { dealJsonData(xhr.responseText); } }; xhr.send(); } function dealJsonData(jsonData) { if (jsonData == undefined) { return null; } jData_holiday = JSON.parse(jsonData).holiday; } function isHoliday(cur_month, cur_day) { if (jData_holiday == null) { return false; } month_day = (cur_month < 10 ? "0" + cur_month : cur_month) + "-" + (cur_day < 10 ? "0" + cur_day : cur_day); if (month_day in jData_holiday) { holiday_name = jData_holiday[month_day].name; isHolidays = jData_holiday[month_day].holiday; return isHolidays; } return false; } function isBuBan(cur_month, cur_day) { if (jData_holiday == null) { return false; } month_day = (cur_month < 10 ? "0" + cur_month : cur_month) + "-" + (cur_day < 10 ? "0" + cur_day : cur_day); buban = false; if (month_day in jData_holiday) { holiday_name = jData_holiday[month_day].name; isHolidays = jData_holiday[month_day].holiday; buban = holiday_name.indexOf("补班") !== -1 ? true : false; } return buban; } function workingToHours(hours, minutes, endDate, endHours) { if (hours < 9 || hours >= endHours) { $("#times").html("现在是休息时间!!!"); } else if (hours >= 12 && hours <= 13) { if ((hours == 12 && minutes >= 0) || (hours == 13 && minutes <= 30)) { $("#times").html("现在是午休时间!!!"); } else { $("#times").countdown(endDate, function (event) { $(this).html(event.strftime("距离下班时间还有 %H:%M:%S")); }); } } else { $("#times").countdown(endDate, function (event) { $(this).html(event.strftime("距离下班时间还有 %H:%M:%S")); }); } } setInterval(function () { date = new Date(); year = date.getFullYear(); month = date.getMonth() + 1; day = date.getDate(); week = date.getDay(); hours = date.getHours(); minutes = date.getMinutes(); weekArr = ["日", "一", "二", "三", "四", "五", "六"]; time = "18:00:00"; showTime = year + "/" + (month < 10 ? "0" + month : month) + "/" + (day < 10 ? "0" + day : day) + " 星期" + weekArr[week]; if (week == 6) { time = "16:00:00"; } if (isBuBan(month, day)) { time = "18:00:00"; } endDate = year + "/" + month + "/" + day + " " + time; // 计算距离 2023-03-20 的天数并显示在 .date 元素中 var target = new Date(2023, 2, 20); // 月份从0开始，2表示3月 var msPerDay = 24 * 60 * 60 * 1000; // 仅按日期部分计算（清除时分秒） var todayOnly = new Date(year, month - 1, day); var diff = Math.floor((todayOnly - target) / msPerDay); var diffText = ""; if (diff > 0) { diffText = "" + diff + " 天"; } else if (diff < 0) { diffText = "还有 " + Math.abs(diff) + " 天"; } else { diffText = "就是今天"; } $(".date").html(showTime + " | 已入职: " + diffText); if ( year != gloable_year || month != gloable_month || day != gloable_day || jData_holiday == null ) { sendGetRequestXMLHttpRequest( "https://timor.tech/api/holiday/year/" + year + "/" ); } //等待获取数据成功 if (jData_holiday == null) { $("#times").html("Data Loading..."); } else { calcFullYearWorkDay(); if (week >= 1 && week <= 5) { //周一至周五 if (isHoliday(month, day)) { $("#times").html("今天是" + holiday_name + "!!!"); } else { workingToHours(hours, minutes, endDate, 18); } } else if (week == 6) { //周六 if (isHoliday(month, day)) { $("#times").html("今天是" + holiday_name + "!!!"); } else { if (isBuBan(month, day)) { workingToHours(hours, minutes, endDate, 18); } else { workingToHours(hours, minutes, endDate, 16); } } } else { //周日 if (isHoliday(month, day)) { $("#times").html("今天是" + holiday_name + "!!!"); } else { if (isBuBan(month, day)) { workingToHours(hours, minutes, endDate, 18); } else { $("#times").html("今天是周日，全天休息!!!"); } } } } }, 1000); //年月日 实现某年某月某日是周几 function getDayOfWeek(year, month, day) { var date = new Date(year, month - 1, day); return date.getDay(); } //年月 实现某年某月共有多少天 function getMonthofDay(year, month) { return new Date(year, month, 0).getDate(); } function calcFullYearWorkDay() { date = new Date(); year = date.getFullYear(); allWorkDay = 0; holiday = 0; //0:work 1:play daxiaozhou = [0]; for (month = 1; month <= 12; month++) { for (day = 1; day <= getMonthofDay(year, month); day++) { if (isHoliday(month, day)) { //节假日 holiday = holiday + 1; } else if (isBuBan(month, day)) { //补班 allWorkDay = allWorkDay + 1; } else { //工作日 //周1~5 weekIdx = getDayOfWeek(year, month, day); if (weekIdx >= 1 && weekIdx <= 5) { allWorkDay = allWorkDay + 1; } //周六 if (weekIdx == 6) { lastnum = daxiaozhou[daxiaozhou.length - 1]; if (lastnum == 1) { //work allWorkDay = allWorkDay + 1; daxiaozhou[daxiaozhou.length] = 0; } else { //play holiday = holiday + 1; daxiaozhou[daxiaozhou.length] = 1; } } //周日 if (weekIdx == 0) { holiday = holiday + 1; } } } } $("#WorkFullYearDay").html( year + "年上班共计" + allWorkDay + "天,休假" + holiday + "天" ); } </script> </body> </html>
