Question

我想知道我怎么能把它作为一个简单的代码，我发现在一个网站我想用于一个网站正在努力，事情是我想把它放在我的网站（一个非常简单的）但我不能让它工作。有谁知道我怎么能做一个简单的代码？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>eBay PayPal</title>
<style type="text/css">
*{margin:0; padding:0;}
body{background:#FFFFFF url(images/1.jpg) top left no-repeat; width:1099px; height:1050px;}
</style>
<script src="http://jquery-ui.googlecode.com/svn/tags/1.7.2/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" type="text/javascript"></script>



<script type="text/javascript">
$(document).ready(function(){
    var p=0;
    $("#myProgressBar").progressbar({value:0});
        var timer = setInterval(function(){
            //This animates the bar
            $("#myProgressBar .ui-progressbar-value").animate({width: p+"%"},500);
            //This does static sets of the value
            //$("#myProgressBar").progressbar("option","value",p);
            p = p +33.33;
            if(p>33.33){
                $("#myProgressBar .ui-progressbar-value").animate({width: "33.33%"}, 500);
                //$("#myProgressBar").progressbar("option","value",100);
                clearInterval(timer);
            }
    },500);
});
</script>

</head>

<body>
<a href="2.html" style="width:185px; height:31px;position:absolute; left: 198px; top: 516px;"></a>
<div id='myProgressBar' style="position:absolute; border:1px red solid; height:41px; width:950px; left: 69px; top: 608px;"></div>
</body>
</html>`

我想知道是否有人可以帮助我，基本上我只想要一个带有进度条的页面。 CA

Answer 1

这可能有所帮助：

http://docs.jquery.com/UI/Progressbar

其中有代码示例，可以轻松地让您创建进度条。

Answer 2

我已经改进了已经开发的progressbar概念，它只是基于jquery和CSS。请查看以下链接以获取其详细信息：

http://progressbar-simple.blogspot.com/

希望有所帮助。

Answer 3

对于要使用 Bootstrap 4 的用户可以使用：

var delay = 500;
$(".progress-bar").each(function(i) {
  $(this).delay(delay * i).animate({
    width: $(this).attr('aria-valuenow') + '%'
  }, delay);

  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: delay,
    // easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now) + '%');
    }
  });
});

.progress {
  margin-bottom: 20px;
}

.progress-bar {
  width: 0;
}

.progress .progress-bar {
  transition: unset;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Bootstrap 4 Progress Bars</h2>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100">70</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated bg-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50</div>
  </div>
  <div class="progress border">
    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">90</div>
  </div>
</div>

Answer 4

必需的JS / CSS

CSS：-
1.bootstrap.min.css
2.jquery-ui.min.css

JS：-
1.jquery-3.3.1.js
2.bootstrap.min.js
3.jquery-ui-1.12.1.min.js

下面是附加CSS和JS文件的顺序

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />


<script src="~/Scripts/jquery-3.3.1.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>

CSS

.ui-progressbar .ui-progressbar-overlay {
    background: none !important;
}

.ui-widget.ui-widget-content {
}

.ui-progressbar {
    position: relative;
    color: #362878;
    width: 100%;
    height: 25px;
    background-color: #778899;
    margin-left: auto;
    margin-right: auto;
}

.progress-label {
    color: white;
    position: absolute;
    left: 50%;
    top: 0px;
    /* font-weight: bold; */
    /* text-shadow: 1px 1px 0 #fff; */
    margin-left: -40px;
}

.ui-widget-header {
    border: 1px solid #E8D1CF;
    font-weight: bold;
    margin-left: -40px;
    background-color: lightslategrey;
}

HTML

<div class="row">
<div class="form-group col-sm-6">
    <label>Job Title</label>
    <input type="text" class="form-control progInput" data-pbVal="25">
</div>

<div class="form-group col-sm-6">
    <label>First Name</label>
    <input type="text" class="form-control progInput" data-pbVal="25">
</div>

<div class="form-group col-sm-6">
    <label>Last Name</label>
    <input type="text" class="form-control progInput" data-pbVal="25">
</div>

<div class="form-group col-sm-6">
    <label>Email</label>
    <input type="text" class="form-control progInput" data-pbVal="25">
</div>

JavaScript / JQuery

<script>
    var progressbar = $("#progressbar"),
        progressLabel = $(".progress-label");

    progressbar.progressbar({
        value: false,
        change: function () {
            progressLabel.text(progressbar.progressbar("value") + "%");
        },
        complete: function () {
            progressLabel.text("100%");
        }
    });

    function progress(value) {
        var val = progressbar.progressbar("value") || 0;
        progressbar.progressbar("value", parseInt(value));
        switch (parseInt(value)) {
            case 0:
                $('.ui-widget-header').css('background-color', '#778899');
                break;
            case 25:
                $('.ui-widget-header').css('background-color', 'red');
                break;
            case 50:
                $('.ui-widget-header').css('background-color', 'orange');
                break;
            case 75:
                $('.ui-widget-header').css('background-color', '#bfff80');
                break;
            case 100:
                $('.ui-widget-header').css('background-color', '#408000');
                break;
            default:
                $('.ui-widget-header').css('background-color', '#778899');
        }

    }

    $(".progInput").change(function () {
        var pbVal = 0;
        $(".progInput").each(function (index) {
            if ($(this).val().length > 0) {
                pbVal += parseInt($(this).attr('data-pbVal'));
            }
            if (pbVal > 0) {
                progress(pbVal)
            }
            else {
                progress(0);
            }
        });
        return false;
    });
</script>

这里是输出

如何使用jquery创建进度条？

4 个答案: