效果图

  <h2 contenteditable="true"></h2>

* {margin: 0;padding: 0;box-sizing: border-box;font-family: arial;}body {display: flex;align-items: center;justify-content: center;min-height: 100vh;background: -webkit-linear-gradient(top left, #07252d, rgb(162, 173, 110));}h2 {position: relative;font-size: 6em;letter-spacing: 15px;color: #0e3742;text-transform: uppercase;text-align: center;-webkit-box-reflect: below 1px linear-gradient(transparent, #0008);line-height: 0.7em;outline: none;animation: animate 5s linear infinite;}@keyframes animate {0%,18%,20%,50.1%,60%,65.1%,80%,90.1%,92% {color: rgb(155, 30, 50);}18.1%,20.1%,50.1%,60%,65.1%,80%,90.1%,100% {color: rgb(141, 165, 52);text-shadow: 0 0 0 10px #03bcf4;}}

 var h2 = document.querySelector('h2');var date = new Date();var h = date.getHours();if (h < 10) {h2.innerHTML = '上班打卡';}else if (h < 12) {h2.innerHTML = '上班中~';}else if (h < 14) {h2.innerHTML = '吃饭睡觉打豆豆';} else if (h < 18) {h2.innerHTML = '持续上班中~';} else if (h < 20) {h2.innerHTML = '要下班了 记得打卡';}else {h2.innerHTML = 'HELLO WORLD';}