|
@@ -1,98 +0,0 @@
|
|
|
-<!-- 黑色日期卡片 -->
|
|
|
|
|
-<div class="mb-4 wyoj-date-card" id="wyoj-date-card"
|
|
|
|
|
- style="position:relative;overflow:hidden;background:#000;color:#fff;padding:2rem 1.5rem;border-radius:0;text-shadow:0 1px 3px rgba(0,0,0,0.75);">
|
|
|
|
|
-
|
|
|
|
|
- <!-- 随机方格背景层 -->
|
|
|
|
|
- <div id="wyoj-date-grid"
|
|
|
|
|
- style="position:absolute;top:0;left:0;right:0;bottom:0;display:grid;z-index:0;pointer-events:none;"></div>
|
|
|
|
|
-
|
|
|
|
|
- <!-- 内容层 -->
|
|
|
|
|
- <div style="position:relative;z-index:1;">
|
|
|
|
|
- <div class="d-flex justify-content-center align-items-center">
|
|
|
|
|
- <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
|
|
|
|
|
- <?= $monthText ?>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="mx-4" style="font-size:5rem;font-weight:900;line-height:1;">
|
|
|
|
|
- <?= $dayNum ?>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div style="writing-mode:vertical-rl;font-size:1.5rem;font-weight:bold;letter-spacing:0.3em;line-height:1;">
|
|
|
|
|
- <?= $weekText ?>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- <div class="text-center mt-4" style="font-size:1rem;letter-spacing:0.05em;">
|
|
|
|
|
- <?php if ($daysLeft > 0): ?>
|
|
|
|
|
- 距 <strong>NOIP2026</strong> 还有 <strong><?= $daysLeft ?></strong> 天
|
|
|
|
|
- <?php elseif ($daysLeft === 0): ?>
|
|
|
|
|
- <strong>NOIP2026</strong> 就是今天!
|
|
|
|
|
- <?php else: ?>
|
|
|
|
|
- <strong>NOIP2026</strong> 已结束
|
|
|
|
|
- <?php endif; ?>
|
|
|
|
|
- <div class="mt-2" style="font-size:0.9rem;opacity:0.85;">
|
|
|
|
|
- <strong>CSP-J/S 2026</strong> 第一轮 9 月 19 日 · 第二轮 10 月 31 日
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
- </div>
|
|
|
|
|
-</div>
|
|
|
|
|
-
|
|
|
|
|
-<script>
|
|
|
|
|
-(function () {
|
|
|
|
|
- var card = document.getElementById('wyoj-date-card');
|
|
|
|
|
- var grid = document.getElementById('wyoj-date-grid');
|
|
|
|
|
- if (!card || !grid) return;
|
|
|
|
|
-
|
|
|
|
|
- // ===== 可调参数 =====
|
|
|
|
|
- var COLORS = ['#0a0a0a', '#1f1f1f', '#333333', '#4a4a4a', '#666666']; // 5 档灰→黑
|
|
|
|
|
- var CELL = 22; // 每个小方格的边长(px)
|
|
|
|
|
- var P = 0.08; // 每格每秒变色的概率(0~1),越大越跳
|
|
|
|
|
- // ====================
|
|
|
|
|
-
|
|
|
|
|
- var cells = [];
|
|
|
|
|
- var lastCols = 0, lastRows = 0;
|
|
|
|
|
-
|
|
|
|
|
- function pickColor() {
|
|
|
|
|
- return COLORS[Math.floor(Math.random() * COLORS.length)];
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- function build(force) {
|
|
|
|
|
- var w = card.clientWidth;
|
|
|
|
|
- var h = card.clientHeight;
|
|
|
|
|
- var cols = Math.max(1, Math.ceil(w / CELL));
|
|
|
|
|
- var rows = Math.max(1, Math.ceil(h / CELL));
|
|
|
|
|
- if (!force && cols === lastCols && rows === lastRows) return;
|
|
|
|
|
- lastCols = cols;
|
|
|
|
|
- lastRows = rows;
|
|
|
|
|
-
|
|
|
|
|
- grid.style.gridTemplateColumns = 'repeat(' + cols + ', 1fr)';
|
|
|
|
|
- grid.style.gridTemplateRows = 'repeat(' + rows + ', 1fr)';
|
|
|
|
|
- grid.innerHTML = '';
|
|
|
|
|
- cells = [];
|
|
|
|
|
-
|
|
|
|
|
- for (var i = 0; i < cols * rows; i++) {
|
|
|
|
|
- var d = document.createElement('div');
|
|
|
|
|
- d.style.backgroundColor = pickColor();
|
|
|
|
|
- // 每格单独的过渡时长,让变化错开,不会整片一起闪
|
|
|
|
|
- d.style.transition = 'background-color ' + (0.5 + Math.random() * 0.5).toFixed(2) + 's ease';
|
|
|
|
|
- grid.appendChild(d);
|
|
|
|
|
- cells.push(d);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- build(true);
|
|
|
|
|
-
|
|
|
|
|
- // 尺寸变化时重建(只在行列数变化时真的重建,避免无谓重置)
|
|
|
|
|
- if (window.ResizeObserver) {
|
|
|
|
|
- new ResizeObserver(function () { build(false); }).observe(card);
|
|
|
|
|
- } else {
|
|
|
|
|
- window.addEventListener('resize', function () { build(false); });
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 每秒给每格一个 p 的变色机会
|
|
|
|
|
- setInterval(function () {
|
|
|
|
|
- for (var i = 0; i < cells.length; i++) {
|
|
|
|
|
- if (Math.random() < P) {
|
|
|
|
|
- cells[i].style.backgroundColor = pickColor();
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
- }, 1000);
|
|
|
|
|
-})();
|
|
|
|
|
-</script>
|
|
|