环形进度条-圆锥渐变

最新推荐文章于 2023-10-16 15:40:44 发布

酸霉汤

最新推荐文章于 2023-10-16 15:40:44 发布

阅读量88

点赞数

分类专栏： # CSS # JS 文章标签： html5 html javascript

本文链接：https://blog.csdn.net/iTaylorfan/article/details/120515899

版权

JS 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

关键：

圆锥渐变

window.getComputedStyle()

cssObj.getPropertyValue(“key”)

dom.style.setProperty(“key”,value)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            --x: 0%;
            border: 1px solid black;
            width: 200px;
            height: 200px;
            background-image: conic-gradient(red 0% var(--x), white var(--x) 100%);
            border-radius: 50%;
        }
        
        .small-box {
            background-color: white;
            width: 100%;
            height: 100%;
            transform: scale(0.9);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="small-box">
            <span id="show">0%</span>
        </div>
    </div>
</body>
<script>
    setInterval(() => {
            /**
             * @type{HTMLElement} 
             * */

            var box1 = document.querySelector(".box1");
            /**
             * @type{HTMLElement} 
             * */

            var show = document.querySelector("#show");
            var cssObj = window.getComputedStyle(box1);
            var x = cssObj.getPropertyValue("--x");
            x = parseInt(x); //去掉%
            x = x + 1;
            x = x > 100 ? 0 : x
            box1.style.setProperty("--x", x + "%"); //重新设置变量
            show.innerText = x + "%";
        }, 100)
        //获取变量x
</script>

</html>

酸霉汤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
环形进度条-圆锥渐变

关键：圆锥渐变window.getComputedStyle()cssObj.getPropertyValue(“key”)dom.style.setProperty(“key”,value)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&g.
复制链接

扫一扫