HTML+CSS+JavaScript – 一个适用于赛博日记的类github绿格子图

摸鱼摸鱼…至福……

因为有记赛博日记的习惯，昨天突发奇想，如果给每一天一个1-10分的自我评价，那么就能和github的commit图一样画一个一目了然的图、知道自己有没有在摸鱼了，因此说干就干，ai-assisted速通一下html。

先看效果（数值随机生成）：

2025年1月日历
日 一 二 三 四 五 六

看起来还是不错的，那么简单记录一下代码部分吧，首先是head部分，主要是设置各种样式颜色。

<head>
	<title>2025年1月日历</title>
	<style>
		/* 表格整体样式 */
		table {
		    border-collapse: collapse;
		    width: fit-content;
		    margin-left: 0;
		    border: 0;
		    border-style: none;
		    background-color: rgba(246, 248, 250);
		    border-radius: 3px;
		    overflow: hidden;
		    display: flex;
		    flex-wrap: wrap;
		}
		/* 表头行样式 */
		tr:first-child {
		    display: flex; 
		    width: 100%;
		    justify-content: space-between; 
		    padding: 0 10px; 
		    box-sizing: border-box; 
		}
		/* 普通行样式 */
		tr {
		    display: flex;
		    width: 100%;           
		    justify-content: space-between;
		    padding: 0 10px; 
		    box-sizing: border-box; 
		    margin-bottom: 0px;
		}
		/* 单元格样式设置 */
		td {
		    border: 0;
		    border-style: none;
		    padding: 3px;
		    text-align: center;
		    width: 40px;
		    height: 40px;
		    border-radius: 3px;
		    background-color: rgba(246, 248, 250);
		    box-sizing: border-box; 
		}
		/* 表头行（星期）单独的颜色设置 */
		       .header-cell {
		    background-color: rgb(234, 235, 237);
		}
		/* 不同贡献度的颜色 */
		       .contribution-1 {
		    background-color: rgba(32, 111, 56, 0.1);
		}
		       .contribution-2 {
		    background-color: rgba(32, 111, 56, 0.2);
		}
		       .contribution-3 {
		    background-color: rgba(32, 111, 56, 0.3);
		}
		       .contribution-4 {
		    background-color: rgba(32, 111, 56, 0.4);
		}
		       .contribution-5 {
		    background-color: rgba(32, 111, 56, 0.5);
		}
		       .contribution-6 {
		    background-color: rgba(32, 111, 56, 0.6);
		}
		       .contribution-7 {
		    background-color: rgba(32, 111, 56, 0.7);
		}
		       .contribution-8 {
		    background-color: rgba(32, 111, 56, 0.8);
		}
		       .contribution-9 {
		    background-color: rgba(32, 111, 56, 0.9);
		}
		       .contribution-10 {
		    background-color: #206f38;
		}
	</style>
</head>
HTML

然后是body部分的table部分，对表头单独设置了颜色。这边如果不用内联样式的话，表格格式好像会被wordpress自己的样式覆盖掉？不是很懂。

<table id="calendarTable" style="width: fit-content; margin-left: 0;">
	<!-- 表头单独设置class -->
	<tr>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">日</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">一</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">二</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">三</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">四</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">五</td>
		<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">六</td>
	</tr>
	<!-- 中间内容 -->
	<tr>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
	</tr>
	<tr>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
	</tr>
	<tr>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
	</tr>
	<tr>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
	</tr>
	<tr>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
	</tr>
</table>
CSS

然后是script部分，这边加了一个自动获取页面内容的功能，因为我的赛博日记每天的开头格式统一，如图所示，分别是日期+星期+评分+主要事项，而且都是用空格分割的，因此就可以让他自动获取。

对每行的标题，代码如下：

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading">1.2 Thu 2/10 英语口语考试</h4>
<!-- /wp:heading -->
HTML

那么就可以对'h4.wp-block-heading'进行特判，然后用空格分割后面语句，提取出当天的贡献值

<script>
	// 提取后的信息，格式：{日期: {贡献值: 数字, 描述: 字符串}}
	const dailyRecords = {};
	
	// 获取指定标题元素
	const headingElements = document.querySelectorAll('h4.wp-block-heading');
	const paragraphElements = document.querySelectorAll('p');
	    
	let currentHeadingIndex = 0;
	for (let i = 0; i < paragraphElements.length; i++) {
	    const currentParagraph = paragraphElements[i];
	    const prevHeading = headingElements[currentHeadingIndex];
	    
	    // 检查当前段落是否紧跟在对应的标题后面
	    if (currentParagraph.offsetTop > prevHeading.offsetTop && currentParagraph.offsetTop - prevHeading.offsetTop < 100) {
	        const textContent = prevHeading.textContent;
	        // 空格分割
	        const parts = textContent.split(' ');
	        if (parts.length >= 3) {
	            const date = parts[0];
	            // 对于每个评分，比如2/10，用'/'分割
	            const contributionValue = parseInt(parts[2].split('/')[0]);
	            const description = currentParagraph.textContent;
	            if (!dailyRecords[date]) {
	                dailyRecords[date] = {
	                    contributionValue: contributionValue,
	                    description: description
	                };
	            }
	        }
	        currentHeadingIndex++;
	        if (currentHeadingIndex >= headingElements.length) {
	            break;
	        }
	    }
	}
	    
	// 把贡献值push进contributionValues，方便画图
	const contributionValues = [];
	const dates = Object.keys(dailyRecords);
	dates.sort((a, b) => a.localeCompare(b));
	dates.forEach(date => {
	    contributionValues.push(dailyRecords[date].contributionValue);
	});
	
	const table = document.getElementById('calendarTable');
	const rows = table.getElementsByTagName('tr');
	
	let index = 0;
	    
	// 用Date对象获取2025.01.01是星期几，第二个参数需要-1，月份对应0-11
	const startDay = new Date(2025, 0, 1).getDay();
	    
	// 记录当前填充到的单元格位置
	let cellIndex = startDay;
	    
	// 画图！
	for (let day = 1; day <= 31; day++) {
	    const rowIndex = Math.floor(cellIndex / 7);
	    const colIndex = cellIndex % 7;
	    const currentRow = rows[rowIndex + 1]; // +1是因为跳过表头行
	    const cells = currentRow.getElementsByTagName('td');
	    const contributionValue = contributionValues[index];
	    const className = `contribution-${contributionValue}`;
	    cells[colIndex].classList.add(className);
	    
	    // 如果贡献值>5，把字体改成白色
	    if (contributionValue > 5) {
	        cells[colIndex].style.color = "white";
	    }
	    
	    if (contributionValue!== 0) {
	        cells[colIndex].textContent = day;
	    }
	    index++;
	    cellIndex++;
	}
	    
</script>
JavaScript

最后贴一个完整代码吧

展开 
<!DOCTYPE html>
<html lang="en">
<head>
	<title>2025年1月日历</title>
	<style>
		/* 表格整体样式 */
		table {
		    border-collapse: collapse;
		    width: fit-content;
		    margin-left: 0;
		    border: 0;
		    border-style: none;
		    background-color: rgba(246, 248, 250);
		    border-radius: 3px;
		    overflow: hidden;
		    display: flex;
		    flex-wrap: wrap;
		}
		/* 表头行样式 */
		tr:first-child {
		    display: flex; 
		    width: 100%;
		    justify-content: space-between; 
		    padding: 0 10px; 
		    box-sizing: border-box; 
		}
		/* 普通行样式 */
		tr {
		    display: flex;
		    width: 100%;           
		    justify-content: space-between;
		    padding: 0 10px; 
		    box-sizing: border-box; 
		    margin-bottom: 0px;
		}
		/* 单元格样式设置 */
		td {
		    border: 0;
		    border-style: none;
		    padding: 3px;
		    text-align: center;
		    width: 40px;
		    height: 40px;
		    border-radius: 3px;
		    background-color: rgba(246, 248, 250);
		    box-sizing: border-box; 
		}
		/* 表头行（星期）单独的颜色设置 */
		       .header-cell {
		    background-color: rgb(234, 235, 237);
		}
		/* 不同贡献度的颜色 */
		       .contribution-1 {
		    background-color: rgba(32, 111, 56, 0.1);
		}
		       .contribution-2 {
		    background-color: rgba(32, 111, 56, 0.2);
		}
		       .contribution-3 {
		    background-color: rgba(32, 111, 56, 0.3);
		}
		       .contribution-4 {
		    background-color: rgba(32, 111, 56, 0.4);
		}
		       .contribution-5 {
		    background-color: rgba(32, 111, 56, 0.5);
		}
		       .contribution-6 {
		    background-color: rgba(32, 111, 56, 0.6);
		}
		       .contribution-7 {
		    background-color: rgba(32, 111, 56, 0.7);
		}
		       .contribution-8 {
		    background-color: rgba(32, 111, 56, 0.8);
		}
		       .contribution-9 {
		    background-color: rgba(32, 111, 56, 0.9);
		}
		       .contribution-10 {
		    background-color: #206f38;
		}
	</style>
</head>
<body>
	<table id="calendarTable" style="width: fit-content; margin-left: 0;">
		<!-- 表头单独设置class -->
		<tr>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">日</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">一</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">二</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">三</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">四</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">五</td>
			<td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">六</td>
		</tr>
		<!-- 中间内容 -->
		<tr>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		</tr>
		<tr>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		</tr>
		<tr>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		</tr>
		<tr>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		</tr>
		<tr>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
			<td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
		</tr>
	</table>
	<script>
		// 提取后的信息，格式：{日期: {贡献值: 数字, 描述: 字符串}}
		const dailyRecords = {};
		
		// 获取指定标题元素
		const headingElements = document.querySelectorAll('h4.wp-block-heading');
		const paragraphElements = document.querySelectorAll('p');
		    
		let currentHeadingIndex = 0;
		for (let i = 0; i < paragraphElements.length; i++) {
		    const currentParagraph = paragraphElements[i];
		    const prevHeading = headingElements[currentHeadingIndex];
		    
		    // 检查当前段落是否紧跟在对应的标题后面
		    if (currentParagraph.offsetTop > prevHeading.offsetTop && currentParagraph.offsetTop - prevHeading.offsetTop < 100) {
		        const textContent = prevHeading.textContent;
		        // 空格分割
		        const parts = textContent.split(' ');
		        if (parts.length >= 3) {
		            const date = parts[0];
		            // 对于每个评分，比如2/10，用'/'分割
		            const contributionValue = parseInt(parts[2].split('/')[0]);
		            const description = currentParagraph.textContent;
		            if (!dailyRecords[date]) {
		                dailyRecords[date] = {
		                    contributionValue: contributionValue,
		                    description: description
		                };
		            }
		        }
		        currentHeadingIndex++;
		        if (currentHeadingIndex >= headingElements.length) {
		            break;
		        }
		    }
		}
		    
		// 把贡献值push进contributionValues，方便画图
		const contributionValues = [];
		const dates = Object.keys(dailyRecords);
		dates.sort((a, b) => a.localeCompare(b));
		dates.forEach(date => {
		    contributionValues.push(dailyRecords[date].contributionValue);
		});
		
		const table = document.getElementById('calendarTable');
		const rows = table.getElementsByTagName('tr');
		
		let index = 0;
		    
		// 用Date对象获取2025.01.01是星期几，第二个参数需要-1，月份对应0-11
		const startDay = new Date(2025, 0, 1).getDay();
		    
		// 记录当前填充到的单元格位置
		let cellIndex = startDay;
		    
		// 画图！
		for (let day = 1; day <= 31; day++) {
		    const rowIndex = Math.floor(cellIndex / 7);
		    const colIndex = cellIndex % 7;
		    const currentRow = rows[rowIndex + 1]; // +1是因为跳过表头行
		    const cells = currentRow.getElementsByTagName('td');
		    const contributionValue = contributionValues[index];
		    const className = `contribution-${contributionValue}`;
		    cells[colIndex].classList.add(className);
		    
		    // 如果贡献值>5，把字体改成白色
		    if (contributionValue > 5) {
		        cells[colIndex].style.color = "white";
		    }
		    
		    if (contributionValue!== 0) {
		        cells[colIndex].textContent = day;
		    }
		    index++;
		    cellIndex++;
		}
		    
	</script>
</body>
</html>
HTML

Updated on 2025.1.6

在写赛博日记的时候插入了wp的表格，但是发现wp表格样式被我自定义的日历样式覆盖了，解决方式是给自己的表格加类名，wp自带的表格类名是”wp-block-table”，和它不冲突就可以了。

未解之谜：td标签加上类名之后，会导致颜色填充功能无法正常工作，但是不加类名也不影响wp表格，以后有实力了再来研究。

Updated on 2025.1.6

今天才发现，如果按照原来代码的样式，1.10会排在1.1后面，因为我把整个日期当作一个字符串然后按照字典序排序了，解决方式要么把所有日期格式高位统一用0补齐，很麻烦，所以我选择自己改排序逻辑

//修改前
const dates = Object.keys(dailyRecords);
dates.sort((a, b) => a.localeCompare(b));

//修改后
const dates = Object.keys(dailyRecords);
dates.sort((a, b) => {
    const [monthA, dayA] = a.split('.').map(num => parseInt(num, 10));
    const [monthB, dayB] = b.split('.').map(num => parseInt(num, 10));
    if (monthA !== monthB) {
        return monthA - monthB;
    } else {
        return dayA - dayB;<br>    }
});
JavaScript

因为改动比较多，所以贴一个现在的完整代码

展开 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>2025年1月日历</title>
    <style>
        /* 表格整体样式 */
        .calendar-table {
            border-collapse: collapse;
            width: fit-content;
            margin-left: 0;
            border: 0;
            border-style: none;
            background-color: rgba(246, 248, 250);
            border-radius: 3px;
            overflow: hidden;
            display: flex;
            flex-wrap: wrap;
        }
        /* 表头行样式 */
        .calendar-table tr:first-child {
            display: flex; 
            width: 100%;
            justify-content: space-between; 
            padding: 0 10px; 
            box-sizing: border-box; 
        }
        /* 普通行样式 */
        .calendar-table tr {
            display: flex;
            width: 100%;           
            justify-content: space-between;
            padding: 0 10px; 
            box-sizing: border-box; 
            margin-bottom: 0px;
        }
        /* 单元格样式设置 */
        td {
            border: 0;
            border-style: none;
            padding: 3px;
            text-align: center;
            width: 40px;
            height: 40px;
            border-radius: 3px;
            background-color: rgba(246, 248, 250);
            box-sizing: border-box; 
        }
        /* 表头行（星期）单独的颜色设置 */
       .header-cell {
            background-color: rgb(234, 235, 237);
        }

        /* 贡献值的样式 */
        .contribution-1 {
            background-color: rgba(32, 111, 56, 0.1);
        }

        .contribution-2 {
            background-color: rgba(32, 111, 56, 0.2);
        }

        .contribution-3 {
            background-color: rgba(32, 111, 56, 0.3);
        }

        .contribution-4 {
            background-color: rgba(32, 111, 56, 0.4);
        }

        .contribution-5 {
            background-color: rgba(32, 111, 56, 0.5);
        }

        .contribution-6 {
            background-color: rgba(32, 111, 56, 0.6);
        }

        .contribution-7 {
            background-color: rgba(32, 111, 56, 0.7);
        }

        .contribution-8 {
            background-color: rgba(32, 111, 56, 0.8);
        }

        .contribution-9 {
            background-color: rgba(32, 111, 56, 0.9);
        }

        .contribution-10 {
            background-color: #206f38;
        }
    </style>
</head>

<body>
    <table id="calendarTable" class="calendar-table" style="width: fit-content; margin-left: 0;">
        <!-- 表头单独设置class -->
        <tr>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">日</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">一</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">二</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">三</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">四</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">五</td>
            <td class="header-cell" style="padding: 5px; text-align: center; width: 40px; height: 40px; ">六</td>
        </tr>
        <!-- 中间内容 -->
        <tr>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
        </tr>
        <tr>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
        </tr>
        <tr>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
        </tr>
        <tr>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
        </tr>
        <tr>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
            <td style="padding: 5px; text-align: center; width: 40px; height: 40px; "></td>
        </tr>
    </table>

    <script>
    // 提取后的信息，格式：{日期: {贡献值: 数字, 描述: 字符串}}
    const dailyRecords = {};

    // 获取指定标题元素
    const headingElements = document.querySelectorAll('h4.wp-block-heading');
    const paragraphElements = document.querySelectorAll('p');
    
    let currentHeadingIndex = 0;
    for (let i = 0; i < paragraphElements.length; i++) {
        const currentParagraph = paragraphElements[i];
        const prevHeading = headingElements[currentHeadingIndex];
    
        // 检查当前段落是否紧跟在对应的标题后面
        if (currentParagraph.offsetTop > prevHeading.offsetTop && currentParagraph.offsetTop - prevHeading.offsetTop < 100) {
            const textContent = prevHeading.textContent;
            // 空格分割
            const parts = textContent.split(' ');
            if (parts.length >= 3) {
                const date = parts[0];
                // 对于每个评分，比如2/10，用'/'分割
                const contributionValue = parseInt(parts[2].split('/')[0]);
                const description = currentParagraph.textContent;
                if (!dailyRecords[date]) {
                    dailyRecords[date] = {
                        contributionValue: contributionValue,
                        description: description
                    };
                }
            }
            currentHeadingIndex++;
            if (currentHeadingIndex >= headingElements.length) {
                break;
            }
        }
    }
    
    // 把贡献值push进contributionValues，方便画图
    const contributionValues = [];
    const dates = Object.keys(dailyRecords);
    // 自定义排序函数
    dates.sort((a, b) => {
        const [monthA, dayA] = a.split('.').map(num => parseInt(num, 10));
        const [monthB, dayB] = b.split('.').map(num => parseInt(num, 10));
        if (monthA !== monthB) {
            return monthA - monthB;
        } else {
            return dayA - dayB;
        }
    });
    dates.forEach(date => {
        contributionValues.push(dailyRecords[date].contributionValue);
    });

    const table = document.getElementById('calendarTable');
    const rows = table.getElementsByTagName('tr');

    let index = 0;
    
    // 用Date对象获取2025.01.01是星期几，第二个参数需要-1，月份对应0-11
    const startDay = new Date(2025, 0, 1).getDay();
    
    // 记录当前填充到的单元格位置
    let cellIndex = startDay;
    
    // 画图！
    for (let day = 1; day <= 31; day++) {
        const rowIndex = Math.floor(cellIndex / 7);
        const colIndex = cellIndex % 7;
        const currentRow = rows[rowIndex + 1]; // +1是因为跳过表头行
        const cells = currentRow.getElementsByTagName('td');
        const contributionValue = index < contributionValues.length ? contributionValues[index] : 0;
        const className = `contribution-${contributionValue}`;
        cells[colIndex].classList.add(className);
    
        // 如果贡献值>5，把字体改成白色
        if (contributionValue > 5) {
            cells[colIndex].style.color = "white";
        }
    
        if (contributionValue!== 0) {
            cells[colIndex].textContent = day;
        }
        index++;
        cellIndex++;
    }
    
</script>
</body>
</html>
HTML
标签

留下评论

您的邮箱地址不会被公开。 必填项已用 * 标注