js 0-100进度彩色指标

最新推荐文章于 2022-05-27 22:32:37 发布

A_Qyp

最新推荐文章于 2022-05-27 22:32:37 发布

阅读量204

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qyp_1/article/details/117739747

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

前言

这个功能是在开发终于到的一个小组件,因为这个项目就是原生h5的项目,也没再多做些什么,我感觉挺好用的,大家应该也遇到过,我把它兼容了一下,开始数和结尾数都是可以自己变化的,非常的方便,直接上图了

上图

在这里插入图片描述
这个就是一个静态的展示图,不是滑块,主要这个东西的就是它的兼容,开始和结尾都是可变的,直接上代码,代码的话应该还有可以优化的地方,后期会封装一下的,上代码

上代码

<!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>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        
        .container {
            width: 500px;
            height: 30px;
            margin: 100px auto;
            border-radius: 30px;
            position: relative;
        }
        
        .container::before {
            content: "0";
            position: absolute;
            left: -20px;
            top: 0;
        }
        
        .container::after {
            content: "100";
            position: absolute;
            right: -30px;
            top: 0;
        }
        
        .item {
            width: 20%;
            float: left;
            height: 30px;
        }
        
        #num {
            position: absolute;
            left: 0;
            bottom: -40px;
        }
        
        #num i {
            display: inline-block;
            border: 10px solid transparent;
            border-bottom: 10px solid red;
            position: absolute;
            top: -20px;
            left: 50%;
            transform: translate(-50%, 0);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item" style="background: red;"></div>
        <div class="item" style="background: blue;"></div>
        <div class="item" style="background: green;"></div>
        <div class="item" style="background: yellow;"></div>
        <div class="item" style="background: orangered;"></div>
        <div id="num"><i></i> <span>50</span> </div>
    </div>
    <script>
        var start = 0; //开始项
        var end = 100; //结束项
        var numShu = document.querySelector('#num span')
        var numI = document.querySelector('#num i')
        var num = document.querySelector('#num')
        var container = document.querySelectorAll('.container .item')
        var containerOne = document.querySelector('.container')
        num.style.transform = `translate(-${num.offsetWidth/2}px, 0)`
        num.style.left = (numShu.innerHTML - start) / (end - start) * containerOne.offsetWidth + 'px'
        var color = ''
        for (var i = 0; i < container.length; i++) {
            if ((numShu.innerHTML - start) / ((end - start) / 5) > i && (numShu.innerHTML - start) / ((end - start) /
                    5) <= i + 1) {
                color = container[i].style.background
                numShu.style.color = color
                numI.style.borderBottomColor = color
            }
        }
    </script>
</body>

</html>

结语

有哪一步看不懂的,可以直接评论或者私信我也可以
希望对你有所帮助

A_Qyp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 0-100进度彩色指标

前言这个功能是在开发终于到的一个小组件,因为这个项目就是原生h5的项目,也没再多做些什么,我感觉挺好用的,大家应该也遇到过,我把它兼容了一下,开始数和结尾数都是可以自己变化的,非常的方便,直接上图了上图这个就是一个静态的展示图,不是滑块,主要这个东西的就是它的兼容,开始和结尾都是可变的,直接上代码,代码的话应该还有可以优化的地方,后期会封装一下的,上代码上代码<!DOCTYPE html><html lang="en"><head> <me
复制链接

扫一扫