توضح أمثلة هذه المقالة كيفية عمل تقويم بسيط من قِبل JS. شاركه للرجوع إليه. التفاصيل كما يلي:
لقد تعلمت اليوم كيفية استخدام JS لإنشاء تقويم سنوي ، واستعرضت استخدام هذا. إنه مختلف بعض الشيء عن إنتاج علامات التبويب. لقد استخدمت innerhtml للاستخدام الجديد. آمل أن أتمكن من التمسك به. سأقدم لك المزيد من النصائح من جميع أسياد JS.
استخدام innerhtml
الآن استخدم top.innerhtml = "....." ؛ طريقة لكتابة رمز HTML إلى موقع هذا المعرف.
على سبيل المثال ، top.innerhtml = "" ؛ يمكن أن تظهر زر في الموضع المقابل من أعلى!
أفكار تنفيذ البرنامج:
1. على غرار علامة التبويب ، باستثناء أن هناك div في الأسفل ؛
2. استخدام innerhtml
3. استخدام المصفوفات
① التعريف: ARR [0،1،2،3]
② استخدم: ARR [0]
4. اتصال السلسلة
① الوظيفة: Concatenate سلسلتين "+"
② المشكلة: استخدم () لحل الأولوية في الاتصال
تنفيذ رمز المصدر:
جافا سكريبت:
انسخ الرمز كما يلي: <script type = "text/javaScript">
window.onload = function ()
{
var arr = [
إنها العام الجديد تقريبًا ، دعنا ننطلق من ألعاب نارية معًا! '،
"سأذهب إلى المدرسة قريبًا ، غير سعيد! '،
'يوم المرأة السعيد! '،
"إنه ممل جدا أبريل" ،
"العمل مجيد! '،
'يوم طفل سعيد! '،
"يا له من يوليو حار!" ،
"يوم الجيش الأول من أغسطس!" ،
بدأت المدرسة مرة أخرى! '
] ؛
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 {على غرار القائمة: لا شيء ؛ }
body {background: #f6f9fc ؛ Font-Family: Arial ؛ }
.Calendar {العرض: 210px ؛
الهامش: 50 بكسل Auto 0 ؛
Padding: 10px 10px 20px 20px ؛
الخلفية: #eae9e9 ؛ }
.Calendar ul {width: 210px ؛
الفائض: مخفي.
حشوة القاع: 10 بكسل ؛ }
.calendar li {float: Left ؛
العرض: 58 بكسل ؛
الارتفاع: 54 بكسل ؛
الهامش: 10px 10px 0 0 ؛
الحدود: 1px الصلبة #FFF ؛
الخلفية: #424242 ؛
اللون: #ffff ؛
محاذاة النص: المركز ؛
المؤشر: مؤشر. }
.calendar li h2 {font-size: 20px ؛ حشو أعلى: 5 بكسل ؛ }
.calendar li p {font-size: 14px ؛ }
.calendar .active {border: 1px Solid #424242 ؛
الخلفية: #ffff ؛
اللون: #e84a7e ؛ }
.Calendar .active H2 {}
.calendar .active p {font-weight: Bold ؛ }
.calendar .Text {العرض: 178px ؛
الحشو: 0 10px 10px ؛
الحدود: 1px الصلبة #FFF ؛
الحشو أعلى: 10 بكسل ؛
الخلفية: #f1f1f1 ؛
اللون: #555 ؛ }
.calendar .Text H2 {font-size: 14px ؛ هامش القاع: 10 بكسل ؛ }
.calendar .Text p {font-size: 12px ؛ ارتفاع الخط: 18 بكسل ؛ }
</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> March </p> </li>
<li> <h2> 4 </h2> <p> April </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>
<viv>
</div>
</div>
</body>
العروض كما يلي:
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.