动画jQuery Progressbar插件

最新推荐文章于 2024-07-29 03:39:25 发布

cuketao5066

最新推荐文章于 2024-07-29 03:39:25 发布

阅读量289

点赞数

文章标签： html js css jquery javascript ViewUI

原文链接：https://www.script-tutorials.com/animated-jquery-progressbar/

版权

Animated jQuery progressbar. Today we will back to back to jQuery tutorials. Today we will make dynamic animated progressbar. I think you already know this jQuery widget – Progressbar. By default – this is static widget without any animation. Today we will expand possibilities of that plugin – we will make it – dynamic. And also will wrap our result as a new jQuery plugin.

动画jQuery progressbar。今天，我们将回到jQuery教程。今天，我们将制作动态的动画进度栏。我想您已经知道这个jQuery小部件– Progressbar 。默认情况下–这是没有任何动画的静态窗口小部件。今天，我们将扩展该插件的可能性-我们将使其动态。并且还将我们的结果包装为新的jQuery插件。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are all html of my demo

这是我的演示的全部html

index.html (index.html)


<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Animated jQuery progressbar | Script tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="https://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3>
        <div id="progress1">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
        <hr />
        <div id="progress2">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
        <hr />
        <div id="progress3">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
    </div>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
<link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<title>Animated jQuery progressbar | Script tutorials</title>
</head>
<body>
    <div class="example">
        <h3><a href="https://www.script-tutorials.com/animated-jquery-progressbar/">Animated jQuery progressbar | Script Tutorials</a></h3>
        <div id="progress1">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
        <hr />
        <div id="progress2">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
        <hr />
        <div id="progress3">
            <div class="percent"></div>
            <div class="pbar"></div>
            <div class="elapsed"></div>
        </div>
    </div>
</body>
</html>

As you can see – I prepared 3 progressbars. Each progressbar will have own behaviour (using own properties).

如您所见–我准备了3个进度条。每个进度条都有自己的行为(使用自己的属性)。

Also, make attention to linked jQuery libraries and styles. How I prepared this? Very easy, goto here, select UI Core and single widget – Progressbar, then – just Download result. You will get package with all necessary libraries (jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css + related images).

另外，请注意链接的jQuery库和样式。我是如何准备的？非常简单，转到此处，选择UI Core和单个小部件– Progressbar，然后–仅下载结果。您将获得包含所有必需库的软件包(jquery-1.6.2.min.js + jquery-ui-1.8.16.custom.min.js + jquery-ui-1.8.16.custom.css +相关图像)。

步骤2. CSS (Step 2. CSS)

Here are our CSS styles.

这是我们CSS样式。

css / main.css (css/main.css)


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}
.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}


body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0}
.example{background:#FFF;width:650px;font-size:80%;border:1px #000 solid;margin:20px auto;padding:15px;position:relative;-moz-border-radius: 3px;-webkit-border-radius: 3px}
h3 {text-align:center}
.pbar .ui-progressbar-value {display:block !important}
.pbar {overflow: hidden}
.percent {position:relative;text-align: right;}
.elapsed {position:relative;text-align: right;}

步骤3. JS (Step 3. JS)

In this JS we will write expanded plugin for jQuery with our new progressbar.

在此JS中，我们将使用新的progressbar为jQuery编写扩展插件。

js / script.js (js/script.js)


$(document).ready(function(){
    jQuery.fn.anim_progressbar = function (aOptions) {
        // def values
        var iCms = 1000;
        var iMms = 60 * iCms;
        var iHms = 3600 * iCms;
        var iDms = 24 * 3600 * iCms;
        // def options
        var aDefOpts = {
            start: new Date(), // now
            finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec
            interval: 100
        }
        var aOpts = jQuery.extend(aDefOpts, aOptions);
        var vPb = this;
        // each progress bar
        return this.each(
            function() {
                var iDuration = aOpts.finish - aOpts.start;
                // calling original progressbar
                $(vPb).children('.pbar').progressbar();
                // looping process
                var vInterval = setInterval(
                    function(){
                        var iLeftMs = aOpts.finish - new Date(); // left time in MS
                        var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
                            iDays = parseInt(iLeftMs / iDms), // elapsed days
                            iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
                            iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
                            iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
                            iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
                        // display current positions and progress
                        $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
                        $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
                        $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
                        // in case of Finish
                        if (iPerc >= 100) {
                            clearInterval(vInterval);
                            $(vPb).children('.percent').html('<b>100%</b>');
                            $(vPb).children('.elapsed').html('Finished');
                        }
                    } ,aOpts.interval
                );
            }
        );
    }
    // default mode
    $('#progress1').anim_progressbar();
    // from second #5 till 15
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
    var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
    // we will just set interval of updating to 1 sec
    $('#progress3').anim_progressbar({interval: 1000});
});


$(document).ready(function(){
    jQuery.fn.anim_progressbar = function (aOptions) {
        // def values
        var iCms = 1000;
        var iMms = 60 * iCms;
        var iHms = 3600 * iCms;
        var iDms = 24 * 3600 * iCms;
        // def options
        var aDefOpts = {
            start: new Date(), // now
            finish: new Date().setTime(new Date().getTime() + 60 * iCms), // now + 60 sec
            interval: 100
        }
        var aOpts = jQuery.extend(aDefOpts, aOptions);
        var vPb = this;
        // each progress bar
        return this.each(
            function() {
                var iDuration = aOpts.finish - aOpts.start;
                // calling original progressbar
                $(vPb).children('.pbar').progressbar();
                // looping process
                var vInterval = setInterval(
                    function(){
                        var iLeftMs = aOpts.finish - new Date(); // left time in MS
                        var iElapsedMs = new Date() - aOpts.start, // elapsed time in MS
                            iDays = parseInt(iLeftMs / iDms), // elapsed days
                            iHours = parseInt((iLeftMs - (iDays * iDms)) / iHms), // elapsed hours
                            iMin = parseInt((iLeftMs - (iDays * iDms) - (iHours * iHms)) / iMms), // elapsed minutes
                            iSec = parseInt((iLeftMs - (iDays * iDms) - (iMin * iMms) - (iHours * iHms)) / iCms), // elapsed seconds
                            iPerc = (iElapsedMs > 0) ? iElapsedMs / iDuration * 100 : 0; // percentages
                        // display current positions and progress
                        $(vPb).children('.percent').html('<b>'+iPerc.toFixed(1)+'%</b>');
                        $(vPb).children('.elapsed').html(iDays+' days '+iHours+'h:'+iMin+'m:'+iSec+'s</b>');
                        $(vPb).children('.pbar').children('.ui-progressbar-value').css('width', iPerc+'%');
                        // in case of Finish
                        if (iPerc >= 100) {
                            clearInterval(vInterval);
                            $(vPb).children('.percent').html('<b>100%</b>');
                            $(vPb).children('.elapsed').html('Finished');
                        }
                    } ,aOpts.interval
                );
            }
        );
    }
    // default mode
    $('#progress1').anim_progressbar();
    // from second #5 till 15
    var iNow = new Date().setTime(new Date().getTime() + 5 * 1000); // now plus 5 secs
    var iEnd = new Date().setTime(new Date().getTime() + 15 * 1000); // now plus 15 secs
    $('#progress2').anim_progressbar({start: iNow, finish: iEnd, interval: 100});
    // we will just set interval of updating to 1 sec
    $('#progress3').anim_progressbar({interval: 1000});
});

In first half you can see our new jQuery plugin – anim_progressbar, in second – several examples of initializations with different params. We will pass to constructor next params: start (date of starting), finish (date of finishing) and interval (interval of updating progressbar). Pretty universal, isn’t it? So you can set here not only different time, but even different days (dates) :)

在上半部分中，您可以看到我们的新jQuery插件– anim_progressbar，在第二部分中–几个使用不同参数进行初始化的示例。我们将传递给构造函数的下一个参数：开始(开始日期)，完成(结束日期)和间隔(更新进度条的间隔)。很普遍，不是吗？因此，您不仅可以在这里设置不同的时间，甚至可以在不同的日期(日期)进行设置：)

现场演示

结论 (Conclusion)

Not bad, isn`t it? Today’s lesson shows us how we can create dynamic progressbar. Not only that – we can have some progressbars on the same page, sometimes it is useful. Good luck our readers!

还不错，不是吗？今天的课程向我们展示了如何创建动态进度条。不仅如此-我们可以在同一页面上有一些进度条，有时它很有用。祝读者们好运！