仿github贡献记录模块

下载代码

html

css

分享到微信朋友圈

html

css

body{background-color: #fff}
.page {
  padding: 200px 0;
  display: -webkit-box;
  display: flex;
  flex-diraction: column;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}

.grid {
  position: relative;
  width: 822px;
  padding-left: 30px;
}
.grid__head {
  width: 100%;
  margin-bottom: 10px;
}
.grid__cols {
  position: absolute;
  left: 0;
  top: 22px;
  width: 25px;
}
.grid__body {
  display: grid;
  grid-gap: 3px;
  grid-auto-flow: column;
  grid-template: repeat(7, 1fr)/repeat(53, 1fr);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  margin-bottom: 10px;
}
.grid__footer {
  width: 100%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
.grid__cell {
  width: 12px;
  height: 12px;
  background-color: #ebedf0;
}
.grid__cell_color_1 {
  background-color: #c6e48b;
}
.grid__cell_color_2 {
  background-color: #7bc96f;
}
.grid__cell_color_3 {
  background-color: #239a3b;
}
.grid__cell_color_4 {
  background-color: #196127;
}

.grid-head {
  display: grid;
  grid-gap: 3px;
  grid-template-columns: repeat(53, 1fr);
  grid-template-rows: 12px;
}
.grid-head__cell {
  font-size: 10px;
  color: #767676;
}
.grid-head__cell:nth-child(1) {
  grid-column-start: 1;
  grid-column-end: 3;
}
.grid-head__cell:nth-child(2) {
  grid-column-start: 3;
  grid-column-end: 7;
}
.grid-head__cell:nth-child(3) {
  grid-column-start: 7;
  grid-column-end: 11;
}
.grid-head__cell:nth-child(4) {
  grid-column-start: 11;
  grid-column-end: 16;
}
.grid-head__cell:nth-child(5) {
  grid-column-start: 16;
  grid-column-end: 20;
}
.grid-head__cell:nth-child(6) {
  grid-column-start: 20;
  grid-column-end: 24;
}
.grid-head__cell:nth-child(7) {
  grid-column-start: 24;
  grid-column-end: 29;
}
.grid-head__cell:nth-child(8) {
  grid-column-start: 29;
  grid-column-end: 33;
}
.grid-head__cell:nth-child(9) {
  grid-column-start: 33;
  grid-column-end: 37;
}
.grid-head__cell:nth-child(10) {
  grid-column-start: 37;
  grid-column-end: 42;
}
.grid-head__cell:nth-child(11) {
  grid-column-start: 42;
  grid-column-end: 46;
}
.grid-head__cell:nth-child(12) {
  grid-column-start: 46;
  grid-column-end: 50;
}
.grid-head__cell:nth-child(13) {
  grid-column-start: 50;
  grid-column-end: 54;
}

.grid-cols {
  display: grid;
  grid-gap: 3px;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr);
}
.grid-cols__cell {
  font-size: 10px;
  color: #767676;
  width: 25px;
  height: 12px;
}

.grid-footer {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: end;
          justify-content: flex-end;
}
.grid-footer__cell {
  width: 12px;
  height: 12px;
  margin: 0 1.5px;
  background-color: #ebedf0;
}
.grid-footer__cell_color_1 {
  background-color: #c6e48b;
}
.grid-footer__cell_color_2 {
  background-color: #7bc96f;
}
.grid-footer__cell_color_3 {
  background-color: #239a3b;
}
.grid-footer__cell_color_4 {
  background-color: #196127;
}
.grid-footer__first, .grid-footer__last {
  margin: 0 6px;
  font-size: 10px;
  color: #767676;
}

.tooltip {
  position: absolute;
  left: -1000px;
  top: -1000px;
  -webkit-transform: translate(-50%, -43px);
          transform: translate(-50%, -43px);
  padding: 10px;
  font-size: 12px;
  color: #959da5;
  text-align: center;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  display: none;
  -webkit-transition: opacity .1s ease-out;
  transition: opacity .1s ease-out;
  pointer-events: none;
}
.tooltip strong {
  color: #fff;
}
.tooltip::before {
  content: '';
  position: absolute;
  z-index: 99999;
  left: 50%;
  bottom: -10px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  display: block;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 5px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  pointer-events: none;
}
.tooltip_display {
  display: block;
}
.tooltip_visible {
  opacity: 1;
}

JavaScript

const gridCell = document.querySelectorAll('.grid__cell');
const tooltip = document.querySelector('.tooltip');

let timer = null;

const clearTooltip = () => {
	tooltip.innerHTML = '';
}

const closeTooltip = () => {
	tooltip.classList.remove('tooltip_visible');
	
	timer = setTimeout(() => {
		tooltip.classList.remove('tooltip_display');
		clearTooltip();
	}, 200);
}

gridCell.forEach(cell => {
	cell.addEventListener('mouseover', () => {
		const coords = cell.getBoundingClientRect();
		const commit = cell.getAttribute('data-commit');
		const date = cell.getAttribute('data-date');

openTooltip({
			x: coords.x + coords.width / 2,
			y: coords.y,
			commit,
			date
		});
	});
	cell.addEventListener('mouseout', closeTooltip);
});

const alphabet = {
	'D': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 1, 0, 0, 0, 1, 0],
		[0, 1, 0, 0, 0, 1, 0],
		[0, 0, 1, 1, 1, 0, 0]
	],
	'E': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 1, 0, 1, 0, 1, 0],
		[0, 1, 0, 0, 0, 1, 0]
	],
	'H': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 0, 0, 1, 0, 0, 0],
		[0, 1, 1, 1, 1, 1, 0]
	],
	'L': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 0, 0, 0, 0, 1, 0],
		[0, 0, 0, 0, 0, 1, 0]
	],
	'O': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 1, 0, 0, 0, 1, 0],
		[0, 1, 1, 1, 1, 1, 0]
	],
	'R': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 1, 0, 1, 0, 0, 0],
		[0, 1, 1, 0, 1, 1, 0]
	],
	'W': [
		[0, 1, 1, 1, 1, 1, 0],
		[0, 0, 0, 0, 0, 1, 0],
		[0, 0, 0, 1, 1, 1, 0],
		[0, 0, 0, 0, 0, 1, 0],
		[0, 1, 1, 1, 1, 1, 0]
	],
	',': [
		[0, 0, 0, 0, 0, 1, 1]
	],
	'<': [
		[0, 0, 0, 1, 0, 0, 0],
		[0, 0, 1, 0, 1, 0, 0]
	],
	'>': [
		[0, 0, 1, 0, 1, 0, 0],
		[0, 0, 0, 1, 0, 0, 0]
	]
}

const monthArr = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const msDay = 86400000;
const msFirstDay = 1553385600000;
let counter = 0;

const getDateString = (cnt) => {
	const date = new Date(msFirstDay + msDay * cnt);
	return `${monthArr[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
}

const drawSpace = () => {
	for (let i = 0, commit = {}, date = '' ; i < 7 ; i++) {
		date = getDateString(counter);
		commit = getContributionsObj(counter, false);

gridCell[counter].setAttribute('data-commit', commit.str);
		gridCell[counter].setAttribute('data-date', date);
		
		counter++;
	}
}

const drawString = string => {
	drawSpace();
	string.split('').forEach(symbol => {
		drawSymbol(symbol.toUpperCase());
		drawSpace();
	});
}

// init drawing

drawString('<Hello, World>');

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg