Question

我想制作一个用于更改进度条的Javascript。

<div class="progress-bg">
        <div class="progress-bar">
            <h3 class="raised">$30</h3>
        </div>

            <h3 class="goal">Goal:$45</h3>
    </div>

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }

.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;

我想在html中编辑提升量，进度条会自动调整。所以上升的类别除了类目标，因为显示的值是.66所以我需要将其更改为％并将其插入到html的样式部分。任何有关这方面的帮助都会很棒，因为我没有太多的Javascript工作。

Answer 1

您可以按如下方式使用HTML5进度条，它会自动计算并显示结果

[
    {
        "model": "myapp.setting",
        "pk": 1,
        "fields": {
            "key": "[SOME_PARAMETER_KEY]",
            "value": "[some value]",
            "description": "[some description]"
        }
    }
]

Answer 2

下面是jQuery脚本，可以帮助您设置它。您需要根据需要修改 currentProgress 号码：
var currentProgress = 40;

这里是jsFiddle：https://jsfiddle.net/GunWanderer/d9yeqsqx/1

不要忘记包含你的jQuery库和Bootstrap css和js。

CSS：

<style>
body {
padding: 10px;}

.progress-bar span {color:#fff;}

@-webkit-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-moz-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@-o-keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }
@keyframes progress-bar {
from { width: 0%; }
to { width: 10%; }


.progress-bar {
height: 50px;
border-radius: 10px;
float: left;
width: 10%;
}

</style>

HTML：

<div class="progress">
    <div id="myProgressBar" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
        <span id="currentProgress">$30</span>
    </div>
</div>      
<h3 id="goal" class="goal">Goal:$45</h3>

jQuery脚本：

<script>
$(document).ready(function() {
    //Modify your numbers here:
    var goal = 45;
    var currentProgress = 40;

    //Script:
    var percentage = currentProgress / goal * 100;
    $("#myProgressBar").css("width", percentage + '%');
    var status = '$' + currentProgress + ' (' + Math.round(percentage) + '%)';
    $("#currentProgress").html(status);
    $("#goal").html('Goal: $' + goal);
});
</script>

Answer 3

<强> HTML

<div class="progress">
    <div class="progress__bar"></div>
    <div class="progress__bar--progressed"></div>
</div>

<强> CSS

.progress {
    // Your custom modifications
    height: 10px;
    width: 100px;

    position: relative;
}
.progress .progress__bar {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    opacity: 0.7;

    background-color: #EEE;
}
.progress .progress__bar--progressed {
    height: 100%;
    width: 100%;

    position: absolute;
    top: 0;
    left: 0;

    background-color: green;
}

<强>的JavaScript

var yourWidth = "80%";
document.querySelector('.progress__bar--progressed').style.width = yourWidth;

改变进度条的大小？

3 个答案: