Javascript 在30秒内将宽度从100%更改为0%，并重复代码

我有计算30秒的代码，更改div的

backgroundOffset

，然后显示滚动数字（某种类型的头奖）。 如何在30秒内将进度条的宽度从100%更改为0？我目前的代码是：

function rand(min, max)
{
    min = parseInt( min, 10 );
    max = parseInt( max, 10 );

    if ( min > max ){
        var tmp = min;
        min = max;
        max = tmp;
    }

    return Math.floor( Math.random() * ( max - min + 1 ) + min );
}

var milisec = 0;
var seconds = 30;

document.getElementById("counter").innerHTML = '<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 100%"><span>Rolling in 30...</span></div>';

function roll() 
{
    if (milisec <= 0) 
    {
        milisec = 9;
        seconds -= 1;
    }
    if (seconds <= -1) 
    {
        milisec = 0;
        seconds += 1;
    }
    else
    {
        milisec -= 1;
        document.getElementById("counter").innerHTML = '<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: ' + seconds + '.' + milisec + '%"><span>Rolling in ' + seconds + '.' + milisec + '...</span></div>';
        setTimeout("roll()", 100);

    }
    if (seconds <= 0 && milisec <= 0) // time out
    {
        var x = 2;
        var y = 30;
        var z = Math.floor((Math.random() * 4096)); // background offset
        var rolledNumber = rand(0, 14);  // number

        var clr = setInterval(function()
        {
            if(x >= z) x = 1;

            document.getElementById("slide").style.backgroundPosition = x+"px 0px";

            x+=y;
            y-=0.1;

            if (y<=0) 
            { 
                clearInterval(clr); 

                // 1, 14, 2, 13, 3, 12, 4, 0, 11, 5, 10, 6, 9, 7, 8
                // 2
                if (x >= 410 && x <= 485){var rolledNumber = 1;}
                if (x >= 335 && x <= 410){var rolledNumber = 14;}
                if (x >= 260 && x <= 335){var rolledNumber = 2;}
                if (x >= 185 && x <= 260){var rolledNumber = 13;}
                if (x >= 110 && x <= 185){var rolledNumber = 3;}
                if (x >= 35 && x <= 110){var rolledNumber = 12;}
                if (x >= -40 && x <= 35){var rolledNumber = 4;}
                if (x >= 1010 && x <= 1085){var rolledNumber = 0;}
                if (x >= 935 && x <= 1010){var rolledNumber = 11;}
                if (x >= 860 && x <= 935){var rolledNumber = 5;}
                if (x >= 785 && x <= 860){var rolledNumber = 10;}
                if (x >= 710 && x <= 785){var rolledNumber = 6;}
                if (x >= 635 && x <= 710){var rolledNumber = 9;}
                if (x >= 560 && x <= 635){var rolledNumber = 7;}
                if (x >= 485 && x <= 560){var rolledNumber = 8;}

                // 2
                if (x >= 1535 && x <= 1610){var rolledNumber = 1;}
                if (x >= 1460 && x <= 1535){var rolledNumber = 14;}
                if (x >= 1385 && x <= 1460){var rolledNumber = 2;}
                if (x >= 1310 && x <= 1385){var rolledNumber = 13;}
                if (x >= 1235 && x <= 1310){var rolledNumber = 3;}
                if (x >= 1160 && x <= 1235){var rolledNumber = 12;}
                if (x >= 1085 && x <= 1160){var rolledNumber = 4;}
                if (x >= 1010 && x <= 1085){var rolledNumber = 0;}
                if (x >= 935 && x <= 1010){var rolledNumber = 11;}
                if (x >= 860 && x <= 935){var rolledNumber = 5;}
                if (x >= 785 && x <= 860){var rolledNumber = 10;}
                if (x >= 710 && x <= 785){var rolledNumber = 6;}
                if (x >= 635 && x <= 710){var rolledNumber = 9;}
                if (x >= 560 && x <= 635){var rolledNumber = 7;}
                if (x >= 485 && x <= 560){var rolledNumber = 8;}

                // 3
                if (x >= 2660 && x <= 2735){var rolledNumber = 1;}
                if (x >= 2585 && x <= 2660){var rolledNumber = 14;}
                if (x >= 2510 && x <= 2585){var rolledNumber = 2;}
                if (x >= 2435 && x <= 2510){var rolledNumber = 13;}
                if (x >= 2360 && x <= 2435){var rolledNumber = 3;}
                if (x >= 2285 && x <= 2360){var rolledNumber = 12;}
                if (x >= 2210 && x <= 2285){var rolledNumber = 4;}
                if (x >= 2135 && x <= 2210){var rolledNumber = 0;}
                if (x >= 2060 && x <= 2135){var rolledNumber = 11;}
                if (x >= 1985 && x <= 2060){var rolledNumber = 5;}
                if (x >= 1910 && x <= 1985){var rolledNumber = 10;}
                if (x >= 1835 && x <= 1910){var rolledNumber = 6;}
                if (x >= 1760 && x <= 1835){var rolledNumber = 9;}
                if (x >= 1685 && x <= 1760){var rolledNumber = 7;}
                if (x >= 1610 && x <= 1685){var rolledNumber = 8;}

                var r = rolledNumber;

                // show rolled number
                setTimeout(function(){document.getElementById("counter").innerHTML = '<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 0%"><span>Rolled number is ' + r + '!</span></div>';}, 250);

                // reset
                setTimeout(function(){document.getElementById("counter").innerHTML = '<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 100%"><span>Rolling in 30...</span></div>';}, 3000);
            }
        }
        ,10);

        document.getElementById("counter").innerHTML = '<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 0%"><span>*** ROLLING ***</span></div>';
    }
}

我想先将它添加到

else

中的

roll（）

函数中。 第二个问题是，如何重置它？当我第二次调用函数时，它只滚动，我尝试将函数末尾的“秒”和“毫秒”设置为第一个值，但它没有按我想要的方式工作。
（由于某些原因，我在JSFIDLE上的代码无法正常工作，因此下面是图片-

---

如果有人能帮我优化这段代码，请发到这里，谢谢。^）

注意：您可能多次声明rolledNumber是的，我刚刚注意到，它有时会在“rolledNumber是…”中更改。我怎样才能防止它？你能提供上面的

html

&

css

吗？

<div class="progress text-center" id="counter">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="30" style="width: 100%"></div>
</div>

<div id="slide">
    <div id="pointer"></div>
</div>

#slide
{
    background-image: url('http://i.imgur.com/KMFS6HF.png');
    width: 70% !important;
    min-height: 75px;
    height: 75px;
    margin-left: 15%;
    margin-right: 15%;
    border-radius: 3px;
    background-position: 0px 75px;
}

#pointer
{
    width: 3px;
    background: yellow none repeat scroll 0% 0%;
    position: absolute;
    left: 50%;
    top: 0px;
    height: 75px;
}