Mit JS einen rotierenden Weihnachtsbaum in HTML implementieren
|
<!DOCTYPE HEML PUBLIC>
<html>
<Kopf>
<meta charset="utf-8">
<Titel>
Von ZXW-NUDT
</Titel>
<Stil>
Textkörper {Textausrichtung: Mitte}
html, Text
{
Breite: 100 %;
Höhe: 100%;
Rand: 0;
Polsterung: 0;
Rand: 0;
}
div
{
Rand: 0;
Polsterung: 0;
Rand: 0;
}
.nav
{
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 27px;
Hintergrundfarbe: weiß;
Farbe: Schwarz;
Textausrichtung: zentriert;
Zeilenhöhe: 25px;
}
A
{
Farbe: Schwarz;
Textdekoration: keine;
Rahmen unten: 1px gestrichelt schwarz;
}
ein:schweben
{
Rahmen unten: 1px durchgehend rot;
}
.vorherige
{
schweben: links;
Rand links: 10px;
}
.nächste
{
schweben: rechts;
Rand rechts: 10px;
}
.Grün
{
Farbe: grün;
}
.Rot
{
Farbe: rot;
}
Textbereich
{
Breite: 100 %;
Höhe: 100%;
Rand: 0;
Polsterung: 0;
Rand: 0;
Polsterung unten: 20px;
}
.block-außen
{
schweben: links;
Breite: 22%;
Höhe: 100%;
Polsterung: 5px;
Rahmen links: 1px tief schwarz;
Rand: 30px 3px 3px 3px;
}
.block-inner
{
Höhe: 68%;
}
.eins
{
Rand: 0;
}
</Stil>
</Kopf>
<body Randbreite="0" Randhöhe="0">
<canvas id="c" Höhe="356" Breite="446">
<Skript>
var zusammengebrochen = wahr;
Funktion umschalten()
{
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('Rahmen');
wenn (zusammengeklappt)
{
fs.rows = "250px,*";
fs.noResize = falsch;
f[0].noResize = falsch;
f[1].noResize = falsch;
}
anders
{
fs.rows = "30px,*";
fs.noResize = wahr;
f[0].noResize = true;
f[1].noResize = true;
}
zusammengebrochen = !zusammengebrochen;
}
</Skript>
<Skript>
var b = Dokument.Text;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
Dokument.Body.Clientbreite;
</Skript>
<Skript>
M=Mathematik;
Q=M.zufällig;J=[];
U=16;
T = M.sin;
E = M.sqrt;
für (O=k=0;x=z=j=i=k<200;)
mit (M[k]=k?c.cloneNode(0):c)
{
Breite=Höhe=k?32:B=446;
mit(getContext('2d'))
wenn(k>10|!k)
für(
Schriftart = '60px Impact',
V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)
beginPath(fill(arc(Ui/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
sonst für(;
x = T (i),
y = Q () * 2-1,
D = x*x+y*y,
B = E (Dx/.9-1.5*y+1),
R=67*(B+1)*(L=k/9+.8)>>1,
ich++<W;
)
wenn(D<1)
beginPath(StrokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),
verschiebeNach(U+x*8,U+y*8),
LinieZu(U+x*U,U+y*U),
Schlaganfall();
für(
y=H=k+E(k++)*25,
R = Q() * W;
P=3,j<H;)
J[O++]=[
x+=T(R)*P+Q()*6-3,y+=Q()*U-8,
z+=T(R-11)*P+Q()*6-3,
j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]
}
Intervall setzen (Funktion G(m,l)
{
A = T (D-11);
wenn(l)
zurückkehren(
m[2]-l[2])*A+(l[0]-m[0])*T(D);
a.clearRect(0,0,W,W);
J.sort(G);
für(
ich = 0;
L=J[i++];
a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))
{
wenn(i==2e3)
a.Text ausfüllen
('Frohe Weihnachten!',U,345);
wenn(!(i%7))
a.drawImage(M[13],
((157*(i*i)+T(D*5+i*i)*5)%W)>>0,
((113*i+(D*i)/60)%(290+i/99))>>0);
}
D+=.02
},1)
</Skript>
</body>
</html>Was das Hinzufügen von Hintergrundmusik betrifft, gehen wir davon aus, dass diese HTML-Datei einen Ordner mit dem Namen „Musik“ hat und dass sich in diesem Ordner die Audiodatei „music.mp3“ befindet. Der Code sollte dann lauten: <audio src="Musik/Musik.mp3" autoplay="Autoplay" loop="Loop"></audio>
Das Ändern des Hintergrunds sollte folgendermaßen erfolgen (ich habe es jedenfalls nicht ausprobiert): <div class="bild"><img src="bilder.jpg" alt="" /></div><div class="inhalt"> Damit ist dieser Artikel über die Implementierung eines rotierenden Weihnachtsbaums in HTML mit JS abgeschlossen. Ich hoffe, dass es für jedermanns Studium hilfreich sein wird, und ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: CSS implementiert verschiedene Ladeeffekte mit Parsing-Prozess
>>: Zusammenfassung der häufig verwendeten Datenbank- und Tabellen-Sharding-Lösungen von MySQL
Artikel empfehlen
Zusammenfassung der Methoden zum Einfügen von Videos in HTML-Seiten
Wenn Sie nun das Video-Tag auf einer Seite verwen...
Was bedeutet das n nach int(n) in MySQL?
Sie wissen vielleicht bereits, dass die Länge 1 v...
Einführung in MySQL-Rollenfunktionen
Inhaltsverzeichnis Vorwort: 1. Einführung in die ...
VUE + OPENLAYERS erreicht Echtzeit-Positionierungsfunktion
Inhaltsverzeichnis Vorwort 1. Etikettenstil defin...
Zusammenfassung der Wissenspunkte des Datenbankindex
Inhaltsverzeichnis Erster Blick-Index Das Konzept...
Verwenden Sie sauberes HTML-Markup zum Erstellen Ihrer Seiten
Das Internet ist ein Organismus, der sich ständig...
Reine CSS-Implementierung (kein Skript) Tooltip-Textaufforderungseffekt im HTML-Befehlsstil
Analysieren Sie den Ausführungsprozess. Bewegen S...
So kehren Sie schnell von unten nach oben zurück, wenn die Webseite zu viele Inhalte enthält
Bei der Web-Frontend-Entwicklung ist es unvermeidl...
JavaScript verwendet häufig Array-Deduplizierung tatsächliche Kampf Quellcode
Mit der Array-Deduplizierung wird man häufig bei ...
Anwendung und Implementierung des Datencache-Mechanismus für kleine Programme
Informationen zum Miniprogramm-Datencache Datenca...
Detaillierter Prozess und häufige Probleme bei der VMware15-Installation von CentOS7 (Bild und Text)
1. Vorbereitung des Installationspakets VMware-pl...
Docker-Fallanalyse: Erstellen eines MySQL-Datenbankdienstes
Inhaltsverzeichnis 1 Konfigurations- und Datenver...
Lösung zum Hinzufügen einer iptables-Firewall-Richtlinie zum MySQL-Dienst
Wenn Ihre MySQL-Datenbank auf einem CentOS7-Syste...
Warum ist die Bildlaufleiste auf der Webseite rechts angebracht?
Warum befinden sich die Bildlaufleisten der Brows...
Mycli ist ein unverzichtbares Tool für MySQL-Befehlszeilen-Enthusiasten
mycli MyCLI ist eine Befehlszeilenschnittstelle f...