Sie sind hier : sebastian1012.bplaced.net/ homepage-neu / Kurze-Scripte-und-Codeschnipsel / index.php

Zurück


Der Quellcode dazu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<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>