เป็นวันคริสต์มาส ดังนั้นคุณสามารถสร้างต้นคริสต์มาส HTML และมอบให้กับเพื่อน ๆ ของคุณได้ มือใหม่ที่ไม่มีพื้นฐานด้านการเขียนโปรแกรมก็สามารถทำตามขั้นตอนและรันโค้ดได้
1. เปิด vscoede และสร้างไฟล์ข้อความใหม่
2. จากนั้นคัดลอกโค้ดต่อไปนี้ลงไป
<html>
<หัว>
<title>ต้นคริสต์มาส</title>
<meta charset="utf-8">
<สไตล์>
html, เนื้อความ { ความกว้าง: 100%; ความสูง: 100%; ระยะขอบ: 0;
div { ระยะขอบ: 0; การขยาย: 0;
.nav {
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ส่วนสูง: 27px;
สีพื้นหลัง: สีขาว;
สี: สีดำ;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูงของบรรทัด: 25px;
-
a { สี: สีดำ; การตกแต่งข้อความ: ไม่มี; ขอบล่าง: 1px ประดำ;
a:hover { ขอบล่าง: 1px สีแดงทึบ;
.previous { ลอย: ซ้าย; ขอบซ้าย: 10px;
.next { ลอย: ขวา; ขอบขวา: 10px;
.เขียว { สี: เขียว;
.red { สี: แดง;
พื้นที่ข้อความ { ความกว้าง: 100%; ความสูง: 100%; เส้นขอบ: 0; ระยะขอบ: 0;
.block-outer { ลอย: ซ้าย; ความกว้าง: 22%; ความสูง: 100%; การขยายขอบ: 1px ทึบสีดำ;
.block-inner { ความสูง: 68%;
.one { เส้นขอบ: 0; }
</สไตล์>
</หัว>
<ความกว้างของขอบลำตัว = "0" ความสูงขอบ = "0">
<canvas id="c" height="356" width="446">
<สคริปต์>
var ยุบ = จริง;
ฟังก์ชั่นสลับ () {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('เฟรม');
ถ้า (ยุบ) {
fs.rows = '250px,*';
fs.noResize = เท็จ;
f[0].noResize = เท็จ;
f[1].noResize = เท็จ;
} อื่น {
fs.rows = '30px,*';
fs.noResize = จริง;
f[0].noResize = จริง;
f[1].noResize = จริง;
-
ยุบ = !ยุบ;
-
</สคริปต์>
<สคริปต์>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</สคริปต์>
<สคริปต์>
M=คณิตศาสตร์;Q=M.สุ่ม;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)กับ(M[k]=k?cc loneNode(0):c){width=height=k?32:W=446;กับ(getContext('2d'))if(k>10|!k)for(font='60px ผลกระทบ',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(Ui/3,24-i/2,k==13?4-(i++)/2:8 -i++,0,M.PI*2,1)));อื่น ๆ สำหรับ(;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;)ถ้า( D<1)beginPath(จังหวะสไตล์=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,เส้นถึง(U+x* U,U+y*U),สโตรก();สำหรับ(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)ผลตอบแทน(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);สำหรับ(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*T(ง)>>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)
</สคริปต์>
</ร่างกาย>
</html>3. เลือกปุ่มลัด Ctrl+S เพื่อบันทึก (ชื่อเดิมสามารถเปลี่ยนได้ตามต้องการ แต่ไม่ควรเปลี่ยนส่วนต่อท้าย html)
4. เรียกใช้ที่นี่เพื่อเริ่มการแก้ไขข้อบกพร่อง เลือกเบราว์เซอร์ใดก็ได้ที่จะเรียกใช้ (ฉันมี Chrome ดังนั้นฉันจึงเลือก Google Chrome เพื่อเรียกใช้)
5. ผลการดำเนินงาน
1. สร้างไฟล์ txt ใหม่บนเดสก์ท็อป
2. คัดลอกโค้ดต่อไปนี้ลงไป
<html>
<หัว>
<title>ต้นคริสต์มาส</title>
<meta charset="utf-8">
<สไตล์>
html, เนื้อความ { ความกว้าง: 100%; ความสูง: 100%; ระยะขอบ: 0;
div { ระยะขอบ: 0; การขยาย: 0;
.nav {
ตำแหน่ง: แน่นอน;
ด้านบน: 0;
ซ้าย: 0;
ความกว้าง: 100%;
ส่วนสูง: 27px;
สีพื้นหลัง: สีขาว;
สี: สีดำ;
การจัดแนวข้อความ: กึ่งกลาง;
ความสูงของบรรทัด: 25px;
-
a { สี: สีดำ; การตกแต่งข้อความ: ไม่มี; ขอบล่าง: 1px ประดำ;
a:hover { ขอบล่าง: 1px สีแดงทึบ;
.previous { ลอย: ซ้าย; ขอบซ้าย: 10px;
.next { ลอย: ขวา; ขอบขวา: 10px;
.เขียว { สี: เขียว;
.red { สี: แดง;
พื้นที่ข้อความ { ความกว้าง: 100%; ความสูง: 100%; เส้นขอบ: 0; ระยะขอบ: 0;
.block-outer { ลอย: ซ้าย; ความกว้าง: 22%; ความสูง: 100%; การขยายขอบ: 1px ทึบสีดำ;
.block-inner { ความสูง: 68%;
.one { เส้นขอบ: 0; }
</สไตล์>
</หัว>
<ความกว้างของขอบลำตัว = "0" ความสูงขอบ = "0">
<canvas id="c" height="356" width="446">
<สคริปต์>
var ยุบ = จริง;
ฟังก์ชั่นสลับ () {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('เฟรม');
ถ้า (ยุบ) {
fs.rows = '250px,*';
fs.noResize = เท็จ;
f[0].noResize = เท็จ;
f[1].noResize = เท็จ;
} อื่น {
fs.rows = '30px,*';
fs.noResize = จริง;
f[0].noResize = จริง;
f[1].noResize = จริง;
-
ยุบ = !ยุบ;
-
</สคริปต์>
<สคริปต์>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth;
</สคริปต์>
<สคริปต์>
M=คณิตศาสตร์;Q=M.สุ่ม;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200 ;)กับ(M[k]=k?cc loneNode(0):c){width=height=k?32:W=446;กับ(getContext('2d'))if(k>10|!k)for(font='60px ผลกระทบ',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(Ui/3,24-i/2,k==13?4-(i++)/2:8 -i++,0,M.PI*2,1)));อื่น ๆ สำหรับ(;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;)ถ้า( D<1)beginPath(จังหวะสไตล์=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8) ,เส้นถึง(U+x* U,U+y*U),สโตรก();สำหรับ(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)ผลตอบแทน(m[2]-l[2])*A+(l[0]-m[0])*T(D) ;a.clearRect(0,0,W ,W);J.sort(G);สำหรับ(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2 ]*T(ง)>>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)
</สคริปต์>
</ร่างกาย>
</html>3. หลังจากคัดลอกแล้ว ให้คลิก File----Save As
4. เปลี่ยนชื่อไฟล์เป็นอะไรก็ได้ และส่วนต่อท้ายควรเป็น html
เพียงเลือกไฟล์ทั้งหมดเป็นประเภทการบันทึก หรือหากมีประเภท html ให้เลือกประเภท html
5. นี่คือการเรนเดอร์หลังจากบันทึก
6. ดับเบิลคลิกเพื่อเปิดเพื่อดูเอฟเฟกต์การวิ่ง
นี่เป็นการสรุปบทความเกี่ยวกับการสร้างต้นคริสต์มาส HTML สำหรับคริสต์มาส สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการสร้างต้นคริสต์มาส HTML โปรดค้นหาบทความก่อนหน้าใน downcodes.com หรืออ่านบทความที่เกี่ยวข้องด้านล่าง ฉันหวังว่าคุณจะสนับสนุนฉันในอนาคต downcodes.com!