jQuery 进度条和计数器答案

【问题标题】：jQuery Progress bar and counterjQuery 进度条和计数器
【发布时间】：2012-02-27 18:39:04
【问题描述】：

我对此进行了很多搜索并尝试了一些自己的方法，但我似乎无法使其工作。我试图实现的是一个进度条，每次按下按钮时都会增加 10 或减少 10。

例如，当您按下按钮 UP 时，您会将 10 添加到进度条，当您按下按钮时，您会从进度条中删除 10。

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

（如果 > 50 它会在一个文本中淡出，否则

【问题讨论】：

展示你失败的方法。另外，你想要一个依赖吗？例如jquery-ui。
是的 10% 抱歉，我还是个 JavaScript 新手……我可以很好地处理 CSS 和 HTML

标签： javascript jquery button progress-bar

【解决方案1】：

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

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

这是您尝试做的简单实现：

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

【讨论】：

这就是我想要的，但我想让文本/段落“单独”显示，而不是在 div 中粘贴文本，用 $('p .class') 并将其淡入。我想要几个按钮来添加或删除栏的点，最后一个按钮来运行“检查”和淡入所选段落。
修改了例子：jsfiddle.net/makotosan/bW5Wd/6这更接近你的想法吗？
是的！那很完美。非常感谢^^ 那会做的。我真的需要学习更好的 JavaScript，也许有人可以教我一点……我查看了编码并理解了它的作用和原因。我需要更好地学习所有命令、它们的作用和/或如何使用它们，所以我会在脚本方面做得更好
如果你在做Web开发，绝对应该学习JavaScript并使用jQuery等框架，他们是你的朋友。如果我对您有帮助，您可以 +1 我的回答吗？
我想要，但它说我需要 15 声望才能这样做女巫我没有......顺便说一句，无论如何都可以“动画”进度条，而不是立即上升动画流畅

【解决方案2】：

这里有一个小例子可以帮助您入门；这个脚本有很多功能，不要害怕尝试一下：

<!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>

【讨论】：

好的，这与我的想法非常相似，但也不同。我想做的是 jQuery 进度条，它们需要 UI 来显示。按钮向条形添加和删除 10。我想到的是一个问题，有不同的问题，每个问题有 3-4 个答案。每个答案添加或删除 10 点到 jQuery 栏，在最后一个问题（女巫是最后一组按钮）它运行一个脚本来“检查”栏状态，超过 50 会淡出在一个段落中，低于 50 会淡出在一个不同的一。我想制作 3 个不同的酒吧，在最后一个问题上它会运行“检查”