Clock/index.js at main · ishaanSh06/Clock · 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
(function () {
    var months = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
      ],
      days = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
      ];

    function getTime() {
      var date = new Date(),
        second = date.getSeconds(),
        minute = date.getMinutes(),
        hour = date.getHours(),
        time = date.toLocaleString("en-US", {
          hour: "numeric",
          minute: "numeric",
          hour12: true,
        }),
        day = date.getDay(),
        month = date.getMonth(),
        date = date.getDate() + " . " + months[month],
        ds = second * -6,
        dm = minute * -6,
        dh = hour * -30;

      $(".second").css("transform", "rotate(" + ds + "deg)");
      $(".minute").css("transform", "rotate(" + dm + "deg)");
      $(".hour").css("transform", "rotate(" + dh + "deg)");

      $(".time").text(time);
      $(".day").text(days[day]);
      $(".date").text(date);
    }

    function dailer(selector, size) {
      for (var s = 0; s < 60; s++) {
        $(selector).append(
          '<span style="transform: rotate(' +
            6 * s +
            "deg) translateX(" +
            size +
            'px)">' +
            s +
            "</span>"
        );
      }
    }

    dailer(".second", 195);
    dailer(".minute", 145);
    dailer(".dail", 230);

    for (var s = 1; s < 13; s++) {
      $(".hour").append(
        '<span style="transform: rotate(' +
          30 * s +
          'deg) translateX(100px)">' +
          s +
          "</span>"
      );
    }

    setInterval(getTime, 1000);
    getTime();
  })();