|
145 | 145 | <h1>人生网格 - 900个月</h1>
|
146 | 146 | <div class="description">
|
147 | 147 | <p>这个网格展示了一个人生中的900个月(75年)。每个格子代表一个月。</p>
|
148 |
| - <p>点击格子可以标记已经度过的月份,不同颜色代表不同的人生阶段。</p> |
| 148 | + <p>不同颜色代表不同的人生阶段: |
| 149 | + <span style="display: inline-block; width: 12px; height: 12px; background-color: #4fc3f7; margin: 0 4px;"></span>0-20年, |
| 150 | + <span style="display: inline-block; width: 12px; height: 12px; background-color: #81c784; margin: 0 4px;"></span>20-40年, |
| 151 | + <span style="display: inline-block; width: 12px; height: 12px; background-color: #ffb74d; margin: 0 4px;"></span>40-60年, |
| 152 | + <span style="display: inline-block; width: 12px; height: 12px; background-color: #e57373; margin: 0 4px;"></span>60-80年 |
| 153 | + </p> |
149 | 154 | </div>
|
150 | 155 |
|
151 | 156 | <div class="grid-container" id="lifeGrid"></div>
|
@@ -176,26 +181,9 @@ <h1>人生网格 - 900个月</h1>
|
176 | 181 | gridItem.className = 'grid-item';
|
177 | 182 | gridItem.dataset.index = i;
|
178 | 183 | gridItem.dataset.stage = Math.floor(i / 240);
|
179 |
| - |
180 |
| - gridItem.addEventListener('click', function() { |
181 |
| - this.classList.toggle('filled'); |
182 |
| - this.classList.toggle(`stage-${this.dataset.stage}`); |
183 |
| - updateCount(); |
184 |
| - }); |
185 |
| - |
186 | 184 | grid.appendChild(gridItem);
|
187 | 185 | }
|
188 | 186 |
|
189 |
| - // 从本地存储加载出生年月 |
190 |
| - const savedBirthDate = localStorage.getItem('birthDate'); |
191 |
| - if (savedBirthDate) { |
192 |
| - birthDate = new Date(JSON.parse(savedBirthDate)); |
193 |
| - fillGridToDate(birthDate); |
194 |
| - const birthYear = birthDate.getFullYear(); |
195 |
| - const birthMonth = birthDate.getMonth() + 1; |
196 |
| - birthInfo.textContent = `出生年月: ${birthYear}年${birthMonth}月`; |
197 |
| - } |
198 |
| - |
199 | 187 | // 重置按钮
|
200 | 188 | resetBtn.addEventListener('click', function() {
|
201 | 189 | const items = document.querySelectorAll('.grid-item');
|
|
0 commit comments