Notice: Undefined variable: root in /users/basti1012/www/index1.php on line 41
Zahl in Digitaluhr optik anzeigen

Zahl in Digitaluhr optik anzeigen

Hier kann man jede Zahl in Digitaluhr Optik anzeigen lassen, diesen Code nutzte ich hier auch für meinen Besucherzähler

Der hier verwendete Code

<style> .clock { display: inline-flex; } .letter { height: 40px; width: 24px; position: relative; margin: 2px 3px; } .line { position: absolute; display: flex; } .line .arrow { width: 0; height: 0; } .line.is-vertical { flex-direction: column; } .line.is-vertical .arrow { border-left: 1px solid transparent; border-right: 1px solid transparent; } .line.is-vertical .arrow--start { border-bottom: 1px solid #25262e; } .line.is-vertical .arrow--end { border-top: 1px solid #25262e; } .line.is-horizontal .arrow { border-top: 1px solid transparent; border-bottom: 1px solid transparent; } .line.is-horizontal .arrow--start { border-right: 1px solid #25262e; } .line.is-horizontal .arrow--end { border-left: 1px solid #25262e; } .line .bg { flex: 2; background: #25262e; } .line--1 { top: 0; left: 2px; right: 2px; height: 2px; } .line--2 { top: 2px; left: 0; bottom: calc(50% + 1px); width: 2px; } .line--3 { top: 2px; right: 0; bottom: calc(50% + 1px); width: 2px; } .line--4 { top: 50%; left: 2px; right: 2px; height: 2px; transform: translateY(-50%); } .line--5 { top: calc(50% + 1px); left: 0; bottom: 2px; width: 2px; } .line--6 { top: calc(50% + 1px); right: 0; bottom: 2px; width: 2px; } .line--7 { bottom: 0; left: 2px; right: 2px; height: 2px; } .line.is-active { z-index: 10; opacity: 1; } .line.is-active .bg { background: #ff002d; } .line.is-active.is-vertical .arrow--start { border-bottom-color: #ff002d; } .line.is-active.is-vertical .arrow--end { border-top-color: #ff002d; } .line.is-active.is-horizontal .arrow--start { border-right-color: #ff002d; } .line.is-active.is-horizontal .arrow--end { border-left-color: #ff002d; } #clock{ background:black; } /* .clock { height: 100%; display: flex; justify-content: center; align-items: center; } .letter { height: 150px; width: 90px; position: relative; margin: 20px; } .line { position: absolute; display: flex; } .line .arrow { width: 0; height: 0; } .line.is-vertical { flex-direction: column; } .line.is-vertical .arrow { border-left: 7.5px solid transparent; border-right: 7.5px solid transparent; } .line.is-vertical .arrow--start { border-bottom: 7.5px solid #25262e; } .line.is-vertical .arrow--end { border-top: 7.5px solid #25262e; } .line.is-horizontal .arrow { border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; } .line.is-horizontal .arrow--start { border-right: 7.5px solid #25262e; } .line.is-horizontal .arrow--end { border-left: 7.5px solid #25262e; } .line .bg { flex: 2; background: #25262e; } .line--1 { top: 0; left: 11px; right: 11px; height: 15px; } .line--2 { top: 11px; left: 0; bottom: calc(50% + 2.75px); width: 15px; } .line--3 { top: 11px; right: 0; bottom: calc(50% + 2.75px); width: 15px; } .line--4 { top: 50%; left: 11px; right: 11px; height: 15px; transform: translateY(-50%); } .line--5 { top: calc(50% + 2.75px); left: 0; bottom: 11px; width: 15px; } .line--6 { top: calc(50% + 2.75px); right: 0; bottom: 11px; width: 15px; } .line--7 { bottom: 0; left: 11px; right: 11px; height: 15px; } .line.is-active { z-index: 10; opacity: 1; } .line.is-active .bg { background: #ff002d; } .line.is-active.is-vertical .arrow--start { border-bottom-color: #ff002d; } .line.is-active.is-vertical .arrow--end { border-top-color: #ff002d; } .line.is-active.is-horizontal .arrow--start { border-right-color: #ff002d; } .line.is-active.is-horizontal .arrow--end { border-left-color: #ff002d; } */ </style> <div class="clock" id="clock"> </div> <script> var layouts = [ [1,1,1,0,1,1,1], [0,0,1,0,0,1,0], [1,0,1,1,1,0,1], [1,0,1,1,0,1,1], [0,1,1,1,0,1,0], [1,1,0,1,0,1,1], [1,1,0,1,1,1,1], [1,0,1,0,0,1,0], [1,1,1,1,1,1,1], [1,1,1,1,0,1,1]]; var menge='427356'; for(g=1;g<=menge.length;g++){ weiter(menge[g-1],g) } function weiter(zah,h){ var elec=document.getElementById('clock'); var ele_zahl=document.createElement('div'); ele_zahl.className='letter letter'+h; for(z=0;z<7;z++){ if(z==0 || z==3 | z==6) { var ho='horizontal'; }else{ var ho='vertical'; } if(layouts[zah][z]==1){ var an='is-active'; }else{ var an=''; } ele_zahl.innerHTML+=` <div class="line line--${z+1} ${an} is-${ho}"> <div class="arrow arrow--start"></div> <div class="bg"></div> <div class="arrow arrow--end"></div> </div>`; } elec.appendChild(ele_zahl); } </script>