Kurze Scripte und Codeschnipsel ,uhr mit bbalken drehpunkt html

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>