0

我有一个 HTML 表，我正在尝试添加一个进度条：这里有一个块进度条http://www.telerik.com/aspnet-mvc/progressbar 我正在从存储为数字的存储过程中获取数据，需要将其显示为进度条。

有人可以指出我正确的方向。我已经被困在这个任务上很长一段时间了。到目前为止，这是我的代码。

代码：

<script>
    $(document).ready(function () {

        var pb = $("#profileCompleteness").kendoProgressBar({
            type: "chunk",
            chunkCount: 36,
            min: 0,
            max: 36,
            value: 4
        })
            $(function() {
            var pb = $("#profileCompleteness").data("kendoProgressBar");
            $(this).find(".progress").kendoProgressBar({value: item.percentage})

        });
    })
</script>

在 HTML 表格内：

@foreach (var item in Model)
        {
            <td align="center">
                    <div id="profileCompleteness"></div>

                 @Html.DisplayFor(modelItem => item.Percentage)
                 @Html.DisplayFor(modelItem => item.ProfileCompleteness)

                </td>
}

我想从数据库中获取等效的输出百分比，目前我已将百分比值硬编码为上面的 4。我非常感谢您提前提供的帮助。

谢谢

4

1 回答 1

1 

setInterval(function() {
  var randomWidth = 200*Math.random() + "px";
  document.getElementById("progress").style.width = randomWidth;}, 1000);
#progress-bar {
  width: 200px;
  height: 10px;
  background-color: black;
  position: absolute;
  
  top: 0px;
  left: 0px;
  z-index -1;
  }

#progress {
  width: 40px;
  height: 10px;
  background-color: red;
  position: absolute;
  top:0px;
  left:0px;
  z-index:7;
 }
<div>
  <div id="progress-bar"> </div>
  <div id="progress"> </div>
</div>

于 2016-12-14T04:58:51.073 回答