Clock Position

by p_russell

HTML

<link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet"> 
<div id="outerContainer">
  <div class="container">
    <span class="clock">
		{{ timeSinceUpdate }}
    </span>
  </div>
</div>

CSS

body {
  background-color: green;
	font-family: 'Fjalla One', courier;
	font-size: 2.5rem;
	overflow: hidden;
}

#outerContainer {
  position: relative;
  width: 500px;
  height: 15.4rem;
  background-color: red;
/* 	text-align: center; */
}

.container {
 	display: block; 
  position: relative;
  width: 40%;
  height: 5.4rem;
  background-color: blue;
/* 	text-align: center; */
}

.clock {
  position: absolute;
 	left: 50%;
	top: 50%;
; 
/*     width: 60%; */
/*   height: 50%; */
  background-color: white;
	color: black;
/* 	margin: auto; */
/* 	display: inline-block; */
margin: -1rem 0 0 -4.3rem;
}

Vue

fly = new Vue({
	el: '#outerContainer',
  data: {
		timeSinceUpdate: "?0:00:00"
  },
  methods: {
  }
});

var start = Math.floor( Date.now() / 1000 );
var lastUpdateTime = start - 7200;
var countUp = setInterval(updateClocks, 1000);

function updateClocks() {
// show time since AJAX update - but only update at retrieve interval
	var now = Math.floor( Date.now() / 1000 );
 console.log ( 'updateClocks now = '+ now + " lut = " + lastUpdateTime );

// Display time since last data update
	var secondsSinceUpdate = now - lastUpdateTime;
 // console.log ( 'updateClocks now = '+ now + 'lastUpdateTime' + lastUpdateTime );	
	var hours = Math.floor( secondsSinceUpdate / 3600 );
	var minutes = Math.floor( ( secondsSinceUpdate - hours * 3600 ) / 60 );
	var seconds = secondsSinceUpdate - hours * 3600 - minutes * 60;
	zeroSec = ( seconds < 10 ) ? "0" : "";
	zeroMin = ( minutes < 10 ) ? "0" : "";
	fly.timeSinceUpdate = "+" + hours + ":" + zeroMin + minutes + ":" + zeroSec + seconds;
console.log ("time since update = " + hours + ":" + zeroMin + minutes + ":" + zeroSec + seconds);


}