如何用不到100行Html+JS+CSS代码绘制一颗静态圣诞树

本文链接：https://blog.csdn.net/stalin_/article/details/128216794

本文介绍了一种使用HTML、JavaScript和CSS在网页上绘制简单静态圣诞树的方法。通过不到100行代码实现了一个小巧有趣的圣诞树效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

圣诞节又快到了，作为一个程序员又到了展示才艺的时候了，下面给大家展示一下如何用不到100行Html+JS+CSS代码绘制一颗静态圣诞树。

效果图：
在这里插入图片描述
完整代码如下：

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>圣诞树</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
 <STYLE>

BLOCKQUOTE {font-weight:900; line-height:0.75em}

</STYLE>
<BLOCKQUOTE><FONT COLOR=YELLOW><CENTER>

    *<BR>

*  *  *<BR>

  *  *<BR>

<FONT COLOR=GREEN>

<SCRIPT LANGUAGE="JavaScript">


var Number=Math.random()*10+3;

var Length=Math.round(Number)

var width=1;

for (i=0; i<=Length; i++)

{

	for (x=0; x<=4; x++)

	{

		for (y=1; y<=width; y++)

		{

		var NewNumber=Math.random()*15;

		var Ornament=Math.round(NewNumber);

		if (Ornament<=1)

		{

		document.write("</FONT><FONT COLOR=RED> ^</FONT><FONT COLOR=GREEN>");

		}

		if (Ornament>=2){

		document.write(" ^");

		}

		}

	document.write("<BR>");

	var width=width+1;

	}

var width=width-2;

}

		document.write("</FONT><FONT COLOR=BLACK> ^^^^</FONT><FONT COLOR=BLACK>\r\n");


</SCRIPT>

</CENTER></FONT></BLOCKQUOTE>



</body>
</html>