Practice

by nwellcome

HTML

<html>
    <head></head>
    <body>
        <div id="wrap">
            <div id="num">1</div>
            <div id="timer"></div>
        </div>
    </body>
</html>

CSS

body {
    text-align:center;   
}
#wrap {
    width: 500px;
    margin: 0 auto;
    border: 1px solid black;
    text-align: center;
}
#num {
    font-size: 250px;
    margin: 0 auto;
}
#timer {
    background-color: green;
    height: 25px;
    width 500px; 
}

JavaScript

function pattern() {
    var number = "";
    var i = 4;
    do {
        number += Math.floor(Math.random() * 4) + 1;
    } while (--i);
    $("#num").fadeOut("fast", function() {
        $(this).html(number).fadeIn("fast");
    });
    $("#timer").css("width",1);
    $("#timer").animate({
        width: 500
    }, 12000, 'linear', pattern);
}

$(document).ready(function() {
    pattern();
});