耀极客论坛

 找回密码
 立即注册
查看: 517|回复: 0

HTML中用JS实现旋转的圣诞树

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-9 01:15:30 | 显示全部楼层 |阅读模式
  这篇文章介绍了HTML中用JS实现旋转的圣诞树,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  1. ‹!DOCTYPE HEML PUBLIC>
  2. ‹html>
  3.     ‹head>
  4.     ‹meta charset="utf-8">
  5.     ‹title>
  6.         From ZXW-NUDT
  7.     ‹/title>
  8.         ‹style>
  9.             body{text-align:center}
  10.             html, body
  11.             {
  12.                 width: 100%;
  13.                 height: 100%;
  14.                 margin: 0;
  15.                 padding: 0;
  16.                 border: 0;
  17.             }
  18.             
  19.             div
  20.             {
  21.                 margin: 0;
  22.                 padding: 0;
  23.                 border: 0;
  24.             }
  25.             .nav
  26.             {
  27.                 position: absolute;
  28.                 top: 0;
  29.                 left: 0;
  30.                 width: 100%;
  31.                 height: 27px;
  32.                 background-color: white;
  33.                 color: black;
  34.                 text-align: center;
  35.                 line-height: 25px;
  36.             }
  37.             a
  38.             {
  39.                 color: black;
  40.                 text-decoration: none;
  41.                 border-bottom: 1px dashed black;
  42.             }
  43.             a:hover
  44.             {
  45.                 border-bottom: 1px solid red;
  46.             }
  47.             .previous
  48.             {
  49.                 float: left;
  50.                 margin-left: 10px;
  51.             }
  52.             .next
  53.             {
  54.                 float: right;
  55.                 margin-right: 10px;
  56.             }
  57.             .green
  58.             {
  59.                 color: green;
  60.             }
  61.             .red
  62.             {
  63.                 color: red;
  64.             }
  65.             textarea
  66.             {
  67.                 width: 100%;
  68.                 height: 100%;
  69.                 border: 0;               
  70.                 padding: 0;               
  71.                 margin: 0;               
  72.                 padding-bottom: 20px;              
  73.             }
  74.             .block-outer            
  75.             {               
  76.                 float: left;               
  77.                 width: 22%;               
  78.                 height: 100%;               
  79.                 padding: 5px;               
  80.                 border-left: 1px solid black;               
  81.                 margin: 30px 3px 3px 3px;               
  82.             }
  83.             .block-inner            
  84.             {               
  85.                 height: 68%;               
  86.             }
  87.             .one
  88.             {               
  89.                 border: 0;               
  90.             }
  91.         ‹/style>
  92.     ‹/head>
  93. ‹body marginwidth="0" marginheight="0">
  94.     ‹canvas id="c" height="356" width="446">
  95.     ‹script>
  96.         var collapsed = true;
  97.         function toggle()
  98.         {
  99.             var fs = top.document.getElementsByTagName('frameset')[0];
  100.             var f = fs.getElementsByTagName('frame');
  101.             if (collapsed)
  102.             {
  103.                 fs.rows = '250px,*';
  104.                 fs.noResize = false;
  105.                 f[0].noResize = false;
  106.                 f[1].noResize = false;
  107.             }
  108.             else
  109.             {
  110.                 fs.rows = '30px,*';
  111.                 fs.noResize = true;
  112.                 f[0].noResize = true;
  113.                 f[1].noResize = true;
  114.             }
  115.             collapsed = !collapsed;
  116.         }
  117.     ‹/script>
  118.     ‹script>
  119.         var b = document.body;
  120.         var c = document.getElementsByTagName('canvas')[0];
  121.         var a = c.getContext('2d');
  122.         document.body.clientWidth;
  123.     ‹/script>
  124.     ‹script>
  125.         M=Math;
  126.         Q=M.random;J=[];
  127.         U=16;
  128.         T=M.sin;
  129.         E=M.sqrt;
  130.         for(O=k=0;x=z=j=i=k‹200;)
  131.         with(M[k]=k?c.cloneNode(0):c)
  132.         {   
  133.             width=height=k?32:W=446;
  134.             with(getContext('2d'))
  135.             if(k>10|!k)
  136.             for(
  137.             font='60px Impact',
  138.             V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':
  139.             V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i‹7;)
  140.             beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));
  141.             else for(;
  142.             x=T(i),        
  143.             y=Q()*2-1,        
  144.             D=x*x+y*y,        
  145.             B=E(D-x/.9-1.5*y+1),        
  146.             R=67*(B+1)*(L=k/9+.8)>>1,        
  147.             i++‹W;        
  148.             )
  149.             if(D‹1)   
  150.             beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),        
  151.             moveTo(U+x*8,U+y*8),        
  152.             lineTo(U+x*U,U+y*U),        
  153.             stroke();
  154.             for(        
  155.             y=H=k+E(k++)*25,        
  156.             R=Q()*W;        
  157.             P=3,j‹H;)   
  158.             J[O++]=[
  159.                 x+=T(R)*P+Q()*6-3,y+=Q()*U-8,
  160.                 z+=T(R-11)*P+Q()*6-3,
  161.                 j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]
  162.         }
  163.         setInterval(function G(m,l)
  164.         {   
  165.             A=T(D-11);   
  166.             if(l)
  167.             return(        
  168.             m[2]-l[2])*A+(l[0]-m[0])*T(D);        
  169.             a.clearRect(0,0,W,W);        
  170.             J.sort(G);
  171.             for(
  172.             i=0;
  173.             L=J[i++];
  174.             a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1))   
  175.             {
  176.                 if(i==2e3)
  177.                 a.fillText
  178.                 ('Happy Christmas!',U,345);
  179.                 if(!(i%7))        
  180.                 a.drawImage(M[13],
  181.                 ((157*(i*i)+T(D*5+i*i)*5)%W)>>0,
  182.                 ((113*i+(D*i)/60)%(290+i/99))>>0);
  183.             }   
  184.             D+=.02
  185.         },1)
  186.     ‹/script>
  187. ‹/body>
  188. ‹/html>
复制代码
  关于加上背景音乐的事情 假设和本html文件有个文件夹名字是music,文件夹下有个音频文件是music.mp3。那么代码应该为:
  1. ‹audio src="music/music.mp3"  autoplay="autoplay" loop="loop">‹/audio>
复制代码
  1.     src是地址
  2.     autoplay默认播放
  3.     loop默认循环
复制代码
  更换背景应该是(反正我没试过):
  1. ‹div class="image">‹img src="images.jpg" alt="" />‹/div>‹div class="content">
复制代码
  到此这篇关于HTML中用JS实现旋转的圣诞树的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 10:22 , Processed in 0.074595 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

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