JavaScript Study

Javascript Study

HTML

<script src="http://www.datejs.com/build/date.js"></script>
<select id="options">
    <option value="second">Second</option>
    <option value="minute">Minute</option>
    <option value="hour">Hour</option>
    <option value="day">Day</option>
</select>
<div id="board"></div>

JavaScript

var time = new Date();
var timestamp = time.toString("hh:mm:ss");

function timeToHexColor() {
    var showlist = document.getElementById("board").innerHTML +=
        "#" + timestamp.split(":").join("") + "<br/>";
}

function Colors(interval) {
    this.interval = interval;
    switch (this.interval) {
        case 'second':
            x = setInterval(timeToHexColor, 1000);
            setTimeout(stopColors, 5000);
            break;
        case 'minute':
            x = setInterval(timeToHexColor, 60000);
            setTimeout(stopColors, 5000);
            break;
        case 'hour':
            x = setInterval(timeToHexColor, 60000 * 60);
            setTimeout(stopColors, 5000);
            break;
        case 'day':
            x = setInterval(timeToHexColor, 60000 * 1440);
            setTimeout(stopColors, 5000);
            break;
        default:
    }
}

function stopColors() {
    clearInterval(x);
}

function generateColors(interval) {
    var el = document.getElementById("options");
    el.addEventListener("click", function () {
        Colors(interval);
    })
    /*same result with onChange
     I even sent the JSFiddle settings per this link:
      http://bit.ly/1gev7zR*/
}

generateColors('second');