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
Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

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>