basti1012.bplaced.net

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

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>