Es ist Weihnachten, also können Sie einen HTML-Weihnachtsbaum erstellen und ihn Ihren Freunden schenken. Auch Neulinge ohne Programmierkenntnisse können den Schritten folgen und den Code ausführen.
1. Öffnen Sie vscoede und erstellen Sie eine neue Textdatei
2. Kopieren Sie dann den folgenden Code hinein
<html>
<Kopf>
<title>Weihnachtsbaum</title>
<meta charset="utf-8" >
<Stil>
html, Körper {Breite: 100%; Rand: 0;
div { Rand: 0; Polsterung: 0;
.nav {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 27px;
Hintergrundfarbe: weiß;
Farbe: Schwarz;
Textausrichtung: Mitte;
Zeilenhöhe: 25px;
}
a { color: black; text-decoration: none; border-bottom: 1px gestricheltes Schwarz }
a:hover { border-bottom: 1px solid red }
. previous { float: left; margin-left: 10px }
.next { float: right; margin-right: 10px }
.green { Farbe: grün }
.red { Farbe: rot }
textarea {Breite: 100%; Rand: 0; Polsterung: 0;
.block-outer { float: left; height: 100%; padding-left: 1px solid black;
.block-inner { Höhe: 68 % }
.one { Grenze: 0;
</style>
</head>
<body marginwidth="0" marginheight="0">
<canvas id="c" height="356" width="446">
<Skript>
var kollabiert = true;
Funktion toggle() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
if (eingeklappt) {
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} anders {
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
kollabiert = !kollabiert;
}
</script>
<Skript>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</script>
<Skript>
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)with(M[k]=k?c.c loneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='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)));else for(;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,i++<W;)if( D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),Strich();for(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]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*T(D)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('Frohe Weihnachten!',U,345);if(!(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)
</script>
</body>
</html>3. Wählen Sie zum Speichern die Tastenkombination Strg + S (der vorherige Name kann nach Belieben geändert werden, das Suffix HTML sollte jedoch nicht geändert werden).
4. Hier ausführen, um mit dem Debuggen zu beginnen. Wählen Sie einen beliebigen Browser zum Ausführen aus (ich habe Chrome, also wähle ich Google Chrome zum Ausführen aus).
5. Betriebseffekt
1. Erstellen Sie eine neue TXT-Datei auf dem Desktop
2. Kopieren Sie den folgenden Code hinein
<html>
<Kopf>
<title>Weihnachtsbaum</title>
<meta charset="utf-8" >
<Stil>
html, Körper {Breite: 100%; Rand: 0;
div { Rand: 0; Polsterung: 0;
.nav {
Position: absolut;
oben: 0;
links: 0;
Breite: 100 %;
Höhe: 27px;
Hintergrundfarbe: weiß;
Farbe: Schwarz;
Textausrichtung: Mitte;
Zeilenhöhe: 25px;
}
a { color: black; text-decoration: none; border-bottom: 1px gestricheltes Schwarz }
a:hover { border-bottom: 1px solid red }
. previous { float: left; margin-left: 10px }
.next { float: right; margin-right: 10px }
.green { Farbe: grün }
.red { Farbe: rot }
textarea {Breite: 100%; Rand: 0; Polsterung: 0;
.block-outer { float: left; height: 100%; padding-left: 1px solid black;
.block-inner { Höhe: 68 % }
.one { Grenze: 0;
</style>
</head>
<body marginwidth="0" marginheight="0">
<canvas id="c" height="356" width="446">
<Skript>
var kollabiert = true;
Funktion toggle() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
if (eingeklappt) {
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} anders {
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
kollabiert = !kollabiert;
}
</script>
<Skript>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</script>
<Skript>
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)with(M[k]=k?c.c loneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='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)));else for(;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,i++<W;)if( D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),Strich();for(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]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*T(D)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('Frohe Weihnachten!',U,345);if(!(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)
</script>
</body>
</html>3. Klicken Sie nach dem Kopieren auf Datei ----Speichern unter
4. Ändern Sie den Dateinamen in einen beliebigen Namen und das Suffix sollte „html“ sein
Wählen Sie einfach alle Dateien als Speichertyp aus. Wenn es einen HTML-Typ gibt, wählen Sie einfach den HTML-Typ aus.
5. Dies ist das Rendering nach dem Speichern.
6. Doppelklicken Sie zum Öffnen, um den Laufeffekt anzuzeigen.
Damit ist dieser Artikel über die Erstellung eines HTML-Weihnachtsbaums abgeschlossen. Weitere Informationen zur Erstellung eines HTML-Weihnachtsbaums finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie werden mich in Zukunft unterstützen. downcodes.com!