ตัวอย่างบทความนี้แสดงให้เห็นถึงวิธีการสร้างปฏิทินง่ายๆโดย JS แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
วันนี้ฉันได้เรียนรู้วิธีการใช้ JS เพื่อสร้างปฏิทินประจำปีและตรวจสอบการใช้งานนี้ มันแตกต่างจากการผลิตแท็บเล็กน้อย ฉันใช้ InnerHTML สำหรับการใช้งานใหม่ ฉันหวังว่าฉันจะยึดติดกับมันได้ ฉันจะให้คำแนะนำเพิ่มเติมจาก JS Masters ทั้งหมด
การใช้งานของ innerhtml
ตอนนี้ใช้ top.innerhtml = "..... "; วิธีการเขียนรหัส HTML ไปยังตำแหน่งของ ID นี้
ตัวอย่างเช่น top.innerhtml = ""; สามารถปรากฏปุ่มในตำแหน่งที่สอดคล้องกันของด้านบน!
แนวคิดการใช้งานโปรแกรม:
1. คล้ายกับแท็บยกเว้นว่ามี div ที่ด้านล่าง;
2. การใช้ innerhtml
3. การใช้อาร์เรย์
①คำจำกัดความ: arr [0,1,2,3]
②ใช้: arr [0]
4. การเชื่อมต่อสตริง
①ฟังก์ชั่น: เชื่อมต่อสองสตริง "+"
②ปัญหา: ใช้ () เพื่อแก้ไขลำดับความสำคัญในการเชื่อมต่อ
ใช้ซอร์สโค้ด:
JavaScript:
คัดลอกรหัสดังนี้: <script type = "text/javascript">
window.onload = function ()
-
var arr = [
'มันเป็นปีใหม่ที่เกือบจะออกจาก Firecrackers ด้วยกัน! -
'ฉันจะไปโรงเรียนเร็ว ๆ นี้ไม่มีความสุข! -
'สุขสันต์วันผู้หญิง! -
'มันค่อนข้างน่าเบื่อเดือนเมษายน'
'แรงงานช่างรุ่งโรจน์! -
'สุขสันต์วันเด็ก! -
'ช่างเป็นเดือนกรกฎาคม!',
'วันที่ 1 สิงหาคมวันกองทัพ!',
'โรงเรียนเริ่มต้นอีกครั้ง! -
-
var odiv = document.getElementById ('tab');
var oli = odiv.getElementsByTagname ('li');
var otxt = odiv.getElementsByTagname ('div') [0];
var i = 0;
สำหรับ (var i = 0; i <oli.length; i ++)
-
oli [i] .index = i;
oli [i] .onmouseover = function ()
-
สำหรับ (var i = 0; i <oli.length; i ++)
-
oli [i] .className = '';
-
this.className = 'active';
otxt.innerhtml = '<h2>'+(this.index+1)+'กิจกรรมรายเดือน </h2> <p>'+arr [this.index]+'</p>';
-
-
-
</script>
CSS:
คัดลอกรหัสดังนี้: <style type = "text/css">
* {padding: 0; margin: 0; -
li {list-style: none; -
ร่างกาย {พื้นหลัง: #f6f9fc; Font-Family: Arial; -
.Calendar {width: 210px;
มาร์จิ้น: 50px auto 0;
Padding: 10px 10px 20px 20px;
ความเป็นมา: #EAE9E9; -
.Calendar ul {width: 210px;
ล้น: ซ่อน;
Padding-bottom: 10px; -
.Calendar li {float: ซ้าย;
ความกว้าง: 58px;
ความสูง: 54px;
มาร์จิ้น: 10px 10px 0 0;
ชายแดน: 1px Solid #FFF;
ความเป็นมา: #424242;
สี: #FFFF;
TEXT-ALIGN: CENTER;
เคอร์เซอร์: ตัวชี้; -
.Calendar li h2 {font-size: 20px; Padding-Top: 5px; -
.Calendar li p {ขนาดตัวอักษร: 14px; -
.Calendar .ACTIVE {Border: 1PX Solid #424242;
ความเป็นมา: #FFFF;
สี: #e84a7e; -
.Calendar .Active H2 {}
.Calendar .ACTIVE P {FONT-WEIGHT: BOLD; -
.Calendar .Text {WIDTH: 178PX;
Padding: 0 10px 10px;
ชายแดน: 1px Solid #FFF;
Padding-Top: 10px;
ความเป็นมา: #F1F1F1;
สี: #555; -
.Calendar .Text H2 {FONT-SIZE: 14PX; มาร์จิ้น-ก้น: 10px; -
.Calendar .Text P {FONT-SIZE: 12PX; ความสูงบรรทัด: 18px; -
</style>
html:
คัดลอกรหัสดังนี้: <body>
<div id = "tab">
<ul>
<li> <h2> 1 </h2> <p> มกราคม </p> </li>
<li> <h2> 2 </h2> <p> กุมภาพันธ์ </p> </li>
<li> <h2> 3 </h2> <p> มีนาคม </p> </li>
<li> <h2> 4 </h2> <p> เมษายน </p> </li>
<li> <h2> 5 </h2> <p> อาจ </p> </li>
<li> <h2> 6 </h2> <p> มิถุนายน </p> </li>
<li> <h2> 7 </h2> <p> กรกฎาคม </p> </li>
<li> <h2> 8 </h2> <p> สิงหาคม </p> </li>
<li> <h2> 9 </h2> <p> กันยายน </p> </li>
<li> <h2> 10 </h2> <p> ตุลาคม </p> </li>
<li> <h2> 11 </h2> <p> พฤศจิกายน </p> </li>
<li> <h2> 12 </h2> <p> ธันวาคม </p> </li>
</ul>
<div>
</div>
</div>
</body>
การเรนเดอร์มีดังนี้:
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน