Verschiedene Uhren für die Webseite

Engelchen

Erstelle für jede Uhr eine Box mit Html

Uhr 1:

Code

<div style="text-align:center;padding:1em 0;"> <h2><a style="text-decoration:none;" href="https://www.zeitverschiebung.net/de/city/2831924"><span style="color:gray;">Aktuelle Uhrzeit / Ortszeit</span><br />Singen, Deutschland</a></h2> <iframe src="https://www.zeitverschiebung.net/clock-widget-iframe-v2?language=de&size=large&timezone=Europe%2FBerlin" width="100%" height="140" frameborder="0" seamless></iframe> <small style="color:gray;">&copy; <a href="https://www.zeitzonenrechner.net/" style="color: gray;">Zeitzonenrechner</a></small> </div>

Uhr 2:

Code

<!-- präsentiert von kostenlose-javascripts.de -->
<script type='text/javascript'>
<!--
var nachricht = 'Warum klickst du auf die Uhr?';

document.write('<input type="button" id="uhr_zeit" onclick="alert(\''+nachricht+'\'); return true;" name="zeit" size="10" />');
function Uhr_anzeigen()
{
    var Datum = new Date();
    var std = Datum.getHours();
    var min = Datum.getMinutes();
    var sec = Datum.getSeconds();
    Zeit = ((std < 10) ? " 0" : " ") + std;
    Zeit += ((min < 10) ? ":0" : ":") + min;
    Zeit += ((sec < 10) ? ":0" : ":") + sec;
    Zeit += " Uhr";
    document.getElementById('uhr_zeit').value = Zeit;
    timerid = setTimeout("Uhr_anzeigen()",1000);
}
//-->
</script>
<script type="text/javascript">Uhr_anzeigen();</script>
<!-- präsentiert von kostenlose-javascripts.de -->

Alles anzeigen

Uhr 3:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<title>Time</title>
<script type="text/javascript">
<!--
function start() {
    time();
    window.setInterval("time()", 1000);
}

function time() {
    var now = new Date();
    hours = now.getHours();
    minutes = now.getMinutes();
    seconds = now.getSeconds();

    thetime = (hours < 10) ? "0" + hours + ":" : hours + ":";
    thetime += (minutes < 10) ? "0" + minutes + ":" : minutes + ":";
    thetime += (seconds < 10) ? "0" + seconds : seconds;

    element = document.getElementById("time");
    element.innerHTML = thetime;
}

//-->
</script>
</head>
<body onload="start();">
 <span id="time"></span>
</body>
</html>

Alles anzeigen

Uhr 4:

HTML

<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <link rel='stylesheet' href='   css    ' />
 <title>  </title>
</head>
<body>
 <div class="clock" id="clock">
  <!--    -->
  <div class="origin"></div>

  <!--      -->
  <div class="clock-line hour-line" id="hour-line"></div>
  <div class="clock-line minute-line" id="minute-line"></div>
  <div class="clock-line second-line" id="second-line"></div>

  <!--    -->
  <div class="date-info" id="date-info"></div>
  <!--    -->
  <div class="time-info" >
   <div class="time" id="hour-time"></div>
   <div class="time" id="minute-time"></div>
   <div class="time" id="second-time"></div>
  </div>
 </div>
<script type='text/javascript' src='   javascript    '></script>
</body>
</html>
<style>
/*    */
*{
 margin:0;
 padding:0;
}
.clock{
 width:400px;
 height:400px;
 border:10px solid #333;
 box-shadow: 0px 0px 20px 3px #444 inset;
 border-radius:210px;
 position:relative;
 margin:5px auto;
 z-index:10;
 background-color:#f6f6f6;
}
/*      */
.clock-num{
 width:40px;
 height:40px;
 font-size:22px;
 text-align:center;
 line-height:40px;
 position:absolute;
 z-index:8;
 color:#555;
 font-family:fantasy, 'Trebuchet MS';
}
.em_num{
 font-size:28px;
}
/*    */
.clock-line{
 position:absolute;
 z-index:20;
}
.hour-line{width:100px;
 height:4px;
 top:198px;
 left:200px;
 background-color:#000;
 border-radius:2px;
 transform-origin:0 50%;
 box-shadow:1px -3px 8px 3px #aaa;
}
.minute-line{
 width:130px;
 height:2px;
 top:199px;
 left:190px;
 background-color:#000;
 transform-origin:7.692% 50%;
 box-shadow:1px -3px 8px 1px #aaa;
}
.second-line{
 width:170px;
 height:1px;
 top:199.5px;
 left:180px;
 background-color:#f60;
 transform-origin:11.765% 50%;
 box-shadow:1px -3px 7px 1px #bbb;
}
/*    */
.origin{
 width:20px;
 height:20px;
 border-radius:10px;
 background-color:#000;
 position:absolute;
 top:190px;
 left:190px;
 z-index:14;
}

/*       */
.date-info{
 width:160px;
 height:28px;
 line-height:28px;
 text-align:center;
 position:absolute;
 top:230px;
 left:120px;
 z-index:11;
 color:#555;
 font-weight:bold;
 font-family:'    ';
}
.time-info{
 width:92px;
 height:30px;
 line-height:30px;
 text-align:center;
 position:absolute;
 top:270px;
 left:154px;
 z-index:11;
 background-color:#555;
 padding:0;
 box-shadow:0px 0px 9px 2px #222 inset;
}
.time{
 width:30px;
 height:30px;
 text-align:center;
 float:left;
 color:#fff;
 font-weight:bold;
}
#minute-time{
 border-left:1px solid #fff;
 border-right:1px solid #fff;
}

/*    */
.clock-scale{
 width:195px;
 height:2px;
 transform-origin:0% 50%;
 z-index:7;
 position:absolute;
 top:199px;
 left:200px;
}
.scale-show{
 width:12px;
 height:2px;
 background-color:#555;
 float:left;
}
.scale-hidden{
 width:183px;
 height:2px;
 float:left;
}
</style>
<script>
(function(){
  window.onload=initNumXY(200, 160, 40,40);
  var hour_line = document.getElementById("hour-line");
  var minute_line = document.getElementById("minute-line");
  var second_line = document.getElementById("second-line");
  var date_info = document.getElementById("date-info");
  var week_day = [
   '   ', '   ', '   ', '   ', '   ', '   ', '   '
  ];
  var hour_time = document.getElementById("hour-time");
  var minute_time = document.getElementById("minute-time");
  var second_time = document.getElementById("second-time");
  function setTime(){
   var this_day = new Date();
   var hour = (this_day.getHours() >= 12) ?
     (this_day.getHours() - 12) : this_day.getHours();
   var minute = this_day.getMinutes();
   var second = this_day.getSeconds();
   var hour_rotate = (hour*30-90) + (Math.floor(minute / 12) * 6);
   var year = this_day.getFullYear();
   var month = ((this_day.getMonth() + 1) < 10 ) ?
     "0"+(this_day.getMonth() + 1) : (this_day.getMonth() + 1);
   var date = (this_day.getDate() < 10 ) ?
     "0"+this_day.getDate() : this_day.getDate();
   var day = this_day.getDay();
   hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
   minute_line.style.transform = 'rotate(' + (minute*6 - 90) + 'deg)';
   second_line.style.transform = 'rotate(' + (second*6 - 90)+'deg)';
   date_info.innerHTML = 
    year + "-" + month + "-" + date + " " + week_day[day];
   hour_time.innerHTML = (this_day.getHours() < 10) ?
     "0" + this_day.getHours() : this_day.getHours();
   minute_time.innerHTML = (this_day.getMinutes() < 10) ? 
     "0" + this_day.getMinutes() : this_day.getMinutes();
   second_time.innerHTML = (this_day.getSeconds() < 10) ?
     "0" + this_day.getSeconds():this_day.getSeconds();
  }
  setInterval(setTime, 1000);

  function initNumXY(R, r, w, h){
   var numXY = [
    {
     "left" : R + 0.5 * r - 0.5 * w, 
     "top" : R - 0.5 * r * 1.73205 - 0.5 * h
    },
    {
     "left" : R + 0.5 * r * 1.73205 - 0.5 * w, 
     "top" : R - 0.5 * r - 0.5 * h
    },
    {
     "left" : R + r - 0.5 * w, 
     "top" : R - 0.5 * h
    },
    {
     "left" : R + 0.5 * r * 1.73205 - 0.5 * w, 
     "top" : R + 0.5 * r - 0.5 * h
    },
    {
     "left" : R + 0.5 * r - 0.5 * w, 
     "top" : R + 0.5 * r * 1.732 - 0.5 * h
    },
    {
     "left" : R - 0.5 * w, 
     "top" : R + r - 0.5 * h
    },
    {
     "left" : R - 0.5 * r - 0.5 * w, 
     "top" : R + 0.5 * r * 1.732 - 0.5 * h
    },
    {
     "left" : R - 0.5 * r * 1.73205 - 0.5 * w, 
     "top" : R + 0.5 * r - 0.5 * h
    },
    {
     "left" : R - r - 0.5 * w, 
     "top" : R - 0.5 * h
    },
    {
     "left" : R - 0.5 * r * 1.73205 - 0.5 * w, 
     "top" : R - 0.5 * r - 0.5 * h
    },
    {
     "left" : R - 0.5 * r - 0.5 * w, 
     "top": R - 0.5 * r * 1.73205 - 0.5 * h
    },
    {
     "left" : R - 0.5 * w, 
     "top" : R - r - 0.5 * h
    }
   ];
   var clock = document.getElementById("clock");
   for(var i = 1; i <= 12; i++){
    if(i%3 == 0) {
     clock.innerHTML += "<div class='clock-num em_num'>"+i+"</div>";
    } else {
     clock.innerHTML += "<div class='clock-num'>" + i + "</div>";
    }
   }
   var clock_num = document.getElementsByClassName("clock-num");
   for(var i = 0; i < clock_num.length; i++) {
    clock_num[i].style.left = numXY[i].left + 'px';
    clock_num[i].style.top = numXY[i].top + 'px';
   }
   for(var i = 0; i < 60; i++) {
    clock.innerHTML += "<div class='clock-scale'> " + 
          "<div class='scale-hidden'></div>" + 
          "<div class='scale-show'></div>" + 
         "</div>";
   }
   var scale = document.getElementsByClassName("clock-scale");
   for(var i = 0; i < scale.length; i++) {
    scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
   }
  }
})();
</script>

Alles anzeigen

Uhr 5:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Digital clock</title>
</head>
<body>
    <h1>Digital Clock</h1>
    <div id="clock">10:24:35</div>
</body>
</html>
<style>
body {
    margin:0;
    height:100vh;
    background-color:#000;
    color: #fff;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

#clock {
    font-size: 100px;
    color: #fff;
    padding: 40px;
    margin: 10px;
    background-color: rgb(54, 52, 52);
    border-radius: 10px;
}    
</style>
<script>
setInterval(showTime,1000);// takes time as 1 s and execute the function for every second.

function showTime() {
    let today = new Date();
    let hours = today.getHours();
    let minutes = today.getMinutes();
    let seconds = today.getSeconds();
    let period = 'AM';
    
    // Set the clock in 12 hr format
    // If hours is equal to 0 at midnight, we set to 12, and if greater than 12, we will
    //subtract it from 12.
    if (hours == '0')
    {
        hours = 12;
    }
    if (hours > 12) {
        hours -= 12;
        period = 'PM';
    }

    // when the hrs is less than 10, we are concantenate with 0, otherwise leave it hrs.
    hours = hours <10 ? `0${hours}` : hours;
    minutes = minutes <10 ? `0${minutes}` : minutes;
    seconds = seconds <10 ? `0${seconds}` : seconds;
    
    // displayin to UI
    const time = `${hours} : ${minutes} : ${seconds}  ${period} `;
    document.getElementById('clock').innerHTML = time;
}
showTime();    
</script>

Alles anzeigen

Uhr 6:

Code

<body onload="startTime()">
    <div id="clockdate">
  <div class="clockdate-wrapper">
    <div id="clock"></div>
    <div id="date"></div>
  </div>
</div>
    <style>
.clockdate-wrapper {
    background-color: #333;
    padding:25px;
    max-width:400px;
    width:100%;
    text-align:center;
    border-radius:5px;
    margin:0 auto;
    margin-top:15%;
}
#clock{
    background-color:#333;
    font-family: sans-serif;
    font-size:60px;
    text-shadow:0px 0px 1px #fff;
    color:#fff;
}
#clock span {
    color:#888;
    text-shadow:0px 0px 1px #333;
    font-size:30px;
    position:relative;
    top:-27px;
    left:-10px;
}
#date {
    letter-spacing:10px;
    font-size:14px;
    font-family:arial,sans-serif;
    color:#fff;
}
    </style>
    <script>
        function startTime() {
    var today = new Date();
    var hr = today.getHours();
    var min = today.getMinutes();
    var sec = today.getSeconds();
    //Add a zero in front of numbers<10
    min = checkTime(min);
    sec = checkTime(sec);
    document.getElementById("clock").innerHTML = hr + " : " + min + " : " + sec;
    var time = setTimeout(function(){ startTime() }, 500);
}
function checkTime(i) {
    if (i < 10) {
        i = "0" + i;
    }
    return i;
}
    </script>

Alles anzeigen

Uhr 7:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
</head>
<body>
    <div id="clock">10:10:10</div>
</body>
</html>
<style>
    #clock{
   width: 900px;
   margin: 150px;
   text-align: center;
   font-size:140px;
}
</style>
<script>
setInterval(displayClock,500)
function displayClock(){
    var time=new Date(); // function for using date
    var hrs=time.getHours();
    var min=time.getMinutes();
    var sec=time.getSeconds();

    if(hrs>24){
        hrs=hrs-24;
    }
    if(hrs==0){
        hrs=24;
    }
    document.getElementById('clock').innerText=hrs+':'+min+':'+sec;
}    
</script>

Alles anzeigen

Uhr 8:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
</head>
<body>
<div class="clock">
  <div class="digit hours">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
  <div class="digit hours">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
  <div class="separator"></div>
  <div class="digit minutes">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
  <div class="digit minutes">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
  <div class="separator"></div>
  <div class="digit seconds">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
  <div class="digit seconds">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
  </div>
</div>
</body>
</html>
<style>
.clock {
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  width:900px;
  margin-left:-450px;
  margin-top:100px;
  text-align:center;
/*    background: #666;*/
}
.digit {
  width:120px;
  height:200px;
  margin:0 5px;
  position:relative;
  display:inline-block;
}
.digit .segment {
  background:#c00;
  border-radius:5px;
  position:absolute;
  opacity:0.15;
  transition:opacity 0.2s;
  -webkit-transition:opacity 0.2s;
  -ms-transition:opacity 0.2s;
  -moz-transition:opacity 0.2s;
  -o-transition:opacity 0.2s;
}
.digit .segment.on, .separator {
  opacity:1;
  box-shadow:0 0 50px rgba(255,0,0,0.7);
  transition:opacity 0s;
  -webkit-transition:opacity 0s;
  -ms-transition:opacity 0s;
  -moz-transition:opacity 0s;
  -o-transition:opacity 0s;
}
.separator {
  width:20px;
  height:20px;
  background:#c00;
  border-radius:50%;
  display:inline-block;
  position:relative;
  top:-90px;
}
.digit .segment:nth-child(1) {
  top:10px;
  left:20px;
  right:20px;
  height:10px;
}
.digit .segment:nth-child(2) {
  top:20px;
  right:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}
.digit .segment:nth-child(3) {
  bottom:20px;
  right:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}
.digit .segment:nth-child(4) {
  bottom:10px;
  right:20px;
  height:10px;
  left:20px;
}
.digit .segment:nth-child(5) {
  bottom:20px;
  left:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}
.digit .segment:nth-child(6) {
  top:20px;
  left:10px;
  width:10px;
  height:75px;
  height:calc(50% - 25px);
}
.digit .segment:nth-child(7) {
  bottom:95px;
  bottom:calc(50% - 5px);
  right:20px;
  left:20px;
  height:10px;
}
</style>
<script>
var digitSegments = [
    [1,2,3,4,5,6],
    [2,3],
    [1,2,7,5,4],
    [1,2,7,3,4],
    [6,7,2,3],
    [1,6,7,3,4],
    [1,6,5,4,3,7],
    [1,2,3], 
    [1,2,3,4,5,6,7],
    [1,2,7,3,6]
]
document.addEventListener('DOMContentLoaded', function() {
  var _hours = document.querySelectorAll('.hours');
  var _minutes = document.querySelectorAll('.minutes');
  var _seconds = document.querySelectorAll('.seconds');
  
  setInterval(function() {
    var date = new Date();
    var hours = date.getHours(), minutes = date.getMinutes(), seconds = date.getSeconds();  
    
    setNumber(_hours[0], Math.floor(hours/10), 1);
    setNumber(_hours[1], hours%10, 1);
    setNumber(_minutes[0], Math.floor(minutes/10), 1);
    setNumber(_minutes[1], minutes%10, 1);
    setNumber(_seconds[0], Math.floor(seconds/10), 1);
    setNumber(_seconds[1], seconds%10, 1);
  }, 1000);
});
var setNumber = function(digit, number, on) {
  var segments = digit.querySelectorAll('.segment');
  var current = parseInt(digit.getAttribute('data-value'));
  // only switch if number has changed or wasn't set
  if (!isNaN(current) && current != number) {
    // unset previous number
    digitSegments[current].forEach(function(digitSegment, index) {
      setTimeout(function() {
        segments[digitSegment-1].classList.remove('on');
      }, index*45)
    });
  }
  
  if (isNaN(current) || current != number) {
    // set new number after
    setTimeout(function() {
      digitSegments[number].forEach(function(digitSegment, index) {
        setTimeout(function() {
          segments[digitSegment-1].classList.add('on');
        }, index*45)
      });
    }, 250);
    digit.setAttribute('data-value', number);
  }
}    
</script>

Alles anzeigen

Uhr 9:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<style>
html,body {
    padding:0;
    margin:0;
    background:#fafafa;
    text-align:center;
}

body {
    padding-top:3em;
}

h1,
h2 {
    margin-bottom:3rem;
    font-family:sans-serif;
    color:#666;
}

h2 {
    margin-top:2em;
}

.clock {
    position:relative;
    font-family:monaco,consolas,"courier new",monospace;
    font-size:2.2rem;
    line-height:1.375;
}

.clock:before,
.clock:after {
    position:absolute;
    top:0;
    bottom:0;
    content:':';
    z-index:2;
    line-height:1.15;
    color:#333;
}

.clock:before {
    left:2.325em;
}

.clock:after {
    right:2.325em;
}

.clock span {
    position:relative;
    display:inline-block;
    padding:0 .25em;
    margin:0 .06125em;
    z-index:1;

    -webkit-transform:perspective(750);
    -moz-transform:perspective(750);
    -ms-transform:perspective(750);
    transform:perspective(750);

    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    transform-style:preserve-3d;
}

.clock span:first-child {
    margin-left:0;
}

.clock span:last-child {
    margin-right:0;
}

.clock span:nth-child(2),
.clock span:nth-child(4) {
    margin-right:.3em;
}

.clock span:nth-child(3),
.clock span:nth-child(5) {
    margin-left:.3em;
}

.clock span:before,
.clock span:after {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    color:#eee;
    text-shadow:0 1px 0 #fff;
    background:#333;
    border-radius:.125em;
    outline:1px solid transparent; /* fix jagged edges in ff */

    -webkit-backface-visibility:hidden;
    -moz-backface-visibility:hidden;
    -ms-backface-visibility:hidden;
    backface-visibility:hidden;

    -webkit-transition:-webkit-transform .75s, opacity .75s;
    -moz-transition:-moz-transform .75s, opacity .75s;
    -ms-transition:-ms-transform .75s, opacity .75s;
    transition:transform .75s, opacity .75s;
}

.clock span:before {
    opacity:1;
    z-index:1;
    content:attr(data-old);

    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;

    -webkit-transform:translate3d(0,0,0) rotateX(0);
    -moz-transform:translate3d(0,0,0) rotateX(0);
    -ms-transform:translate3d(0,0,0) rotateX(0);
    transform:translate3d(0,0,0) rotateX(0);
}

.clock span:after {
    opacity:0;
    z-index:2;
    content:attr(data-now);

    -webkit-transform-origin:0 100%;
    -moz-transform-origin:0 100%;
    -ms-transform-origin:0 100%;
    transform-origin:0 100%;

    -webkit-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    -moz-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    -ms-transform:translate3d(0,-102.5%,0) rotateX(90deg);
    transform:translate3d(0,-102.5%,0) rotateX(90deg);
}

.clock .flip:before {
    opacity:0;
    -webkit-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    -moz-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    -ms-transform:translate3d(0,102.5%,0) rotateX(-90deg);
    transform:translate3d(0,102.5%,0) rotateX(-90deg);
}

.clock .flip:after {
    opacity:1;
    -webkit-transform:translate3d(0,0,0) rotateX(0);
    -moz-transform:translate3d(0,0,0) rotateX(0);
    -ms-transform:translate3d(0,0,0) rotateX(0);
    transform:translate3d(0,0,0) rotateX(0);
}

</style>
</head>
    
<body>
<span class="clock"></span>    
<script>
    
var Clock = (function(){

    var exports = function(element) {
        this._element = element;
        var html = '';
        for (var i=0;i<6;i++) {
            html += '<span>&nbsp;</span>';
        }
        this._element.innerHTML = html;
        this._slots = this._element.getElementsByTagName('span');
        this._tick();
    };

    exports.prototype = {

        _tick:function() {
            var time = new Date();
            this._update(this._pad(time.getHours()) + this._pad(time.getMinutes()) + this._pad(time.getSeconds()));
            var self = this;
            setTimeout(function(){
                self._tick();
            },1000);
        },

        _pad:function(value) {
            return ('0' + value).slice(-2);
        },

        _update:function(timeString) {

            var i=0,l=this._slots.length,value,slot,now;
            for (;i<l;i++) {

                value = timeString.charAt(i);
                slot = this._slots[i];
                now = slot.dataset.now;

                if (!now) {
                    slot.dataset.now = value;
                    slot.dataset.old = value;
                    continue;
                }

                if (now !== value) {
                    this._flip(slot,value);
                }
            }
        },

        _flip:function(slot,value) {

            // setup new state
            slot.classList.remove('flip');
            slot.dataset.old = slot.dataset.now;
            slot.dataset.now = value;

            // force dom reflow
            slot.offsetLeft;

            // start flippin
            slot.classList.add('flip');

        }

    };

    return exports;
}());

var i=0,clocks = document.querySelectorAll('.clock'),l=clocks.length;
for (;i<l;i++) {
    new Clock(clocks[i]);
}

    </script>
</body>
</html>

Alles anzeigen

Uhr 10:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<style>
html,body { margin:0px; padding:0px; background-color : #fff; }
#canvas{
position: absolute;
width: 465px;
height: 465px;
left: 300px;    
background-color : #00000000;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/tenten.gif);
}
#hour1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 40px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
#hour2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 80px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
#minute1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 170px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
#minute2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 210px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
#second1{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 300px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
#second2{
position: absolute;
width: 80px;
height: 100px;
top: 170px;
left: 340px;
background-repeat: no-repeat;
background-image: url(https://media-si.de/img/honehone1.gif);
}
</style>
</head>
    
<body>
<div id="canvas">
<div id="hour1"></div>
<div id="hour2"></div>
<div id="minute1"></div>
<div id="minute2"></div>
<div id="second1"></div>
<div id="second2"></div>
</div>

<script>
window.onload = function () {
  var updateView = (function() {
    var sec;
    return function () {
      var now = new Date();
    if (now.getSeconds() == sec) return;
    
    var second = now.getSeconds();
    var minute = now.getMinutes();
    var hour = now.getHours();
    
    var hour1;
    if(hour < 10){
      hour1 = 0;
    }else{
      hour1 = Math.floor(hour / 10);
    }
    var hour2 = hour%10;
    
    var minute1;
    if(minute < 10){
      minute1 = 0;
    }else{
      minute1 = Math.floor(minute / 10);
    }
    var minute2 = minute%10;
    
    var second1;
    if(second < 10){
      second1 = 0;
    }else{
      second1 = Math.floor(second / 10);
    }
    var second2 = second%10;
    
      _updateView(hour1, hour2, minute1, minute2, second1, second2);
    }
  })();
 
setInterval(updateView, 500);

function _updateView(h1, h2, m1, m2, s1, s2) {
//alert(h1+""+h2+":"+m1+""+m2+":"+s1+""+s2);
var _url = "https://media-si.de/img/";
     $('#hour1').css("background-image", "url("+_url+"h" + h1 + ".gif)");
     $('#hour2').css("background-image", "url("+_url+"hh" + h2 + ".gif)");
     $('#minute1').css("background-image", "url("+_url+"m" + m1 + ".gif)");
  $('#minute2').css("background-image", "url("+_url+"mm" + m2 + ".gif)");
     $('#second1').css("background-image", "url("+_url+"s" + s1 + ".gif)");
  $('#second2').css("background-image", "url("+_url+"ss" + s2 + ".gif)");
  }
}    
</script>
</body>
</html>

Alles anzeigen

Alle Uhren dementsprechend anpassen

mg Engelchen

Jetzt mitmachen!