크리스마스를 위한 HTML 크리스마스 트리 만들기

저자：Eve Cole 업데이트 시간：2024-12-23 13:35:34

머리말:

크리스마스이므로 HTML 크리스마스 트리를 만들어 친구들에게 줄 수 있습니다. 프로그래밍 배경 지식이 없는 초보자도 단계를 따라 코드를 실행할 수 있습니다.

1. vscode에서 실행

1. vscoede를 열고 새 텍스트 파일을 만듭니다.

2. 그런 다음 다음 코드를 복사하십시오.

 <html>
<머리>
<title>크리스마스 트리</title>
<meta charset="utf-8" >
<스타일>
HTML, 본문 { 너비: 100%; 여백: 0;
div { 여백: 0; 테두리: 0;
.nav { 
		위치: 절대; 
		상단: 0; 
				왼쪽: 0; 
				너비: 100%; 
				높이: 27px; 
				배경색: 흰색; 
				색상: 검정색; 
				텍스트 정렬: 중앙; 
				줄 높이: 25px;
			}
			a { 색상: 검정색; 텍스트 장식: 없음 테두리 하단: 1px 점선 검정색 }
			a:hover { 테두리 하단: 1px 단색 빨간색 }
			.previous { float: 왼쪽; 여백-왼쪽: 10px }
			.next { float: 오른쪽; 여백-오른쪽: 10px }
			.녹색 { 색상: 녹색 }
			.red { 색상: 빨간색 }
			텍스트 영역 { 너비: 100%; 높이: 0; 여백: 0;
			.block-outer { 부동: 왼쪽; 너비: 22%; 높이: 5px; 테두리 왼쪽: 30px 3px 3px }
			.block-inner { 높이: 68% }
			.one { 테두리: 0 }
</style>
	</head>
	<body marginwidth="0" marginheight="0">
	<캔버스 id="c" height="356" width="446">
<스크립트>
			var 축소 = true;
			함수 토글() {
				var fs = top.document.getElementsByTagName('frameset')[0];
				var f = fs.getElementsByTagName('프레임');
				if (축소됨) {
					fs.rows = '250px,*';
					fs.noResize = 거짓;
					f[0].noResize = 거짓;
					f[1].noResize = 거짓;
				} 또 다른 {
					fs.rows = '30px,*';
					fs.noResize = true;
					f[0].noResize = true;
					f[1].noResize = true;
				}
				축소됨 =! 축소됨;
			}
</script>
<스크립트>
			var b = document.body;
			var c = document.getElementsByTagName('canvas')[0];
			var a = c.getContext('2d');
			document.body.clientWidth; 
</script>
<스크립트>
M=수학;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 영향',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2? 128+나: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(스트로크스타일=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),스트로크();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(함수 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 ]*티(디)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('메리 크리스마스!',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. 단축키 Ctrl+S를 선택하여 저장합니다. (이전 이름은 마음대로 변경할 수 있지만 접미사 html은 변경하면 안 됩니다.)

4. 여기에서 실행하여 디버깅을 시작하고 실행할 브라우저를 선택합니다. (저는 크롬을 사용하므로 Google 크롬을 선택하여 실행합니다.)

5. 운영효과

2. 메모장 txt 저장 및 실행

1. 데스크탑에 새로운 txt 파일을 생성하세요

2. 다음 코드를 복사하세요.

 <html>
<머리>
<title>크리스마스 트리</title>
<meta charset="utf-8" >
<스타일>
HTML, 본문 { 너비: 100%; 여백: 0;
div { 여백: 0; 테두리: 0;
.nav { 
		위치: 절대; 
		상단: 0; 
				왼쪽: 0; 
				너비: 100%; 
				높이: 27px; 
				배경색: 흰색; 
				색상: 검정색; 
				텍스트 정렬: 중앙; 
				줄 높이: 25px;
			}
			a { 색상: 검정색; 텍스트 장식: 없음 테두리 하단: 1px 점선 검정색 }
			a:hover { 테두리 하단: 1px 단색 빨간색 }
			.previous { float: 왼쪽; 여백-왼쪽: 10px }
			.next { float: 오른쪽; 여백-오른쪽: 10px }
			.녹색 { 색상: 녹색 }
			.red { 색상: 빨간색 }
			텍스트 영역 { 너비: 100%; 높이: 0; 여백: 0;
			.block-outer { 부동: 왼쪽; 너비: 22%; 높이: 5px; 테두리 왼쪽: 30px 3px 3px }
			.block-inner { 높이: 68% }
			.one { 테두리: 0 }
</style>
	</head>
	<body marginwidth="0" marginheight="0">
	<캔버스 id="c" height="356" width="446">
<스크립트>
			var 축소 = true;
			함수 토글() {
				var fs = top.document.getElementsByTagName('frameset')[0];
				var f = fs.getElementsByTagName('프레임');
				if (축소됨) {
					fs.rows = '250px,*';
					fs.noResize = 거짓;
					f[0].noResize = 거짓;
					f[1].noResize = 거짓;
				} 또 다른 {
					fs.rows = '30px,*';
					fs.noResize = true;
					f[0].noResize = true;
					f[1].noResize = true;
				}
				축소됨 =! 축소됨;
			}
</script>
<스크립트>
			var b = document.body;
			var c = document.getElementsByTagName('canvas')[0];
			var a = c.getContext('2d');
			document.body.clientWidth; 
</script>
<스크립트>
M=수학;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 영향',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2? 128+나: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(스트로크스타일=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,lineTo(U+x* U,U+y*U),스트로크();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(함수 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 ]*티(디)>>0 ,L[1]>>1)){if(i==2e3)a.fillText('메리 크리스마스!',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. 복사 후 파일------다른 이름으로 저장을 클릭하세요.

4. 파일 이름을 무엇이든 변경하고 접미사는 html이어야 합니다.

저장 유형으로 모든 파일을 선택하거나, html 유형이 있는 경우 html 유형을 선택하면 됩니다.

5. 저장 후 렌더링입니다.

6. 실행 효과를 보려면 두 번 클릭하여 엽니다.

이것으로 크리스마스용 HTML 크리스마스 트리 만들기에 대한 기사를 마칩니다. HTML 크리스마스 트리 만들기에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 아래의 관련 기사를 계속 찾아보세요. 앞으로도 저를 지원해 주시기 바랍니다. downcodes.com!