Beiträge von Engelchen

Engelchen

Ein Kalender Widget für eure Webseite (Homepage)

Schau mal Bitte melden Sie sich an, um diesen Link zu sehen. vorbei.

mg Engelchen

Engelchen

Bitte melden Sie sich an, um dieses Medienelement zu sehen.

Weitere Einstellungen der Fritz Box.

Spoiler anzeigen

Bitte melden Sie sich an, um diesen Inhalt zu sehen.

Quelle; Inside-digital

mg Engelchen

Engelchen

Im Zeichen des Coronavirus gibt es im Augenblick Schwachstellen an Desinfektionsmittel für Hände und Co in den meisten Einkaufsläden da alles ausverkauft ist.
Als erstes die Hände öfters mit Seife und Wasser waschen.
Man kann das Desinfektionsmittel aber leicht selber herstellen und man gehe einfach so vor.
Gehe in eine Apotheke und besorge folgende Substanzen (Mittel)

Bitte melden Sie sich an, um diesen Inhalt zu sehen.

Vermische das ganze in einem verschließbaren Behälter und schüttele das ganze ziemlich kräftig.
Jetzt hast du dein eigen hergestelltes Desinfektionsmittel.
Aber Vorsicht damit das man das in die Augen bekommt und vor Kinder sicher und unzugänglich aufbewahren.

mg Engelchen

Engelchen

Heute ist wunderschönes Winter-Wetter.

Den ganzen Tag schon blauer Himmel und Sonnenschein.

Die Temperatur liegt im Augenblick bei 0°.

Die Nächte sind halt sehr kalt und liegen fast im zweistelligem - Bereich (-10°). Aber ist halt noch Winter.

Das Wetter wird wahrscheinlich bis Ende Januar weiter so bleiben aber nach Vorhersage soll dann massig Schnee kommen.

Ich sag nur eins " Hoffentlich ist bald Frühling " denn ich mag den Winter überhaupt nicht.

Bitte melden Sie sich an, um diesen Anhang zu sehen.

mg Engelchen

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

Engelchen

Allgemeines
Die Registrierung und Benutzung unserer Foren ist kostenlos. Obwohl die Administratoren und Moderatoren vom Forum media-si.eu versuchen, alle unerwünschten Beiträge/Nachrichten von diesem Forum fernzuhalten, ist es für uns unmöglich, alle Beiträge/Nachrichten zu überprüfen. Alle Beiträge/Nachrichten drücken die Ansichten aller Mitglieder als Beitragsschreiber aus. Die Betreiber des Forums media-si.eu können nicht für den Inhalt jedes Beitrags verantwortlich gemacht werden. Durch die Annahme unserer Regeln garantierst Du, dass Du keine Nachrichten schreibst, die pervers, obszön, vulgär, ordinär oder gar sexuell orientiert, abscheulich oder bedrohlich sind oder sonstig gegen ein Gesetz verstoßen würden. Des weiteren verpflichtest Du dich, einzelne Hinweise und Verhaltensregeln in den jeweiligen Unterforen zu beachten und einzuhalten. Jede Person darf sich nur einmal hier im Forum registrieren. Die Administratoren und Moderatoren des Forums haben das Recht, Themen und Beiträge zu löschen, zu bearbeiten, zu verschieben oder zu schließen. Es besteht kein Anspruch von registrierten Benutzern beziehungsweise ehemaligen registrierten Benutzern darauf, diese einmal veröffentlichte Beiträge (ausgenommen Dateianhänge) löschen zu lassen.

Verhaltensregeln
Als angemeldete Benutzer sagen wir im Forum alle "Du" zueinander und reden uns mit dem Benutzernamen oder, falls bekannt oder erwünscht, mit dem Vornamen an. Ein ehrlicher, höflicher und konstruktiver Umgang untereinander im Forum ist absolute Bedingung und Grundlage zur Wahrung eines würdigen Miteinanders. Es wird nicht toleriert, wenn Du andere Mitglieder beschimpfst, beleidigst oder verunglimpfst. Selbst auf einen vermeintlich beleidigenden Beitrag solltest Du nicht ungehalten reagieren. Vielleicht hast Du ja selbst etwas falsch gemacht oder nur falsch verstanden. Ebenso werden keine überzogenen Selbstdarstellungen oder Eigenwerbung geduldet. Wer wiederholt gegen Forum Regeln verstößt oder immer wieder Unruhe stiftet, wird von einem der Administratoren vom Forum ausgeschlossen. Software-Piraterie unterstützen und/oder Serien-Nummern, Cracks und/oder Warez-Links enthalten. Solche Beiträge werden umgehend, ohne Ankündigung und ohne Rechtfertigung gelöscht, sobald sie dem Administrator oder einem Moderator bekannt werden, entfernt.

Schreibregeln
Bevor Du ein neues Thema verfasst, überprüfe bitte, ob jemand zuvor diese Frage genau so schon einmal gestellt hat. Benutze dafür die komfortable Suche-Funktion des Forums. Weise andere höflich darauf hin, wenn diese ein Thema beginnen sollten, welches bereits genau so behandelt worden ist. Sollten sich jedoch neue Gesichtspunkte durch die Beantwortung einer bereits schon einmal gestellten Frage ergeben, ist das erneute Stellen derselben Frage natürlich in Ordnung. Wenn Du eine allgemeine Frage hast, lese bitte vorher die FAQ auf der Webseite unseres Forums. Sollte Deine Frage hier noch nicht beantwortet sein und dient die Beantwortung derselben auch der Allgemeinheit, dann stelle diese ruhig öffentlich im Forum. Dient diese nicht der Allgemeinheit, wende Dich bitte direkt an einen der Administratoren. Schreibe keine Beiträge wie: "An den Webmaster..." oder z.B. "@ Engelchen...". Ein Administrator hat nicht immer die Zeit, alle Beiträge auf solche Inhalte zu überprüfen. Überprüfe jedes neu angefangene Thema vor dem Absenden eines Beitrages, ob es der richtigen Rubrik zugeordnet ist. Die Administratoren und die Moderatoren behalten sich das Recht vor, Beiträge in andere Rubriken zu verschieben. Private Dialoge sollen nicht über das Forum laufen (dafür gibt es die Persönlichen Nachrichten = PN). Beiträge im Forum sollten immer sachbezogen bleiben und allgemeinen Interessen dienen. Ausnahme ist hier das Unterforum 'Small Talk'

Bilder
Grundsätzlich ist die Verwendung von Bildern in Beiträgen (ausgenommen Smilies) nur erlaubt, wenn es sich dabei um eigene Bilder und Grafiken sowie sonstige eigen erstellte bildliche Darstellungen handelt oder Bilder aller Art (auch Animationen, Videos) mit Nutzungsrechten. Sollte ein Thema nur durch eine entsprechende Grafik oder ein entsprechendes Bildes erklärbar sein, kann dies natürlich auch in anderen Unterforen genutzt werden, sollte aber die absolute Ausnahme darstellen. Es dürfen nur eigene Bilder hoch geladen werden beziehungsweise Bilder, an denen Du auch die Nutzungsrechte hast. Bilder die die Persönlichkeitsrechte anderer verletzen oder die gegen die guten Sitten verstoßen, dürfen in diesem Forum nicht gezeigt werden.

Werbung
Generell ist Werbung für Produkte und gewerbliche / kommerzielle Dienstleistungen hier im Forum media-si.eu untersagt. Dazu zählen insbesondere die Werbung für eigene Dienstleistungen, Produkte oder Online Shops. Sowohl in Beiträgen als auch in Signaturen ist ein Bewerben und Verlinken von eigenen gewerblichen / kommerziellen Angeboten / Webseiten nicht erlaubt. Entsprechende Beiträge werden kommentarlos gelöscht. Gewerbliche / Kommerzielle Webseiten dürfen jedoch im Profil - ohne speziellen Hinweis - eingetragen werden.

Die Administratoren und Moderatoren
vom Forum media-si.eu

Engelchen

Hi @ all
Das ist mein Gewächshaus

Bitte melden Sie sich an, um dieses Medienelement zu sehen.

Die Größe des Gewächshauses ist 6m lang,2,7m breit und 2m hoch.
Zuerst baute ich das Gewächshaus komplett mit Hohl Kammer platten mit einer Stärke von 4mm auf.
Dann kam aber ein sehr starker Sturm und riss die ganzen Dachplatten herunter.
Ich wollte dann schon aufgeben und das Gewächshaus wieder abreisen.
Jetzt besonnte ich mich doch noch einmal und bestellte Acryl-Glasplatten für das komplette Dach (500€)
Befestigte dann die Glas Platten mit Alu Quer Striemen und verschraubte die ganzen Glas Platten miteinander.
Danach war das Gewächshaus sehr stabil und hält auch sehr starken Stürmen stand.
Die Pflanzen fühlen sich dort recht wohl. Bei sehr kaltem Wetter wie gerade jetzt beheize ich meine Pflanzen mit einem Gas Heizer.
Das Gemüse reift auch dadurch schneller und ich kann zum Teil sogar Gurken und Peperoni ende Mai schon ernten.

mg Engelchen

Engelchen

HuHu zusammen
Die Registrierung ist zur Zeit noch deaktiviert, da das Forum noch nicht komplett fertiggestellt ist.
Ein paar Modifikationen müssen noch gemacht werden.
Mitglieder vom alten Forum werden aber gebeten sich neu zu registrieren.
Sobald das Forum fertiggestellt ist kann man sich natürlich hier im Forum registrieren.

HuHu together
Registration is currently disabled because the forum is not yet completely finished.
A few modifications still need to be made.
However, members of the old forum are asked to register again.
As soon as the forum is finished you can of course register here in the forum.

mg Engelchen

Engelchen

HuHu zusammen
Habe mich kurzzeitig entschlossen ein neues Forum unter dem Begriff Media zu erstellen.
Domain und Forum erstellt und jetzt unter neuen Forum-Software Woltlab Suite 6.1.3 unter php 8.3..15
Einige Änderungen und Plugins musste vorgenommen werden.
Anscheinend läuft das neue Forum stabil.
Habe dort auch paar neue Spielereien eingebaut und nach meinen Bedürfnissen Modifiziert.
Bin mit Hochdruck das neue Forum zu aktualisieren von einer älteren Forensoftware.
Gibt auf jedemfall viel neues.

HuHu together I decided for a short time to create a new forum under the term Media.
Domain and forum created and now under new forum software Woltlab Suite 6.1.3 under php 8.3..15
Some changes and plugins had to be made.
Apparently the new forum is running stable.
I also installed some new gimmicks there and modified them according to my needs.
I'm working flat out to update the new forum from an older forum software.
In any case, there is a lot that is new.

mg Engelchen

Beiträge von Engelchen

Kalender Widgets

FritzBox einrichten

Desinfektionsmittel für zu Hause selber herstellen ganz einfach.

Wetter aktuell

Verschiedene Uhren für die Webseite

Forumsregeln

Mein Gewächshaus

Neues Forum unter Woltlab erstellt

Neues Forum unter Woltlab erstellt