JavaScript Study

Javascript Study

by nysteve

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){
    document.getElementById("options").onclick = Colors(interval);
    /*same result with onChange
     I even sent the JSFiddle settings per this link:
      http://bit.ly/1gev7zR*/
}

generateColors('second');