SheetLify

Header2

body{
  background:#00A65A;
  text-align:center;
  font-family: sans-serif;
}
.title{
  color:#fff;
  font-size:2.5em;
  text-shadow: 0px 15px 30px rgba( 0, 0, 0, 1 );
  font-family: 'Lalezar';
}
.timer{
  display:flex;
  justify-content:center;
}
.date{
  font-size:3em;
  font-family: 'Lalezar';
}
.label{
  color:#fff;
}
.pill{
  background:#000;
  color:#fff;
  border-top:5px solid #fff;
  padding:10px 15px;
  margin:10px 5px;
  transition: .3s ease-out;
  border-radius:5px;
  box-shadow: 0px 35px 50px rgba( 0, 0, 0, 0.5 );
}
.pill:hover{
  color:#ffdd40;
  margin-top: -5px;
  border-top:5px solid #ffdd40;
}
.pill:hover .label{
  color:#ffdd40;
  transition: .3s;
}
</style>
  <p class="title">Current Time</p>
<div class="timer">
<div class="pill">
  <div id="year" class="date"></div>
  <div class="label">Year</div>
</div>
<div class="pill">
  <div id="month" class="date"></div>
  <div class="label">Month</div>
</div>
<div class="pill">
  <div id="day" class="date"></div>
  <div class="label">Day</div>
</div>
<div class="pill">
  <div id="hours" class="date"></div>
  <div class="label">Hours</div>
</div>
<div class="pill">
  <div id="minutes" class="date"></div>
  <div class="label">Minutes</div>
</div>
<div class="pill">
  <div id="seconds" class="date"></div>
  <div class="label">Seconds</div>
</div>
<div class="pill">
  <div id="milliseconds" class="date"></div>
  <div class="label">Milliseconds</div>
</div>
</div>
  
    <script id="rendered-js" >
var myVar = setInterval(myTimer, 0);
function myTimer() {
  var date = new Date();
  var month = new Array(12);
  month[0] = "1";
  month[1] = "2";
  month[2] = "3";
  month[3] = "4";
  month[4] = "5";
  month[5] = "6";
  month[6] = "7";
  month[7] = "8";
  month[8] = "9";
  month[9] = "10";
  month[10] = "11";
  month[11] = "12";
  document.getElementById("year").innerHTML = date.getFullYear();
  document.getElementById("month").innerHTML = month[date.getMonth()];
  document.getElementById("day").innerHTML = date.getDate();
  document.getElementById("hours").innerHTML = date.getHours();
  document.getElementById("minutes").innerHTML = date.getMinutes();
  document.getElementById("seconds").innerHTML = date.getSeconds();document.getElementById("milliseconds").innerHTML = date.getMilliseconds();
}
//# sourceURL=pen.js
  </script>

Close

Click here