D3-Clock/clock.js at master · mdaxtman/D3-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
84
85
86
87
88
var timeFunc = function(array){

  var hour = new Date().getHours();
  hour < 1 ? hour = 12 : hour;
  hour > 12 ? hour = hour - 12 : hour;
  array[0] = hour;
  var minute = new Date().getMinutes();
  minute < 10 ? minute = "0" + minute : minute;
  array[1] = minute;
  var second = new Date().getSeconds();
  second < 10 ? second = "0" + second : second;
  array[2] = second
          //var time = hour + ":" + minute + ":" + second;
  return array;
        };

// var timeArray = timeFunc([]);
// var clock = d3.select("#parent").selectAll("div")
//   .data(timeArray)
//   .enter()
//   .append("div")
//   .attr("class", "time");

// clock.text(function(d){return d;});
// clock.style("width", function(d){
//   return d + "%";
// });


setInterval(function(){
  d3.selectAll(".time")
    .data([]).exit().remove();
  var updateTime = timeFunc([]);
  d3.select("#parent").selectAll("div")
  .data(updateTime)
  .enter()
  .append("div")
  .attr("class", "time")
  .attr("id", function(d,i){
    if(i === 0){
      return "hour";
    }
    if(i === 1){
      return "minute";
    }
    if(i === 2){
      return "second";
    }
  })
  .text(function(d){return d;})
  .style("width", function(d){
  return d + "%";});

  var sec = d3.select("div #second");
  var min = d3.select("div #minute");
  // var tick = sec.data()[0];
  // var tick = new Date().getSeconds();
  // tick < 10 ? tick = "0" + tick : tick;
  sec.style("background", "black");
  // sec.text(function(d){return tick;});
  if (sec.data()[0] === 59){
    min.style("background", "black");
    setTimeout(function(){
    min.style("background", "red");}, 250);
    min.transition()
    .duration(500)
    .style("width", function(d){
       return d + "px";
    }).transition()
      .duration(500)
      .style("width", function(d){
       return d + "%";
    });
  }
  sec.transition()
    .duration(1000)
    .style("width", function(d){
       return d + "px";
    });
  // sec.transition()
  //   .duration(1000)
  //   .style("height", "30px");
  setTimeout(function(){
    sec.style("background", "red");}, 50);

} , 1000);