colaholiker
Mitglied
Hallo Leute,
bei Start meiner Webseite soll immer eine andere Uhr entstehen mit Hintergrundbild und >passenden< Zeigern (Quelle).
Ich erzeuge eine Random- Zahl und baue damit einen Pfad zu einer bestimmten Grafik (Ziffernblatt).
Damit wird das Bild als Hintergrund in einen Div- Bereich geladen.
Im Div- Bereich werden dann die Zeiger über das Bild gelegt. Die js- Datei ist unten auf der Webseite verlinkt, das css-File steht oben im 'head' s.Code oben).
So sehen js und css aus:
Meine Frage ist jetzt, wie ich es schaffe, für bestimmte Zifferblätter das css anzupassen. Dazu müßte ich sicher mit js die erzeugten Bildnamen verarbeiten.
Das stelle ich mir mit einer 'for of'- Schleife je css-version vor, etwa so:
for (let segment of ["bild-01", "bild-06", "bild-23"]) {css-typ1 aktiv}
for (let segment of ["bild-02", "bild-03", "bild-18"]) {css-typ2 aktiv}
...
Damit kann ich händisch mit den passenden Zifferblättern Gruppen für die css- Varianten bilden.
Wie muß dafür der 'div'-Bereich aussehen? Sollten da per js 'class'- Namen entsprechend geändert werden?
Die Uhr besitzt 3 Zeiger und einen Kreis für die Achse. Müßte ich deshalb 4 Klassen bedenken oder nur <div class="clock"> für alles?
Mit dem erstellen und löschen von Klassen komme ich noch nicht so klar.
Oder gibt es andere Methoden?
TIA
bei Start meiner Webseite soll immer eine andere Uhr entstehen mit Hintergrundbild und >passenden< Zeigern (Quelle).
Ich erzeuge eine Random- Zahl und baue damit einen Pfad zu einer bestimmten Grafik (Ziffernblatt).
Damit wird das Bild als Hintergrund in einen Div- Bereich geladen.
Code:
<link rel="stylesheet" href="a-Arbeitsfiles/css/uhr-16-style.css">
<script>
function bild_random() {
var
anzPix = 70;
img = '<img id="bild2" style.backgroundImage="" src=\"' + 'a-Arbeitsfiles/images/Uhren/uhr-',
b = Math.floor((Math.random() * anzPix) + 1),
c = b.toString(),
cl = c.length;
if ( cl < 2 ) { c = '0' + c; }
img += c;
img += '.jpg';
img += '\" alt=\"[Uhr]\"/>';
return img;
}
</script>
</head>
...
<div id= "div_sp4">
<div class="clock">
<script> document.write(bild_random()); </script>
<div class="hour">
<div class="hr" id="hr"></div>
</div>
<div class="min">
<div class="mn" id="mn"></div>
</div>
<div class="sec">
<div class="sc" id="sc"></div>
</div>
</div>
</div>
...
<script src="a-Arbeitsfiles/js/uhr-16.js"></script>
</body>
</html>Im Div- Bereich werden dann die Zeiger über das Bild gelegt. Die js- Datei ist unten auf der Webseite verlinkt, das css-File steht oben im 'head' s.Code oben).
So sehen js und css aus:
Code:
[js]
const deg = 6;
const hr = document.querySelector('#hr');
const mn = document.querySelector('#mn');
const sc = document.querySelector('#sc');
setInterval(() => {
let day = new Date();
let hh = day.getHours() * 30;
let mm = day.getMinutes() * deg;
let ss = day.getSeconds() * deg;
hr.style.transform = `rotateZ(${hh+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
})
[css]
.clock
{
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
/* background: url('../../a-Arbeitsfiles/images/uhren/uhr-16.jpg'); */
background-size: cover;
}
.clock::before
{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: #fff; /* Zeigerachse */
border-radius: 50%;
z-index: 10000;
}
.clock .hour,
.clock .min,
.clock .sec
{
position: absolute;
}
.clock .hour, .hr
{
width: 160px;
height: 160px;
}
.clock .min, .mn
{
width: 190px;
height: 190px;
}
.clock .sec, .sc
{
width: 230px;
height: 230px;
}
.hr, .mn, .sc
{
display: flex;
justify-content: center;
/* align-items: center; */
position: absolute;
border-radius: 50%;
}
.hr:before
{
content: '';
position: absolute;
width: 8px;
height: 80px;
background: black; /* #ff105e Zeiger Std */
z-index: 10;
border-radius: 6px 6px 0 0;
}
.mn:before
{
content: '';
position: absolute;
width: 4px;
height: 90px;
background: black; /* Zeiger min */
z-index: 11;
border-radius: 6px 6px 0 0;
}
.sc:before
{
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #ff105e; /* #fff Zeiger sec */
z-index: 12;
border-radius: 6px 6px 0 0;
}Meine Frage ist jetzt, wie ich es schaffe, für bestimmte Zifferblätter das css anzupassen. Dazu müßte ich sicher mit js die erzeugten Bildnamen verarbeiten.
Das stelle ich mir mit einer 'for of'- Schleife je css-version vor, etwa so:
for (let segment of ["bild-01", "bild-06", "bild-23"]) {css-typ1 aktiv}
for (let segment of ["bild-02", "bild-03", "bild-18"]) {css-typ2 aktiv}
...
Damit kann ich händisch mit den passenden Zifferblättern Gruppen für die css- Varianten bilden.
Wie muß dafür der 'div'-Bereich aussehen? Sollten da per js 'class'- Namen entsprechend geändert werden?
Die Uhr besitzt 3 Zeiger und einen Kreis für die Achse. Müßte ich deshalb 4 Klassen bedenken oder nur <div class="clock"> für alles?
Mit dem erstellen und löschen von Klassen komme ich noch nicht so klar.
Oder gibt es andere Methoden?
TIA
