向打工搬砖人致敬996是打工人的归宿。!DOCTYPE html html head meta charsetutf-8 / meta nameviewport contentwidthdevice-width, initial-scale1 / title每日搬砖倒计时/title link hrefhttps://fonts.googleapis.com/css2?familyMerriweather:wght300;400;700familyNotoSansSC:wght300;400;700displayswap relstylesheet 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 srchttps://code.jquery.com/jquery-3.7.0.min.js/script !-- script srchttps://ajax.aspnetcdn.com/ajax/jquery/jquery-3.7.0.min.js/script -- script srchttps://cdnjs.cloudflare.com/ajax/libs/jquery.countdown/2.2.0/jquery.countdown.min.js/script /head body div classambience aria-hiddentrue span classblob b1/span span classblob b2/span span classblob b3/span /div div classcontainer header classheader card rolebanner div classheader-title每日搬砖倒计时/div div classheader-sub努力工作健康生活/div /header div classcard div classdate/div /div div classcard times-card div idtimes/div /div div classcard small div idWorkFullYearDay/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
