设为首页收藏本站
天天打卡

 找回密码
 立即注册
搜索
查看: 81|回复: 16

圣诞节制作一颗HTML的圣诞树

[复制链接]

1

主题

68

回帖

159

积分

注册会员

积分
159
发表于 2024-4-19 20:19:59 | 显示全部楼层 |阅读模式
前言:

来到圣诞节了,那么就可以制作一颗HTML的圣诞树送给朋友,没有编程基础的小白也可以按照步骤操作也可以运行起来代码的
一、vscode里面运行

1.打开vscoede,然后新建一个文本文件

2.然后把如下的代码复制到里面去
  1. <html>
  2. <head>
  3. <title>圣诞树</title>
  4. <meta charset="utf-8" >
  5. <style>
  6. html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
  7. div { margin: 0; padding: 0; border: 0; }
  8. .nav {
  9.                 position: absolute;
  10.                 top: 0;
  11.                                 left: 0;
  12.                                 width: 100%;
  13.                                 height: 27px;
  14.                                 background-color: white;
  15.                                 color: black;
  16.                                 text-align: center;
  17.                                 line-height: 25px;
  18.                         }
  19.                         a { color: black; text-decoration: none; border-bottom: 1px dashed black; }
  20.                         a:hover { border-bottom: 1px solid red; }
  21.                         .previous { float: left; margin-left: 10px; }
  22.                         .next { float: right; margin-right: 10px; }
  23.                         .green { color: green; }
  24.                         .red { color: red; }
  25.                         textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }
  26.                         .block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }
  27.                         .block-inner { height: 68%; }
  28.                         .one { border: 0; }
  29. </style>
  30.         </head>
  31.         <body marginwidth="0" marginheight="0">
  32.         <canvas id="c" height="356" width="446">
  33. <script>
  34.                         var collapsed = true;
  35.                         function toggle() {
  36.                                 var fs = top.document.getElementsByTagName('frameset')[0];
  37.                                 var f = fs.getElementsByTagName('frame');
  38.                                 if (collapsed) {
  39.                                         fs.rows = '250px,*';
  40.                                         fs.noResize = false;
  41.                                         f[0].noResize = false;
  42.                                         f[1].noResize = false;
  43.                                 } else {
  44.                                         fs.rows = '30px,*';
  45.                                         fs.noResize = true;
  46.                                         f[0].noResize = true;
  47.                                         f[1].noResize = true;
  48.                                 }
  49.                                 collapsed = !collapsed;
  50.                         }
  51. </script>
  52. <script>
  53.                         var b = document.body;
  54.                         var c = document.getElementsByTagName('canvas')[0];
  55.                         var a = c.getContext('2d');
  56.                         document.body.clientWidth;
  57. </script>
  58. <script>
  59. 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.cloneNode(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(U-i/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(D-x/.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),stroke();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('圣诞快乐啊!',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)
  60. </script>
  61. </body>
  62. </html>
复制代码
3.选择快捷键Ctrl+S保存(前面的名字可以随便改,但是后缀的html不要改)

4.运行这里启动调试,选择任意的浏览器运行(我有chrome就选择谷歌chrome运行了)

5.运行效果

二、记事本txt保存运行

1.桌面新建一个txt文件

2.把如下代码复制进去
  1. <html>
  2. <head>
  3. <title>圣诞树</title>
  4. <meta charset="utf-8" >
  5. <style>
  6. html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
  7. div { margin: 0; padding: 0; border: 0; }
  8. .nav {
  9.                 position: absolute;
  10.                 top: 0;
  11.                                 left: 0;
  12.                                 width: 100%;
  13.                                 height: 27px;
  14.                                 background-color: white;
  15.                                 color: black;
  16.                                 text-align: center;
  17.                                 line-height: 25px;
  18.                         }
  19.                         a { color: black; text-decoration: none; border-bottom: 1px dashed black; }
  20.                         a:hover { border-bottom: 1px solid red; }
  21.                         .previous { float: left; margin-left: 10px; }
  22.                         .next { float: right; margin-right: 10px; }
  23.                         .green { color: green; }
  24.                         .red { color: red; }
  25.                         textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }
  26.                         .block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }
  27.                         .block-inner { height: 68%; }
  28.                         .one { border: 0; }
  29. </style>
  30.         </head>
  31.         <body marginwidth="0" marginheight="0">
  32.         <canvas id="c" height="356" width="446">
  33. <script>
  34.                         var collapsed = true;
  35.                         function toggle() {
  36.                                 var fs = top.document.getElementsByTagName('frameset')[0];
  37.                                 var f = fs.getElementsByTagName('frame');
  38.                                 if (collapsed) {
  39.                                         fs.rows = '250px,*';
  40.                                         fs.noResize = false;
  41.                                         f[0].noResize = false;
  42.                                         f[1].noResize = false;
  43.                                 } else {
  44.                                         fs.rows = '30px,*';
  45.                                         fs.noResize = true;
  46.                                         f[0].noResize = true;
  47.                                         f[1].noResize = true;
  48.                                 }
  49.                                 collapsed = !collapsed;
  50.                         }
  51. </script>
  52. <script>
  53.                         var b = document.body;
  54.                         var c = document.getElementsByTagName('canvas')[0];
  55.                         var a = c.getContext('2d');
  56.                         document.body.clientWidth;
  57. </script>
  58. <script>
  59. 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.cloneNode(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(U-i/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(D-x/.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),stroke();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('圣诞快乐啊!',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)
  60. </script>
  61. </body>
  62. </html>
复制代码
3.复制进去后点击文件----另存为

4.文件名改为任意,后缀要为html
保存类型就选择所有文件就好,或者有html类型的就选择html类型就好了

5.这样就是保存完成后的效果图了

6.双击打开就可以查看运行效果了

到此这篇关于圣诞节制作一颗HTML的圣诞树吧的文章就介绍到这了,更多相关html制作圣诞树内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

37

回帖

75

积分

注册会员

积分
75
发表于 2024-5-4 21:25:19 | 显示全部楼层
感谢分享,受益匪浅!

1

主题

61

回帖

145

积分

注册会员

积分
145
发表于 2024-5-20 13:01:17 | 显示全部楼层
让我们一起努力

9

主题

54

回帖

341

积分

中级会员

积分
341

推广达人宣传达人热心会员付费会员

发表于 2024-5-21 07:49:58 | 显示全部楼层
同意你的观点,我们有共鸣。

0

主题

68

回帖

136

积分

注册会员

积分
136
发表于 2024-6-27 22:53:39 | 显示全部楼层
友善的讨论氛围是非常重要的。

0

主题

46

回帖

92

积分

注册会员

积分
92
发表于 2024-7-16 15:35:54 | 显示全部楼层
谢谢你分享这个信息

0

主题

52

回帖

103

积分

注册会员

积分
103
发表于 2024-8-10 06:30:16 | 显示全部楼层
顶一个,观点非常中肯!

1

主题

56

回帖

136

积分

注册会员

积分
136
发表于 2024-8-26 18:55:54 | 显示全部楼层
牛逼

0

主题

43

回帖

83

积分

注册会员

积分
83
发表于 2024-8-29 06:52:44 | 显示全部楼层
感谢分享,受益匪浅!

1

主题

42

回帖

108

积分

注册会员

积分
108
发表于 2024-9-10 01:15:10 | 显示全部楼层
我不确定这个信息的准确性,请再确认一下
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|小黑屋|爱云论坛 - d.taiji888.cn - 技术学习 免费资源分享 ( 蜀ICP备2022010826号 )|天天打卡

GMT+8, 2024-11-15 05:34 , Processed in 0.084049 second(s), 28 queries .

Powered by i云网络 Licensed

© 2023-2028 正版授权

快速回复 返回顶部 返回列表