BinaryClock/script.js at master · Penagwin/BinaryClock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

$(document).ready(function () {
    var i, numberOfElements, timesindex = [], timesvalues = [], offset = 0, title = "", secondsfirst, d;
    var debug = false;

    function setTime(name, time, size){
        if(typeof(size)==='undefined') size = 2;
        init(name, size);

        if(timesindex.indexOf(name) == -1){
            timesindex.push(name);
            return;
        }else if(timesvalues[timesindex.indexOf(name)] != time){
            timesvalues[timesindex.indexOf(name)] = time;
        }else return;


        title = "";
        for(var k = 0; k < size; k++){
            if(String(time).split("").length != size)
            secondsfirst = String(time).split("")[size-String(time).split("").length-k];
            else
             secondsfirst = String(time).split("")[k];

            secondsfirst = (parseInt(secondsfirst, 10).toString(2));
            title += "(" + secondsfirst + ")," ;

            secondsfirst = secondsfirst.split("");
            secondsfirst.reverse();

            for(var i1; i1 < size +1- secondsfirst.length; i1++){
                secondsfirst.splice(0,0, "0".split(""));
            }

            for (i = 0; i < 4; i++) {
                   var $object = $("#"+name+ "-"+ k + "-"+ (3-i));
                 if(secondsfirst[i]=="1"){
                     $object.velocity("transition.bounceIn");
                     $object.css("background-color", "#00FF2F");
                 }else{
                     $object.css("background-color", "#333333");
                 }
             }
        }
        if(debug){
            $('.debug .'+name).html("");
            $('.debug .'+name).append(name.capitalize() + ": " + time + " || " + title +"<br>");
        }
        return time;
    }

    function init(name, size){
        if(typeof(size)==='undefined') size = 2;
        if(document.getElementById(name) !== null){
            return false;
        }else{
            $(".clock").append("<div id='"+name+"' ></div");
            var width = 100/(numberOfElements);
            var labelset = 0;
            for(var k = 0; k < size; k++){
                for(i = 0; i < 4; i++){
                    $("#" + name).append("<div class='"+name+" time' id='" + name + "-" + k + "-" + i + "' ></div>");
                    $("#" + name + "-"+ k + "-" + i).css("top", String(i * 25+width/3) + "%");
                    $("#" + name + "-"+ k + "-"+ i).css("left", (width * offset + width / 5.5) + "%");
                    $("#"+ name + "-"+ k + "-"+ i).css("width", (width/1.5 + "%"));

                }
                offset++;
                labelset++;
            }
           // $(".labels").append("<div class='label label"+name+"'>"+name.capitalize()+"</div>");
           // $(".label" + name).css("left", (width * (offset-labelset) + labelset/2*width/1.5 + width / 5.5 ) + "%");

            $(".debug").append("<div class='"+name+"'></div>");
        }
        return true;
    }

    function loop(){
        d = new Date();
        numberOfElements = 9;

        setTime("hour", d.getHours());
        setTime("minutes", d.getMinutes());
        setTime("seconds", d.getSeconds());
        setTime("milliseconds", d.getMilliseconds(), 3);

        title = "";
        setTimeout(function(){loop()}, 1);
    }

    loop();
});

String.prototype.capitalize = function() {
    return this.charAt(0).toUpperCase() + this.slice(1);
};