basti1012.bplaced.net

Du siehst gerade eine vereinfachte Darstellung unserer Inhalte. Normale Ansicht mit richtiger Formatierung.
    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>