Knxweb2_digital_clock

Digital Clock in KnxWeb2

An example of a simple Digital Clock in Knxweb2 with only a Widget Html

we have only to copy/paste the html code here in a HTML widget :

<div id="countdownHolder" class="countdownHolder">
  <span class="countHours">
    <span class="position">
      <span class="digit1 static" style="top: 0px; opacity: 1;"></span>
    </span>
    <span class="position">
      <span class="digit0 static" style="top: 0px; opacity: 1;"></span>
    </span>
  </span>
  <span id="countDiv1" class="countDiv countDiv1">
  </span>
  <span class="countMinutes">
    <span class="position">
      <span class="digit1 static" style="top: 0px; opacity: 1;"></span>
    </span>
    <span class="position">
      <span class="digit0 static" style="top: 0px; opacity: 1;"></span>
    </span>
  </span>
  <span id="countDiv2" class="countDiv countDiv2">
  </span>
  <span class="countSeconds">
    <span class="position">
      <span class="digit1 static" style="top: 0px; opacity: 1;">0
      </span>
    </span>
    <span class="position">
      <span class="digit0 static" style="top: 0px; opacity: 1;">1
      </span>
    </span>
  </span>
</div>

<style>

.countdownHolder {
  font: 40px/1.5 'Open Sans Condensed',sans-serif;
  letter-spacing: -3px;
  margin: 0 auto;
  text-align: center;
  width: 350px;
}
.position {
  font-size: 40px;
  display: inline-block;
  height: 1.6em;
  overflow: hidden;
  position: relative;
  width: 1.05em;
}
.digit1, .digit0 {
  font-size: 40px;
  position:absolute;
  display:block;
  width:1em;
  background-color:#444;
  border-radius:0.2em;
  text-align:center;
  /* couleur des chiffres */
  color:#fff;
  letter-spacing:-1px;
}
.digit1.static, .digit0.static {
  box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
  background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);

  background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0.5, #3A3A3A),
      color-stop(0.5, #444444)
  );
}
.countDiv {
  font-size: 40px;
  display: inline-block;
  height: 1.6em;
  position: relative;
  width: 16px;
}
.countDiv:before, .countDiv:after {
  background-color: #444444;
  border-radius: 50% 50% 50% 50%;
  box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.5);
  content: "";
  height: 5px;
  left: 50%;
  margin-left: -3px;
  position: absolute;
  top: 0.5em;
  width: 5px;
}
.countDiv:after {
  top: 0.9em;
}

</style>
<script type="text/javascript">

// Creates an animated transition between the two numbers
function switchDigit(position, digitnum, number){
  var digit = $('.digit' + digitnum, position)
  if(digit.is(':animated')){
    return false;
  }
  if($('.digit' + digitnum, position).parent().data('digit') == number){
    // We are already showing this number
    return false;
  }
  $('.digit' + digitnum, position).parent().data('digit', number);
  var replacement = $('<span>',{
      'class': 'digit' + digitnum,
      css:{
        top:'-2.1em',
        opacity:0
      },
      html:number
    });
  // The .static class is added when the animation
  // completes. This makes it run smoother.
  digit
    .before(replacement)
    .removeClass('static')
    .animate({top:'2.5em',opacity:0},'fast',function(){
    digit.remove();
    })
  replacement
    .delay(100)
    .animate({top:0,opacity:1},'fast',function(){
      replacement.addClass('static');
    });
}

var _i=true;
setInterval(function(){
    var currentTime = new Date();
    var h = currentTime.getHours();
    var m = currentTime.getMinutes();
    var s = currentTime.getSeconds();
    if(h == 24){h = 0;}
    if(h < 10) {
      switchDigit(".countHours", 1, 0);
      switchDigit(".countHours", 0, h);
    } else {
      h2 = Math.floor(h / 10);
      switchDigit(".countHours", 1, h2);
      switchDigit(".countHours", 0, h - 10 * h2);
    }
    if(m < 10) {
      switchDigit(".countMinutes", 1, 0);
      switchDigit(".countMinutes", 0, m);
    } else {
      m2 = Math.floor(m / 10);
      switchDigit(".countMinutes", 1, m2);
      switchDigit(".countMinutes", 0, m - 10 * m2);
    }
    if(s < 10) {
      switchDigit(".countSeconds", 1, 0);
      switchDigit(".countSeconds", 0, s);
    } else {
      s2 = Math.floor(s / 10);
      switchDigit(".countSeconds", 1, s2);
      switchDigit(".countSeconds", 0, s - 10 * s2);
    }
    document.getElementById('countDiv1').style.visibility=(_i=!_i)?'visible':'hidden';
    document.getElementById('countDiv2').style.visibility=(_i)?'visible':'hidden';
    },500);
</script>