博客

可以在侧边栏添加一个时间小组件，渐变颜色，会根据网站背景实时切换白昼和黑夜

使用方法：在构建器中直接在侧边栏添加一个自定义html，代码复制进去就行

<!-- 暗黑透明时钟 -->
<div class="dark-clock" id="darkClock">
  <div class="dark-time-row">
    <div class="dark-time-item">
      <span class="dark-number" id="h">00</span>
      <span class="dark-label">时</span>
    </div>
    <span class="dark-colon">:</span>
    <div class="dark-time-item">
      <span class="dark-number" id="m">00</span>
      <span class="dark-label">分</span>
    </div>
    <span class="dark-colon">:</span>
    <div class="dark-time-item">
      <span class="dark-number" id="s">00</span>
      <span class="dark-label">秒</span>
    </div>
  </div>
  <div class="dark-date" id="date">2024年1月1日</div>
  <div class="dark-day" id="day">星期一</div>
</div>

<style>
.dark-clock{
  display:block;
  max-width:100%;
  font-size:1rem;
  padding:1.5em 2em;
  background:transparent;          /* 完全透明 */
  border-radius:.8em;
  text-align:center;
  line-height:1;
}

.dark-time-row{
  display:flex;
  justify-content:center;
  align-items:baseline;
  gap:1em;
  margin-bottom:.6em;
}
.dark-time-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.dark-number{
  font-size:3em;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,#ffd26f 0%,#ff7b77 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 6px rgba(255,210,111,.35); /* 微光描边，提升暗底对比 */
}
.dark-label{
  font-size:.45em;
  color:#c3a6ff;
  margin-top:.2em;
  letter-spacing:1px;
}
.dark-colon{
  font-size:3em;
  color:#ff7eb3;
  text-shadow:0 0 4px rgba(255,126,179,.4);
  animation:blink 1.2s infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:.3} }

.dark-date{
  font-size:.9em;
  color:#a0aec0;
  margin-bottom:.2em;
}
.dark-day{
  font-size:.7em;
  color:#8a93b0;
  letter-spacing:2px;
  text-transform:uppercase;
}
</style>

<script>
const pad=n=>n.toString().padStart(2,'0');
function update(){
  const t=new Date();
  h.textContent=pad(t.getHours());
  m.textContent=pad(t.getMinutes());
  s.textContent=pad(t.getSeconds());
  date.textContent=`${t.getFullYear()}年${t.getMonth()+1}月${t.getDate()}日`;
  day.textContent='星期'+'日一二三四五六'[t.getDay()];
}
update();
setInterval(update,1000);
</script>