增加密码长度的进度条

时间:2014-04-01 12:56:02

标签: javascript switch-statement progress-bar

我正在尝试使用Javascript开关增加密码输入的最小字母文本进度条。这是我目前的尝试。

   var div = $('#progressbar>div');

        div.width(width);

        switch(password.Length)
        {
            case 1:
                div.css('width', '10%');
                break;
            case 2:
                div.css('width', '20%');
                break;
            case 3:
                div.css('width', '30%');
                break;
            case 4:
                div.css('width', '40%');
                break;
            case 5:
                div.css('width', '50%');
                break;
            case 6:
                div.css('width', '60%');
                break;
            case 7:
                div.css('width', '70%');
                break;
            case 8:
                div.css('width', '80%');
                break;
            case 9:
                div.css('width', '90%');
                break;
            case 10:
                div.css('width', '100%');
                break;

        }

        };

css如下

    #progressbar {
    margin-top: 10px;
    background-color: black;
    border-radius: 13px; /* (height of inner div) / 2 + padding */
    padding: 3px;
    }

    #progressbar > div {
    background-color: orange;
    width:0%;
    height: 10px;
    border-radius: 10px;
    }

我需要改变什么才能让它发挥作用?我尝试过其他一些事情但没有发生任何事情。仅供参考,这是在关键功能和内部功能上运行的。我是JavaScript新手所以请解释:)。我知道我正在正确地调用该函数,因为它的一些其他功能适用于不同的代码。

2 个答案:

答案 0 :(得分:3)

Javascript区分大小写,因此您无法使用password.Length。请改用password.length。而且我真的不知道div.width(width)做了什么。 这是一个工作示例(当然你需要修改一下,因为它可以超过100%宽度):  http://jsfiddle.net/74c7W/2/

答案 1 :(得分:1)

我从你的代码中注意到的一些事情:

div.width(width);

上面这行似乎是多余的,因为你要在switch语句中修改宽度。

password.Length指的是什么?一个jquery对象?很可能你没有打开你认为的价值 - 你可能需要更像password.val().length()

的东西