beerbrewing.github.io/time.html at master · beerbrewing/beerbrewing.github.io · 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

<html>

<head>
  <style>
    @font-face {
      font-family: kevs;
      src: url(DejaVuSansMono.ttf);
    }

    body {
      background-color: black;
      color: white;
      overflow: hidden;

      font-family: "kevs";
      font-size: 58pt;
      font-weight: lighter;

      display: flex;
      height: 95%;
      width: 100%;
      text-align: left;
      text-indent: 10px;
    }

    div {

      display: inline-block;
      align-self: flex-end;		}
  </style>
</head>

<body>
<div id="dom-target" style="display: none;"></div>

<div>
  <div id="clock"></div>
</div>
</body>

<script>
  var div = null;
  var myData = null;
  var diff = 0;

  function updateTime()
  {
    timeObj = document.getElementById("clock");


    // if (!div) {
    //   div = document.getElementById("dom-target");
    //   myData = div.textContent;
    //   their = new Date(myData);
    //   now = new Date();
    //   diff = now - their;
    //   console.log("Time diff " + diff);
    // }

    now = new Date();
    now = new Date(now.valueOf() - diff);

    var hash = parseInt(window.location.hash.substr(1));
    if (hash > "") {
      offset = now.valueOf() - diff + hash;
      now = new Date(offset);
    }


    if ((now.getSeconds() % (60 * 60)) == 0)
      document.body.style.backgroundColor = "#900090";
    else if ((now.getSeconds() % 60) == 0)
      document.body.style.backgroundColor = "#009000";
    else if ((now.getSeconds() % 10) == 0)
      document.body.style.backgroundColor = "#900000";
    else if ((now.getSeconds() % 5) == 0)
      document.body.style.backgroundColor = "#000030";
    else
      document.body.style.backgroundColor = "black";
    const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
      "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"
    ];

    let milli = now.getMilliseconds().toString().slice(0,3);
    if (milli.length === 2) milli += "0";
    timeObj.innerText = ("0" + now.getDate()).slice(-2) + "-" + monthNames[now.getMonth()] + "-" +
            now.getFullYear() + " " + ("0" + now.getHours()).slice(-2)  + ":" + ("0" + now.getMinutes()).slice(-2) +
            ":" + ("0" + now.getSeconds()).slice(-2) + "." + milli;
  }

  setInterval(updateTime, 10);
</script>
</html>