svg实现时间进度条(圆环版)

一、前言

  • 使用svg中的circle画内圆外圆,内圆背景透明占位,外圆显示圆环
  • 设置开始标识点与时间显示
  • 通过定时器每秒更新时间及内容,并计算出圆环显示的长度,反向显示达到效果

二、效果展示

三、代码注释详解

xml 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        margin: 20px auto 0;
        background-color: #2f363e;
        width: 600px;
    }

    #time {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        padding: 60px;
    }

    #time .circle {
        position: relative;
        width: 150px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #time .circle svg {
        position: relative;
        width: 150px;
        height: 150px;
        transform: rotate(270deg);
    }

    #time .circle svg circle {
        width: 100%;
        height: 100%;
        fill: transparent;
        stroke: #191919;
        stroke-width: 4;
        transform: translate(5px, 5px);
    }

    #time .circle svg circle:nth-child(2) {
        stroke: var(--clr);
        stroke-dasharray: 440;
    }

    #time div {
        position: absolute;
        text-align: center;
        font-weight: 500;
        font-size: 1.5em;
    }

    #time div .tip {
        position: absolute;
        font-size: 0.35em;
        font-weight: lighter;
        left: 50%;
        transform: translateX(-50%);
    }

    #time .ap {
        position: relative;
        font-size: 1em;
        transform: translateY(-20px);
    }

    .dots {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 10;
        display: flex;
        justify-content: center;
        align-items: flex-start;
    }

    .dots::before {
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: var(--clr);
        border-radius: 50%;
        box-shadow: 0 0 20px var(--clr), 0 0 60px var(--clr);
    }
</style>

<body>
    <div class="box">
        <div id="time">
            <div class="circle" style="--clr: #279746">
                <div class="dots hr-dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70" id="hh"></circle>
                </svg>
                <div id="hours">00</div>
            </div>
            <div class="circle" style="--clr: #f86a34">
                <div class="dots min-dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70" id="mm"></circle>
                </svg>
                <div id="minutes">00</div>
            </div>
            <div class="circle" style="--clr: #4285f4">
                <div class="dots sec-dot"></div>
                <svg>
                    <circle cx="70" cy="70" r="70"></circle>
                    <circle cx="70" cy="70" r="70" id="ss"></circle>
                </svg>
                <div id="seconds">00</div>
            </div>
        </div>
    </div>
</body>
<script>
    // 时分秒数字
    let hours = document.querySelector("#hours");
    let minutes = document.querySelector("#minutes");
    let seconds = document.querySelector("#seconds");
    // 时分秒外圈
    let hh = document.querySelector("#hh");
    let mm = document.querySelector("#mm");
    let ss = document.querySelector("#ss");
    // 每秒更新
    setInterval(() => {
        // 获取时分秒,数字补0,逢24变00
        let h = new Date().getHours() >= 10 && new Date().getHours() != 24 ? new Date().getHours() : new Date().getHours() == 24 ? '00' : '0' + new Date().getHours();
        let m = `${new Date().getMinutes()}`.padStart(2, 0);
        let s = `${new Date().getSeconds()}`.padStart(2, 0);
        // 更新内容
        hours.innerHTML = h + '\n<div class="tip">HOURS</div>';
        minutes.innerHTML = m + '\n<div class="tip">MINUTES</div>';
        seconds.innerHTML = s + '\n<div class="tip">SECONDS</div>';
        // 外圈计算
        // 总周长- (总周长 / 时分秒100%的对应数字 * 当前时分秒)   =   总周长 - 当前时间占比的的长度
        hh.style.strokeDashoffset = 440 - (440 / 24 * h);
        mm.style.strokeDashoffset = 440 - (440 / 60 * m);
        ss.style.strokeDashoffset = 440 - (440 / 60 * s);
    }, 1000);
</script>

</html>
相关推荐
晓得迷路了几秒前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆6 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆6 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
坤坤爱学习2.09 分钟前
求医十年,病因不明,ChatGPT:你看起来有基因突变
人工智能·ai·chatgpt·程序员·大模型·ai编程·大模型学
小磊哥er14 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子15 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
摆烂工程师18 分钟前
Claude Code 为什么突然火了?聊一下Claude Code 跟 Cursor 之间的区别
程序员·claude·cursor
江城开朗的豌豆20 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js