Question

我搜索了很多关于这个并尝试了我自己的一些但我似乎无法使它工作。我想要实现的是每次按下按钮时增加10或减去10的进度条。

按下向上按钮的示例将10添加到进度条，当您按下向下按钮时，从栏中删除10。

Whatelse我想知道的是一个脚本，可以“读取”进度条的状态，并使用if或else函数显示段落中的文本

（如果＆gt; 50它' ll淡入文本，否则＆lt; 50它会淡化另一个文本）希望我能很好地解释自己并希望有人能帮助我。我还是jQuery / JavaScript的新手。

Answer 1

这是一个让你入门的小例子;这个脚本有很多功能，不要害怕尝试一下：

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <title>Progress Bar</title>
    <meta charset="utf-8" />
    <style>
        #progress {
            position:relative;
            width:25px;
            height:100px;
            border:2px solid #000;
            background-color:#ccc;
        }
        #progress div {
            position:absolute;
            bottom:0;
            height:0;
            width:25px;
            background-color:#f00;
        }
        span {
            margin:10px auto;
        }
    </style>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(function(){
            // Define your variables
            var interval=10;
            var half=50;
            var max=100;
            var texts=['Less then 50...','More then 50!'];
            var upButton=$('button[name="up"]');
            var downButton=$('button[name="down"]');
            var bar=$('#progress').find('div');
            upButton.on('click',function(){
                var height=bar.height();
                if(height>=0 && height<max) {
                    var newHeight=parseFloat(height+interval,10);
                    bar.css('height',newHeight);
                    $('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
                }
            });
            downButton.on('click',function(){
                var height=bar.height();
                if(height>0 && height<=max) {
                    var newHeight=parseFloat(height-interval,10);
                    bar.css('height',newHeight);
                    $('span').hide().text((newHeight<half) ? texts[0] : texts[1]).fadeIn();
                }
            });
        });
    </script>
</head>
<body>
    <h1>Progress Bar</h1>
    <p>
        <button name="up">Add</button> <button name="down">Remove</button>
    </p>
    <div id="progress">
        <div>&nbsp;</div>
    </div>
    <span></span>
</body>
</html>

Answer 2

jQuery UI有一个内置的进度条，你可以轻松地做你想做的事。

http://jqueryui.com/demos/progressbar/

以下是您尝试执行的操作的简单实现：

http://jsfiddle.net/makotosan/bW5Wd/3/

jQuery进度条和计数器

2 个答案: