pcchou/index.html

## index.html
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CodePen - Simple timeline with CSS</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="box">
      <div id="check-left-line"></div>
      <div id="check-left-line-overlay"></div>
      <ul class="checks">
        <li id="time0" class="passed"></li>
        <li id="time1">月出 17:02</li>
        <li id="time2">初虧 17:09</li>
        <li id="time3">食既 18:16</li>
        <li id="time4">食甚 18:59</li>
        <li id="time5" class="uranus">天王星掩入 19:04</li>
        <li id="time6"><b>生光</b> 19:42</li>
        <li id="time7" class="uranus">天王星復出 19:52</li>
        <li id="time8">復圓 20:49</li>
        <li id="time9"></li>
      </ul>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="script.js"></script>
  </body></html>

## script.js
// Test moment.js
//alert(moment().format())

var totalHeight = 750;
var times = [];
//var starttime = moment();
//var starttime = moment("2022-11-05 23:00:00+08:00");
var starttime = moment("2022-11-08 17:00:00+08:00");
var time_offsets = [
  0,
  2,
  9,
  60 * 1 + 16,
  60 * 1 + 59,
  60 * 2 + 4,
  60 * 2 + 42,
  60 * 2 + 52,
  60 * 3 + 49,
  60 * 4
]; // time offsets in minutes
var time_moments = time_offsets.map((x) => moment(starttime).add(x, "m")); // time as moment objects
//console.log(starttime)
//console.log(time_moments);
for (let i = 0; i <= 9; i++) {
  let li = document.getElementById(`time${i}`);
  times.push(li);
  if (i != 9) {
    li.style.top = `${(time_offsets[i] / (60 * 4)) * totalHeight - 8.5}px`;
  } else {
    li.style.top = `${(time_offsets[i] / (60 * 4)) * totalHeight - 8.5}px`;
  }
}
//console.log(times);

function updateTime(x) {
  let duration = moment.duration(x.diff(starttime));
  let now_offset = duration.asMinutes();
  console.log(now_offset);
  for (let i = 1; i <= 9; i++) {
    if (now_offset >= time_offsets[i]) {
      console.log(i, "add passed");
      times[i].classList.add("passed");
    } else {
      console.log(i, "remove passed");
      times[i].classList.remove("passed");
    }
    times[i].style.animation = "none";
    times[i].offsetHeight; /* trigger reflow */
    times[i].style.animation = null;
  }
  let overlay = document.getElementById("check-left-line-overlay");
  overlay.style.minHeight = `${
    Math.min(now_offset / (60 * 4), 1) * totalHeight
  }px`;
}

window.onload = function () {
  updateTime(moment());
  setInterval("updateTime(moment())", 20 * 1000);
};


## simple-timeline-with-css.markdown

      
    Raw
  

              simple-timeline-with-css.markdown
            
          
    Simple timeline with CSS

A Pen by 宇 on CodePen.
License.

  
## style.css
body {
  background-color: black;
}
#box {
  display: flex;
  position: relative;
  height: 750px;
  margin: 20px 0;
}
#check-left-line {
  border-left: 1px solid white;
  position: absolute;
  height: 750px;
  top: 0px;
  left: 8px;
}
#check-left-line-overlay {
  border-left: 1px solid #c83737;
  position: absolute;
  height: 0%;
  top: 0px;
  left: 8px;
  z-index: 10;
}
.checks {
  color: white;
  font-size: 20px;
  list-style: none;
  width: 150px;
  padding-left: 0;
  margin: 0;
  position: relative;
}
.checks li {
  font-size: 12px;
  /*margin-bottom: px;*/
  padding-left: 20px;
  animation: 0.5s ease-in 0s 1 slideInFromTop;
  min-height: 16.5px;
  position: absolute;
}
.uranus {
  color: #3da6ec;
}
.checks li:before {
  position: absolute;
  content: "⬤";
  transform: scale(0.5);
  left: 1px;
  z-index: 100;
}
.passed:before {
  color: #c83737 !important;
}
#time0 {
  transition: none;
  top: 0;
}
#time1 {
  animation-delay: 1s;
}
#time2 {
  animation-delay: 1.5s;
}
#time3 {
  animation-delay: 2s;
}
#time4 {
  animation-delay: 2.5s;
  color: #f2d202;
}
#time5 {
  animation-delay: 3s;
}
#time6 {
  animation-delay: 3.5s;
}
#time7 {
  animation-delay: 4s;
}
#time8 {
  animation-delay: 4.5s;
}
#time9 {
  animation: none !important;
  top: 600px;
}
@keyframes slideInFromTop {
  0% {
    transform: translateY(-60%);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>CodePen - Simple timeline with CSS</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<div id="box">
	<div id="check-left-line"></div>
	<div id="check-left-line-overlay"></div>
	<ul class="checks">
	<li id="time0" class="passed"></li>
	<li id="time1">月出 17:02</li>
	<li id="time2">初虧 17:09</li>
	<li id="time3">食既 18:16</li>
	<li id="time4">食甚 18:59</li>
	<li id="time5" class="uranus">天王星掩入 19:04</li>
	<li id="time6"><b>生光</b> 19:42</li>
	<li id="time7" class="uranus">天王星復出 19:52</li>
	<li id="time8">復圓 20:49</li>
	<li id="time9"></li>
	</ul>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
	<script src="script.js"></script>
	</body></html>
	// Test moment.js
	//alert(moment().format())

	var totalHeight = 750;
	var times = [];
	//var starttime = moment();
	//var starttime = moment("2022-11-05 23:00:00+08:00");
	var starttime = moment("2022-11-08 17:00:00+08:00");
	var time_offsets = [
	0,
	2,
	9,
	60 * 1 + 16,
	60 * 1 + 59,
	60 * 2 + 4,
	60 * 2 + 42,
	60 * 2 + 52,
	60 * 3 + 49,
	60 * 4
	]; // time offsets in minutes
	var time_moments = time_offsets.map((x) => moment(starttime).add(x, "m")); // time as moment objects
	//console.log(starttime)
	//console.log(time_moments);
	for (let i = 0; i <= 9; i++) {
	let li = document.getElementById(`time${i}`);
	times.push(li);
	if (i != 9) {
	li.style.top = `${(time_offsets[i] / (60 * 4)) * totalHeight - 8.5}px`;
	} else {
	li.style.top = `${(time_offsets[i] / (60 * 4)) * totalHeight - 8.5}px`;
	}
	}
	//console.log(times);

	function updateTime(x) {
	let duration = moment.duration(x.diff(starttime));
	let now_offset = duration.asMinutes();
	console.log(now_offset);
	for (let i = 1; i <= 9; i++) {
	if (now_offset >= time_offsets[i]) {
	console.log(i, "add passed");
	times[i].classList.add("passed");
	} else {
	console.log(i, "remove passed");
	times[i].classList.remove("passed");
	}
	times[i].style.animation = "none";
	times[i].offsetHeight; /* trigger reflow */
	times[i].style.animation = null;
	}
	let overlay = document.getElementById("check-left-line-overlay");
	overlay.style.minHeight = `${
	Math.min(now_offset / (60 * 4), 1) * totalHeight
	}px`;
	}

	window.onload = function () {
	updateTime(moment());
	setInterval("updateTime(moment())", 20 * 1000);
	};
	body {
	background-color: black;
	}
	#box {
	display: flex;
	position: relative;
	height: 750px;
	margin: 20px 0;
	}
	#check-left-line {
	border-left: 1px solid white;
	position: absolute;
	height: 750px;
	top: 0px;
	left: 8px;
	}
	#check-left-line-overlay {
	border-left: 1px solid #c83737;
	position: absolute;
	height: 0%;
	top: 0px;
	left: 8px;
	z-index: 10;
	}
	.checks {
	color: white;
	font-size: 20px;
	list-style: none;
	width: 150px;
	padding-left: 0;
	margin: 0;
	position: relative;
	}
	.checks li {
	font-size: 12px;
	/margin-bottom: px;/
	padding-left: 20px;
	animation: 0.5s ease-in 0s 1 slideInFromTop;
	min-height: 16.5px;
	position: absolute;
	}
	.uranus {
	color: #3da6ec;
	}
	.checks li:before {
	position: absolute;
	content: "⬤";
	transform: scale(0.5);
	left: 1px;
	z-index: 100;
	}
	.passed:before {
	color: #c83737 !important;
	}
	#time0 {
	transition: none;
	top: 0;
	}
	#time1 {
	animation-delay: 1s;
	}
	#time2 {
	animation-delay: 1.5s;
	}
	#time3 {
	animation-delay: 2s;
	}
	#time4 {
	animation-delay: 2.5s;
	color: #f2d202;
	}
	#time5 {
	animation-delay: 3s;
	}
	#time6 {
	animation-delay: 3.5s;
	}
	#time7 {
	animation-delay: 4s;
	}
	#time8 {
	animation-delay: 4.5s;
	}
	#time9 {
	animation: none !important;
	top: 600px;
	}
	@keyframes slideInFromTop {
	0% {
	transform: translateY(-60%);
	}
	100% {
	transform: translateY(0);
	opacity: 1;
	}
	}