В этой статье примеры показывают, как сделать простой календарь JS. Поделитесь этим для вашей ссылки. Детали следующие:
Сегодня я научился использовать JS для создания годового календаря, и рассмотрел использование этого. Это немного отличается от производства вкладок. Я использовал innerhtml для нового использования. Надеюсь, я смогу придерживаться этого. Я дам вам больше советов от всех мастеров JS.
Использование Innerhtml
Теперь используйте top.innerhtml = "....."; Метод для написания HTML -кода в местоположение этого идентификатора.
Например, top.innerhtml = ""; может появиться кнопка в соответствующем положении сверху!
Идеи реализации программы:
1. Подобно вкладке, за исключением того, что внизу существует дивизион;
2. Использование Innerhtml
3. Использование массивов
① Определение: arr [0,1,2,3]
② Использование: arr [0]
4. Строковое соединение
① Функция: объединить две строки "+"
② Проблема: Использовать () для решения приоритета в соединении
Реализуйте исходный код:
JavaScript:
Скопируйте код следующим образом: <script type = "text/javascript">
window.onload = function ()
{
var arr = [
«Это почти Новый год, давайте вместе отправимся в съемку! ',
«Я скоро пойду в школу, несчастный! ',
«Счастливого женского дня! ',
«Это довольно скучно апрель»,
«Труд великолепен! ',
«Счастливого детского дня! ',
«Какой горячий июль!»,
'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 {Список-стиль: нет; }
Body {founale: #f6f9fc; Семейство шрифта: ариальная; }
.calendar {ширина: 210px;
Маржа: 50px Auto 0;
Заполнение: 10px 10px 20px 20px;
Фон: #eae9e9; }
.calendar ul {ширина: 210px;
переполнение: скрыто;
надоеволос: 10px; }
.calendar li {float: Left;
Ширина: 58px;
Высота: 54px;
Запас: 10px 10px 0 0;
Граница: 1px solid #fff;
Фон: #424242;
Цвет: #ffff;
Текст-альбом: Центр;
курсор: указатель; }
.calendar li H2 {font-size: 20px; надоеволок: 5px; }
.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 solid #fff;
надоеволок: 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> may </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.