uhr-mit-bbalken-drehpunkt.html
Quell Code
<head>
<style>
@import url("https://fonts.googleapis.com/css?family=Archivo+Black");
body {
background-color: #262626;
font-family: 'Anton', sans-serif;
}
.time {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: 50px;
width: 323px;
background-color: #fff;
padding: 0px 10px;
text-align: center;
border-radius: 5px;
overflow:hidden;
}
#cuhr{
overflow:hidden;
}
ul.numbers {
list-style-type: none;
padding: 0;
position: relative;
display: inline-block;
transition: all ease 0.5s;
margin: 0px;
border-radius: 5px;
background-color: #fff;
}
ul.numbers li {
height: 50px;
width: 50px;
text-align: center;
line-height: 50px;
font-weight: 800;
}
ul.numbers.hoursFirst, ul.numbers.hoursLast {
background-color: #ff7468;
color: #422a2d;
}
ul.numbers.minutesFirst, ul.numbers.minutesLast {
background-color: #2198dd;
color: #fff;
}
ul.numbers.secondsFirst, ul.numbers.secondsLast {
background-color: #f2c941;
color: #212121;
}
</style>
</head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<div id="cuhr"><div class="time"></div></div>
<script>
$(document).ready(function(){
var i = 0;
const arr = [0,1,2,3,4,5,6,7,8,9];
$(".time").append("<ul class='numbers hoursFirst'></ul>,<ul class='numbers hoursLast'></ul>,<ul class='numbers minutesFirst'></ul>,<ul class='numbers minutesLast'></ul>,<ul class='numbers secondsFirst'></ul>,<ul class='numbers secondsLast'></ul>");
arr.forEach(function(currentElement,index){
$(".numbers").append("<li>"+currentElement+"</li>");
});
var getFirstDigit = function(number){
return parseInt(number / 10);
}
var getLastDigit = function(number){
return number%10;
}
var move = function(){
var myDate = new Date();
var seconds = myDate.getSeconds();
var minutes = myDate.getMinutes();
var hours = myDate.getHours();
var animateFirstDigit = function(className,property){
$(className).animate({},function(){
$(this).css("top",-getFirstDigit(property)*50);
});
}
var animateSecondDigit = function(className,property){
$(className).animate({},function(){
$(this).css("top",-getLastDigit(property)*50);
});
}
animateFirstDigit(".hoursFirst",hours);
animateSecondDigit(".hoursLast",hours);
animateFirstDigit(".minutesFirst",minutes);
animateSecondDigit(".minutesLast",minutes);
animateFirstDigit(".secondsFirst",seconds);
animateSecondDigit(".secondsLast",seconds);
}
setInterval(move,1000);
});
</script>