纯CSS实现计时器

最新推荐文章于 2024-02-23 15:48:05 发布

Web阿成

最新推荐文章于 2024-02-23 15:48:05 发布

阅读量358

点赞数 3

文章标签： css 前端 css3

本文链接：https://blog.csdn.net/a_strong_pig/article/details/134804468

版权

跟b站 @小k师兄学习一手CSS的计时器

1. 基本样式

注意，这里开始按钮使用伪类进行标签名字的设定，因为开始按钮点击以后有一个暂停的功能，就先不写死了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        background: aliceblue;
      }
      .counter {
        display: grid;
        gap: 10px;
        grid-template-areas: "clock clock" "start reset";
      }
      .clock {
        grid-area: clock;
        text-align: center;
        font-size: 60px;
        padding: 0.2em 0.5em;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-family: monospace;
        background-color: #3a3a3a;
        color: #fff;
      }
      .btn {
        text-align: center;
        padding: 0.5em;
        font-size: 24px;
        background-color: chocolate;
        color: #fff;
        grid-area: start;
        user-select: none;
        cursor: pointer;
        transition: 0.2s;
        border-radius: 5px;
      }
      .btn:hover {
        filter: brightness(1, 1);
      }
      .reset {
        grid-area: reset;
        background-color: #f44336;
        border-radius: 5px;
      }
      .start::before {
        content: "开始";
      }
    </style>
  </head>
  <body>
    <h1>计时器</h1>
    <div class="counter">
      <input type="checkbox" id="start" hidden />
      <label class="btn start" for="start"></label>
      <label class="btn reset">重置</label>
      <div class="clock"></div>
    </div>
  </body>
</html>

自定义属性显示时间

我们使用property属性创造三个数字，在时间样式里面使用counter-reset方法可以重置/创建计数器，配合伪元素显示。

此属性存在兼容性问题，但是已经兼容了很多主流的浏览器了。

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        background: aliceblue;
      }
      /* 存在兼容性问题 */
      @property --m{
        /* 类型 */
        syntax: '<integer>';
        /* 可继承 */
        inherits: 0;
        /* 默认值 */
        initial-value: 0;
      }
      @property --s{
        /* 类型 */
        syntax: '<integer>';
        /* 可继承 */
        inherits: 0;
        /* 默认值 */
        initial-value: 0;
      }
      @property --ms{
        /* 类型 */
        syntax: '<integer>';
        /* 可继承 */
        inherits: 0;
        /* 默认值 */
        initial-value: 0;
      }
      .counter {
        display: grid;
        gap: 10px;
        grid-template-areas: "clock clock" "start reset";
      }
      .clock {
        grid-area: clock;
        text-align: center;
        font-size: 60px;
        padding: 0.2em 0.5em;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-family: monospace;
        background-color: #3a3a3a;
        color: #fff;
        /* 使用 */
        counter-set: minitus var(--m) seconds var(--s) ms var(--ms);
      }
      .clock::before{
        content:counter(minitus) ':' counter(seconds) ':' counter(ms);
      }
      .btn {
        text-align: center;
        padding: 0.5em;
        font-size: 24px;
        background-color: chocolate;
        color: #fff;
        grid-area: start;
        user-select: none;
        cursor: pointer;
        transition: 0.2s;
        border-radius: 5px;
      }
      .btn:hover {
        filter: brightness(1, 1);
      }
      .reset {
        grid-area: reset;
        background-color: #f44336;
        border-radius: 5px;
      }
      .start::before {
        content: "开始";
      }
    </style>

计时器的效果

我们使用动画效果实现定时器的初步效果，使用decimal-leading-zero配合counter使用达到个位数前面补0的效果。

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        background: aliceblue;
      }
      /* 存在兼容性问题 */
      @property --m {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      @property --s {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      @property --ms {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      .counter {
        display: grid;
        gap: 10px;
        grid-template-areas: "clock clock" "start reset";
      }
      .clock {
        grid-area: clock;
        text-align: center;
        font-size: 60px;
        padding: 0.2em 0.5em;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-family: monospace;
        background-color: #3a3a3a;
        color: #fff;
        /* 重置/创建计数器 */
        counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
        animation: minitus 3600s steps(60, end) infinite,
          seconds 60s steps(60, end) infinite, ms 1s steps(100, end) infinite;
      }
      @keyframes minitus {
        to {
          --m: 59;
        }
      }
      @keyframes seconds {
        to {
          --s: 59;
        }
      }
      @keyframes ms {
        to {
          --ms: 100;
        }
      }

      .clock::before {
        content: counter(minitus, decimal-leading-zero) ":"
          counter(seconds, decimal-leading-zero) ":"
          counter(ms, decimal-leading-zero);
      }
      .btn {
        text-align: center;
        padding: 0.5em;
        font-size: 24px;
        background-color: chocolate;
        color: #fff;
        grid-area: start;
        user-select: none;
        cursor: pointer;
        transition: 0.2s;
        border-radius: 5px;
      }
      .btn:hover {
        filter: brightness(1, 1);
      }
      .reset {
        grid-area: reset;
        background-color: #f44336;
        border-radius: 5px;
      }
      .start::before {
        content: "开始";
      }
    </style>

开始、暂停、重置按钮的实现

我们使用动画里面的属性来控制按钮的暂停和开始事件，并且把最开始设置为停止状态。

    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 15px;
        align-items: center;
        background: aliceblue;
      }
      /* 存在兼容性问题 */
      @property --m {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      @property --s {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      @property --ms {
        /* 类型 */
        syntax: "<integer>";
        /* 可继承 */
        inherits: false;
        /* 默认值 */
        initial-value: 0;
      }
      .counter {
        display: grid;
        gap: 10px;
        grid-template-areas: "clock clock" "start reset";
      }
      .clock {
        grid-area: clock;
        text-align: center;
        font-size: 60px;
        padding: 0.2em 0.5em;
        border: 5px solid rgba(255, 255, 255, 0.3);
        border-radius: 10px;
        font-family: monospace;
        background-color: #3a3a3a;
        color: #fff;
        /* 重置/创建计数器 */
        counter-reset: minitus var(--m) seconds var(--s) ms var(--ms);
        animation: minitus 3600s steps(60, end) infinite,
          seconds 60s steps(60, end) infinite, ms 1s steps(100, end) infinite;
          animation-play-state: paused;
      }
      @keyframes minitus {
        to {
          --m: 59;
        }
      }
      @keyframes seconds {
        to {
          --s: 59;
        }
      }
      @keyframes ms {
        to {
          --ms: 100;
        }
      }

      .clock::before {
        content: counter(minitus, decimal-leading-zero) ":"
          counter(seconds, decimal-leading-zero) ":"
          counter(ms, decimal-leading-zero);
      }
      .btn {
        text-align: center;
        padding: 0.5em;
        font-size: 24px;
        background-color: chocolate;
        color: #fff;
        grid-area: start;
        user-select: none;
        cursor: pointer;
        transition: 0.2s;
        border-radius: 5px;
      }
      .btn:hover {
        filter: brightness(1, 1);
      }
      .reset {
        grid-area: reset;
        background-color: #f44336;
        border-radius: 5px;
      }
      .start::before {
        content: "开始";
      }
      :checked ~ .clock {
        animation-play-state: running;
      }
      :checked ~ .start::before {
        content: "暂停";
      }
      :checked ~ .reset {
        pointer-events: none;
        opacity: 0.65;
      }
      .reset:active + .clock {
        animation: none;
      }
    </style>