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>