Cliffbreak/Time-Service
3
1
Fork 1
Code Issues Pull requests Releases Wiki Activity

Add time offset, reorganize, snyc animation

Browse source
This commit is contained in:
Simon Giesel 2017-10-05 20:36:35 +02:00
parent a78be47e6b
commit 7ab487a831
7 changed files with 55 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
css/clock.css
View file

@ -28,12 +28,11 @@ body, html {
z-index: 10;
opacity: 0;
animation-name: show;
animation-delay: 3s;
animation-duration: 3s;
animation-fill-mode: forwards;
}
#Date {
#date {
font-family: 'BebasNeueRegular', Arial, Helvetica, sans-serif;
font-size: 36px;
text-align: center;
@ -57,27 +56,28 @@ ul li {
text-shadow: 0 0 5px #00c6ff;
}
#point {
.point {
position: relative;
animation: mymove 1s ease infinite;
padding-left: 10px;
padding-right: 10px;
animation: flash 1s ease infinite;
top: -11px;
opacity: 0;
}
/* Simple Animation */
@keyframes mymove {
@keyframes flash {
0% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
50% {
opacity: 0;
text-shadow: none;
}
100% {
50% {
opacity: 1.0;
text-shadow: 0 0 20px #00c6ff;
}
100% {
opacity: 0;
text-shadow: none;
}
}
@keyframes show {
@ -87,5 +87,4 @@ ul li {
100% {
opacity: 1;
}
}

15
index.php → index.html
View file

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="de">
<head>
<title>Global Cliffbreak Time</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" media="screen" href="css/style.css">
@ -8,8 +9,8 @@
</head>
<script src="plugins/jquery-3.2.1.min.js"></script>
<script src="plugins/clock.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/clock.js"></script>
<body>
@ -17,18 +18,18 @@
<div id="particles-js"></div>
<div class="clock">
<div id="Date"></div>
<div id="date"></div>
<ul>
<li id="hours"></li>
<li id="point">:</li>
<li class="point">:</li>
<li id="min"></li>
<li id="point">:</li>
<li class="point">:</li>
<li id="sec"></li>
</ul>
</div>
<script src="particles.js"></script>
<script src="load.js"></script>
<script src="js/particles.js"></script>
<script src="js/load.js"></script>
</body>
</html>

29
js/clock.js Normal file
View file

@ -0,0 +1,29 @@
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "Januar" , "Febuar" , "März" , "April" , "Mai" , "Juni" , "Juli" , "August" , "September" , "Oktober" , "November" , "Dezember" ];
var dayNames= [ "Sonntag" , "Montag" , "Dienstag" , "Mittwoch" , "Donnerstag" , "Freitag" , "Samstag" ];
var offset = 49020000;
timeTick();
setInterval(timeTick, 1000);
function timeTick() {
$('.point').css('animation-name', 'none');
var date = new Date();
date.setTime(date.getTime() - offset);
var seconds = date.getSeconds();
var minutes = date.getMinutes();
var hours = date.getHours();
$('#date').html(dayNames[date.getDay()] + " " + date.getDate() + ' ' + monthNames[date.getMonth()] + ' ' + date.getFullYear());
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
$('.point').css('animation-name', 'flash');
}
})

0
plugins/jquery-3.2.1.min.js → js/jquery-3.2.1.min.js vendored
View file

0
load.js → js/load.js
View file

0
particles.js → js/particles.js
View file

34
plugins/clock.js
View file

@ -1,34 +0,0 @@
$(document).ready(function() {
// Create two variable with the names of the months and days in an array
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ];
var dayNames= ["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"]
// Create a newDate() object
var newDate = new Date();
// Extract the current date from Date object
newDate.setDate(newDate.getDate());
// Output the day, date, month and year
$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());
setInterval( function() {
// Create a newDate() object and extract the seconds of the current time on the visitor's
var seconds = new Date().getSeconds();
// Add a leading zero to seconds value
$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);
},1000);
setInterval( function() {
// Create a newDate() object and extract the minutes of the current time on the visitor's
var minutes = new Date().getMinutes();
// Add a leading zero to the minutes value
$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);
},1000);
setInterval( function() {
// Create a newDate() object and extract the hours of the current time on the visitor's
var hours = new Date().getHours();
// Add a leading zero to the hours value
$("#hours").html(( hours < 10 ? "0" : "" ) + hours);
}, 1000);
});