Javascript 是否结合进度条将文本颜色更改为特定宽度？_Javascript_Jquery_Css_Bootstrap 4

Javascript 是否结合进度条将文本颜色更改为特定宽度？

javascript jquery css bootstrap-4

Javascript 是否结合进度条将文本颜色更改为特定宽度？,javascript,jquery,css,bootstrap-4,Javascript,Jquery,Css,Bootstrap 4,我有一个Bootstrap4网站，上面有下面的hmtl代码 <div class="container"> <div class="row"> <div class="col-md-6 mx-auto> <h2>Example heading text</h2> <h6>Example subheading text</h6>

我有一个Bootstrap4网站，上面有下面的hmtl代码

<div class="container">
    <div class="row">
        <div class="col-md-6 mx-auto>
            <h2>Example heading text</h2>
            <h6>Example subheading text</h6>
        </div>
    </div
</div>

默认情况下，-元素的颜色为黑色。现在我在计算一些背景中的东西，这取决于这篇文章。假设计算的结果是75%，我想将-元素中文本的颜色更改为红色，但不是整个文本-仅文本的宽度为整个文本宽度的75%。请参阅我添加的示例图片

在文本下面应该有一个进度条，所以在我的示例代码中，-und-元素之间。此栏应使用与上述文本相同的红色填充，并应使用该颜色填充至与示例75%中文本相同的宽度

如何使用Javascript或jQuery实现这一点？或者我可以使用css唯一的解决方案吗？但请记住，我的网站上有多个这样的部分，我必须这样做，每个条目都可能有其他的百分比值。这两个元素的颜色应该像滑块或线性效果一样

下面是一个示例图片，希望能更好地理解我想要什么。如果需要进一步的细节，请让我知道。

您可以从进度条中查询当前值，并将该值作为两个颜色停止的颜色停止值传递。有点像progressbar

根据您提供的代码，我在下面添加了一些示例代码

在本例中，我没有使用progressbar

相反，我使用了一个for循环和一个alert来说明这个想法是如何工作的。循环带来迭代，警报允许您停止并查看颜色进度

for循环中的迭代可以表示使用progressbar跟踪的流程，progressbar在任何给定时间都有一个值。通过将该值插入渐变，彩色文本将被更新

再说一遍，这只是一个想法

<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <style>
        .colorIt {
            display: inline-block;
            /*background-image: linear-gradient(to right, green 10%, black 10%);*/
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -moz-background-clip: text;
            background-clip: text;
        }

        h2 {
            font-size: 30px;
            font-weight: bold;
        }

    </style>
    <script>
        // create script to inc and dec the color-stops on the gradient

        $(document).ready(function () {
            adjustColorStops();
        });

        function adjustColorStops()  //x=color-stop start color, y=color-stop end color values
        {
            // create a script to set the color-stops of the gradient
            // this is for the purpose of covering the left (green) color across to the right, eliminating the black color eventially
            var i;
            for (i = 0; i < 110; i++)
            {
                alert(i);   // this is to slow things down so that you can see the increments of the color
                $(".colorIt").css("background-image", "linear-gradient(to right, green " + i + "%, black " + i + "%)");
                i += 9;
            }
            return;
        }
    </script>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col-md-6 mx-auto">
                <h2 class="colorIt">Example heading text</h2>
                <h6>Heading text is filled with a gradient.</h6>
                <!--<div class="progressBarDiv"></div>-->
            </div>
        </div>
    </div>


</body>
</html>

我只是有个疯狂的想法。如果你给文本一个渐变色，将停止点设置为进度条上的值，并保持pb隐藏，会怎么样？是的，这可能是一个想法，但文本和进度条都应该是可见的，同时我会测试它。