显示数据库的进度条 [英] showing progress bar from database

问题描述

我有复选框，用户可以在其中选择一些复选框。数据来自数据库。例如，有10个复选框，用户选择4个复选框 - 因此填写了40％。但是如何在进度条中显示。



我有这个：



css：

Hi,

I have checkboxes where a user can select some checkboxes. the data is from a database. for example there are 10 checkboxes and a user select 4 checkboxes - so that is 40% is filled in. But how to show that in a progress bar.

I have this:

css:

.default {
    background: #292929;
    border: 1px solid #111;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 5px #333;
}
.default div {
    background-color: #1a82f7;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0099FF), to(#1a82f7));
    background: -webkit-linear-gradient(top, #0099FF, #1a82f7);
    background: -moz-linear-gradient(top, #0099FF, #1a82f7);
    background: -ms-linear-gradient(top, #0099FF, #1a82f7);
    background: -o-linear-gradient(top, #0099FF, #1a82f7);
}

< br $>




和jquery：

and jquery:

function progressBar(percent, $element) {
    var progressBarWidth = percent * $element.width() / 100;
    $element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "% ");
}

然后在cshtml文件中：

and then in the cshtml file:

$(document).ready(function () {
           progressBar(50, $('#progressBar'));

       });

但你可以看到它是硬编码的（它总是显示50％）。但是如何让它动态地响应数据库的值。



谢谢!!

but you can see that is hardcoded(it shows always 50%). but so how to make it dynamic that it response on the values of the database.

Thank you!!

推荐答案

元素）{
var progressBarWidth = percent *

element) { var progressBarWidth = percent *

element.width（）/ 100 ;

element.width() / 100;

element.find（' div'）。animate（{width：progressBarWidth}， 500 ）。html（percent + ％& nbsp;）;
}

element.find('div').animate({ width: progressBarWidth }, 500).html(percent + "%&nbsp;"); }

然后在cshtml文件中：

and then in the cshtml file:

这篇关于显示数据库的进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！