网站网页侧边栏动态时间小工具HTML

这是一款侧边动态时间小工具，这个是纯时间动态，带有一些特效，非常好看，喜欢的自行部署吧。

代码部署

将下面的代码放到：WP后台->>外观–>>小工具–>>自定义HTML即可

<style>

  .times {

    margin: 0;

    padding: 0;

    height: 100%;

  }

  .times2 {

    height: 100%;

    background: #fff;

  }

  .times2 svg {

    height: 100%;

    width: 100%;

    margin-bottom: -34px;

  }

  .words {

    font-size: 60px;

    font-weight: bold;

    text-transform: uppercase;

    fill: none;

    stroke-width: 5px;

    stroke-dasharray: 90, 310;

    animation: drawing 8s linear infinite;

  }

  .words-1 {

    stroke: deepskyblue;

    text-shadow: 0 0 50px deepskyblue;

    animation-delay: -2s;

  }

  .words-2 {

    stroke: lightseagreen;

    text-shadow: 0 0 50px lightseagreen;

    animation-delay: -4s;

  }

  .words-3 {

    stroke: orange;

    text-shadow: 0 0 50px orange;

    animation-delay: -6s;

  }

  .words-4 {

    stroke: purple;

    text-shadow: 0 0 50px purple;

    animation-delay: -8s;

  }

  @keyframes drawing {

    100% {

      stroke-dashoffset: -400;

    }

  }

</style>

<div class="sidebox sidebox--desk">

  <div class="times">

    <div class="sidebox__content" style="padding: 0;">

      <div  style="border-radius:15px;" class="times2">

        <svg>

          <text text-anchor="middle" x="50%" y="50%" class="words words-1"></text>

          <text text-anchor="middle" x="50%" y="50%" class="words words-2"></text>

          <text text-anchor="middle" x="50%" y="50%" class="words words-3"></text>

          <text text-anchor="middle" x="50%" y="50%" class="words words-4"></text>

        </svg>

      </div>

    </div>

  </div>

</div>

<script>

  function showtime() {

    const now = new Date();

    let h = now.getHours();

    let m = now.getMinutes();

    let s = now.getSeconds();

    h = checktime(h);

    m = checktime(m);

    s = checktime(s);

    return `${h}:${m}:${s}`;

  }

  function checktime(x) {

    return x < 10 ? `0${x}` : x;

  }

  const texts = document.querySelectorAll("text");

  setInterval(() => {

    const time = showtime();

    texts.forEach(text => {

      text.textContent = time;

    });

  }, 1000);

</script>