إنه عيد الميلاد، لذا يمكنك إنشاء شجرة عيد الميلاد بتنسيق HTML وإعطائها لأصدقائك الذين ليس لديهم خلفية برمجية، ويمكنهم أيضًا اتباع الخطوات وتشغيل التعليمات البرمجية.
1. افتح vscoede وقم بإنشاء ملف نصي جديد
2. ثم انسخ الكود التالي فيه
<أتش تي أم أل>
<الرأس>
<title>شجرة عيد الميلاد</title>
<ميتا محارف = "utf-8">
<نمط>
html، الجسم { العرض: 100٪ الارتفاع: 100٪؛ الحشو: 0؛
شعبة { الهامش: 0؛ الحدود: 0 }
التنقل {
الموقف: مطلق؛
أعلى: 0؛
اليسار: 0؛
العرض: 100%؛
الارتفاع: 27 بكسل؛
لون الخلفية: أبيض؛
اللون: أسود؛
محاذاة النص: مركز؛
ارتفاع الخط: 25 بكسل؛
}
أ { اللون: أسود، زخرفة النص: لا شيء؛
أ: تحوم { الحدود السفلية: 1 بكسل أحمر خالص }
.السابق { تعويم: الهامش الأيسر: 10 بكسل }
.التالي { تعويم: يمين؛ الهامش الأيمن: 10 بكسل }
.أخضر { اللون: أخضر }
.أحمر { اللون: أحمر }
منطقة النص { العرض: 100% الارتفاع: 100% الحدود: 0; الهامش: 0;
.block-outer { float: left; height: 100%;
.كتلة الداخلية { الارتفاع: 68% }
.واحد { الحدود: 0 }
</نمط>
</الرأس>
<body هامش العرض = "0" هامش الارتفاع = "0">
<canvas id = "c" height = "356" width = "446">
<النص البرمجي>
انهار فار = صحيح؛
تبديل الوظيفة () {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
إذا (انهار) {
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} آخر {
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
انهار = !collapsed;
}
</script>
<النص البرمجي>
فار ب = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</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 ;)مع(M[k]=k?c.c LoneNode(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+أنا: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(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,خط إلى(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 ]*ت(د)>>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>
</الجسم>
</html>3. حدد مفتاح الاختصار Ctrl+S للحفظ (يمكن تغيير الاسم السابق حسب الرغبة، ولكن لا ينبغي تغيير اللاحقة html)
4. قم بتشغيل هنا لبدء تصحيح الأخطاء، واختر أي متصفح لتشغيله (لدي كروم، لذلك اخترت Google chrome لتشغيله)
5. تأثير التشغيل
1. قم بإنشاء ملف txt جديد على سطح المكتب
2. انسخ الكود التالي فيه
<أتش تي أم أل>
<الرأس>
<title>شجرة عيد الميلاد</title>
<ميتا محارف = "utf-8">
<نمط>
html، الجسم { العرض: 100٪ الارتفاع: 100٪؛ الحشو: 0؛
شعبة { الهامش: 0؛
التنقل {
الموقف: مطلق؛
أعلى: 0؛
اليسار: 0؛
العرض: 100%؛
الارتفاع: 27 بكسل؛
لون الخلفية: أبيض؛
اللون: أسود؛
محاذاة النص: مركز؛
ارتفاع الخط: 25 بكسل؛
}
أ { اللون: أسود، زخرفة النص: لا شيء؛
أ: تحوم {الحدود السفلية: 1 بكسل أحمر خالص}
.السابق { تعويم: الهامش الأيسر: 10 بكسل }
.next { تعويم: يمين؛ الهامش الأيمن: 10 بكسل }
.أخضر { اللون: أخضر }
.أحمر { اللون: أحمر }
منطقة النص { العرض: 100% الارتفاع: 100% الحدود: 0; الهامش: 0;
.block-outer { float: left; height: 100%;
.كتلة الداخلية { الارتفاع: 68% }
.واحد { الحدود: 0 }
</نمط>
</الرأس>
<body هامش العرض = "0" هامش الارتفاع = "0">
<canvas id = "c" height = "356" width = "446">
<النص البرمجي>
انهار فار = صحيح؛
تبديل الوظيفة () {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
إذا (انهار) {
fs.rows = '250px,*';
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} آخر {
fs.rows = '30px,*';
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
انهار = !collapsed;
}
</script>
<النص البرمجي>
فار ب = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</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 ;)مع(M[k]=k?c.c LoneNode(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+أنا: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(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,خط إلى(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 ]*ت(د)>>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>
</الجسم>
</html>3. بعد نسخه، انقر فوق ملف ---- حفظ باسم
4. قم بتغيير اسم الملف إلى أي شيء، ويجب أن تكون اللاحقة html
ما عليك سوى تحديد جميع الملفات كنوع الحفظ، أو إذا كان هناك نوع html، فما عليك سوى تحديد نوع html.
5. هذا هو العرض بعد الحفظ.
6. انقر نقرًا مزدوجًا لفتحه لعرض تأثير التشغيل.
بهذا نختتم هذه المقالة حول إنشاء شجرة عيد الميلاد بتنسيق HTML لعيد الميلاد لمزيد من المعلومات حول إنشاء شجرة عيد الميلاد بتنسيق HTML، يرجى البحث في المقالات السابقة على موقع downcodes.com أو الاستمرار في تصفح المقالات ذات الصلة أدناه. downcodes.com!