广告位联系
返回顶部
分享到

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

HTML/Xhtml 来源:互联网 作者:佚名 发布时间:2023-12-28 22:41:50 人浏览
摘要

来到圣诞节了,那么就可以制作一颗HTML的圣诞树送给朋友,没有编程基础的小白也可以按照步骤操作也可以运行起来代码的 一、vscode里面运行 1.打开vscoede,然后新建一个文本文件 2.然

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

一、vscode里面运行

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

2.然后把如下的代码复制到里面去

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<html>

<head>

<title>圣诞树</title>

<meta charset="utf-8" >

<style>

html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }

div { margin: 0; padding: 0; border: 0; }

.nav {

        position: absolute;

        top: 0;

                left: 0;

                width: 100%;

                height: 27px;

                background-color: white;

                color: black;

                text-align: center;

                line-height: 25px;

            }

            a { color: black; text-decoration: none; border-bottom: 1px dashed black; }

            a:hover { border-bottom: 1px solid red; }

            .previous { float: left; margin-left: 10px; }

            .next { float: right; margin-right: 10px; }

            .green { color: green; }

            .red { color: red; }

            textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }

            .block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }

            .block-inner { height: 68%; }

            .one { border: 0; }

</style>

    </head>

    <body marginwidth="0" marginheight="0">

    <canvas id="c" height="356" width="446">

<script>

            var collapsed = true;

            function toggle() {

                var fs = top.document.getElementsByTagName('frameset')[0];

                var f = fs.getElementsByTagName('frame');

                if (collapsed) {

                    fs.rows = '250px,*';

                    fs.noResize = false;

                    f[0].noResize = false;

                    f[1].noResize = false;

                } else {

                    fs.rows = '30px,*';

                    fs.noResize = true;

                    f[0].noResize = true;

                    f[1].noResize = true;

                }

                collapsed = !collapsed;

            }

</script>

<script>

            var b = document.body;

            var c = document.getElementsByTagName('canvas')[0];

            var a = c.getContext('2d');

            document.body.clientWidth;

</script>

<script>

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)

</script>

</body>

</html>

3.选择快捷键Ctrl+S保存(前面的名字可以随便改,但是后缀的html不要改)

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

5.运行效果

二、记事本txt保存运行 

 1.桌面新建一个txt文件

2.把如下代码复制进去

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<html>

<head>

<title>圣诞树</title>

<meta charset="utf-8" >

<style>

html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }

div { margin: 0; padding: 0; border: 0; }

.nav {

        position: absolute;

        top: 0;

                left: 0;

                width: 100%;

                height: 27px;

                background-color: white;

                color: black;

                text-align: center;

                line-height: 25px;

            }

            a { color: black; text-decoration: none; border-bottom: 1px dashed black; }

            a:hover { border-bottom: 1px solid red; }

            .previous { float: left; margin-left: 10px; }

            .next { float: right; margin-right: 10px; }

            .green { color: green; }

            .red { color: red; }

            textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }

            .block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }

            .block-inner { height: 68%; }

            .one { border: 0; }

</style>

    </head>

    <body marginwidth="0" marginheight="0">

    <canvas id="c" height="356" width="446">

<script>

            var collapsed = true;

            function toggle() {

                var fs = top.document.getElementsByTagName('frameset')[0];

                var f = fs.getElementsByTagName('frame');

                if (collapsed) {

                    fs.rows = '250px,*';

                    fs.noResize = false;

                    f[0].noResize = false;

                    f[1].noResize = false;

                } else {

                    fs.rows = '30px,*';

                    fs.noResize = true;

                    f[0].noResize = true;

                    f[1].noResize = true;

                }

                collapsed = !collapsed;

            }

</script>

<script>

            var b = document.body;

            var c = document.getElementsByTagName('canvas')[0];

            var a = c.getContext('2d');

            document.body.clientWidth;

</script>

<script>

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)

</script>

</body>

</html>

3.复制进去后点击文件----另存为

 4.文件名改为任意,后缀要为html

保存类型就选择所有文件就好,或者有html类型的就选择html类型就好了

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

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 :
相关文章
  • HTML+CSS实现炫酷登录切换

    HTML+CSS实现炫酷登录切换
    效果演示 实现了一个登录注册页面的切换效果,当用户点击登录或注册按钮时,会出现一个叠加层,其中包含一个表单,用户可以在表单中
  • 圣诞节制作一颗HTML的圣诞树介绍

    圣诞节制作一颗HTML的圣诞树介绍
    来到圣诞节了,那么就可以制作一颗HTML的圣诞树送给朋友,没有编程基础的小白也可以按照步骤操作也可以运行起来代码的 一、vscode里面运
  • 将html的radio单选框自定义样式为正方形和对号的

    将html的radio单选框自定义样式为正方形和对号的
    将html的radio单选框自定义样式为正方形和对号 背景: 如何能把html的input type=radio name=option改成自定义的样式呢?比如想要把他变成正方形,
  • HTML文档类型声明标签介绍(入门级教程)

    HTML文档类型声明标签介绍(入门级教程)
    一、文档类型声明标签 /DOCTYPE其作用就是告诉浏览器使用哪种HTML版本来显示网页。 代码:/DOCTYPE html的意思是采用HTML5版本来显示网页 需要
  • HTML介绍以及常用代码总结介绍

    HTML介绍以及常用代码总结介绍
    HTML 网页基础 html(Hyper Text Markup Language)超文本标 记语言,发明者: Tim Berners-lee html主要是定义网页内容和结构的。html是编 写网页的语言。
  • HTML嵌入CSS样式的四种实现方法

    HTML嵌入CSS样式的四种实现方法
    CSS 样式既可以作为单独的文件(.css类型的文件)引入到 HTML 文档中,也可以直接写在 HTML 文档中,大致分为如下四种方法: 行内样式:使
  • html中的target属性介绍

    html中的target属性介绍
    target target属性可选四种属性值 1、target=_self, 它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。(此处就是实现你的每次跳转
  • HTML的img元素无法显示base64图片的原因介绍
    如果使用 base64 编码的图片在 HTML 的 img 元素中无法显示,可能有以下几个原因: 1、语法错误:img 元素中的 src 属性必须以 data: 开头,后面
  • html实现iframe全屏的代码
    html浏览器全屏操作,基于jquery iframe全屏、指定标签全屏 实现 css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 /** 全屏*/ .lay-dbclick-box
  • html页面点击按钮实现页面跳转功能
    方法1、在button标签外嵌套一个a标签,利用超链接进行跳转; 1 2 3 a href=https://www.baidu.com/ target=_blank button进入baidu首页/button /a 方法2、在but
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计