Дизайн сцен 2

Использование системы в различных ситуациях, вопросы программирования сценариев.

Модератор: immortal

Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Дизайн сцен 2

Сообщение nick7zmail » Вс май 28, 2017 9:30 am

AlexandrPrimes писал(а): Заставлять вас не имею права. Но хотелось б уговорить :)
как видите желающих на форуме нет.
Желающие просто так потратить 3 часа своей жизни просто за спасибо - думаю врят ли найдутся))
Уговорить помогает как правило хотя бы символическая оплата труда...тогда уже не один желающий будет))
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
ppc
Сообщения: 5
Зарегистрирован: Пт фев 07, 2014 2:47 pm
Благодарил (а): 1 раз
Поблагодарили: 0

Re: Дизайн сцен 2

Сообщение ppc » Вт май 30, 2017 3:44 am

AlexandrPrimes писал(а):Уважаемые форумчане помогите а вернее кто напишет код для видоизменения сцены?
Сделать блок с погодой и блок с календарём.
Вложение Сцена.jpg больше недоступно
код календаря
СпойлерПоказать

Код: Выделить всё

<style>
#calendar2 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar2 thead tr:last-child {
  font-size: small;
  color: rgb(85, 85, 85);
}
#calendar2 thead tr:nth-child(1) td:nth-child(2) {
  color: rgb(50, 50, 50);
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
  cursor: pointer;
}
#calendar2 tbody td {
  color: rgb(44, 86, 122);
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
  color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
  background: rgb(220, 0, 0);
  color: #fff;
}
</style>

<table id="calendar2">
  <thead>
    <tr><td>‹<td colspan="5"><td>›
    <tr><td>Пн<td>Вт<td>Ср<td>Чт<td>Пт<td>Сб<td>Вс
  <tbody>
</table>

<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    calendar += '<td>' + i;
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}
</script>
Вложения
1.PNG
1.PNG (18.02 КБ) 9186 просмотров
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Дизайн сцен 2

Сообщение nick7zmail » Вт май 30, 2017 6:06 am

Такой то календарик и я нашел, вставил (именно такой же, а не похожий)) с одного сайта брали)...автору поста - разукрасить надо...я даже начал это делать...но быстро надоело)) могу скинуть что получилось, когда дома буду...закончите сами))

Отправлено с моего Xperia Z через Tapatalk
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
Аватара пользователя
nick7zmail
Сообщения: 7573
Зарегистрирован: Пн окт 28, 2013 8:14 am
Откуда: Екатеринбург
Благодарил (а): 121 раз
Поблагодарили: 2010 раз

Re: Дизайн сцен 2

Сообщение nick7zmail » Вт май 30, 2017 8:57 pm

Вот что начинал набрасывать)) минут 40 где-то потратил...может больше...потом надоело))
Подобрал по высоте верхнюю строку, цвета, дни недели...
11.jpg
11.jpg (20.17 КБ) 9132 просмотра
Осталось фон дней, белые границы таблицы, скругления, и т.п....короче мучайтесь сами)
СпойлерПоказать
код css

Код: Выделить всё

#calendar2 {
  width: 100%;
  font: monospace;
  line-height: 1.2em;
  font-size: 15px;
  text-align: center;
}
#calendar2 thead tr:nth-child(1) td:nth-child(1):hover, #calendar2 thead tr:nth-child(1) td:nth-child(3):hover {
  cursor: pointer;
}
#calendar2 tbody td {
  color: rgb(44, 86, 122);
}
#calendar2 tbody td:nth-child(n+6), #calendar2 .holiday {
  color: rgb(231, 140, 92);
}
#calendar2 tbody td.today {
  background: rgba(0, 233, 233, 0.6);
  color: #fff;
}

tr.row_days {
font-size: 8px;
background: red;
color: white; 
line-height: 1em;
}

tr.row_title { 
color: white; 
background-color: rgba(0, 233, 233, 0.6);
font-size: 22px;
line-height: 24px;
}
И код самого элемента

Код: Выделить всё

<table id="calendar2">
  <thead>
    <tr class="row_title"><td>‹<td colspan="5"><td>›
    <tr class="row_days"><td>ПН<td>ВТ<td>СР<td>ЧТ<td>ПТ<td>СБ<td>ВС
  <tbody>
</table>

<script>
function Calendar2(id, year, month) {
var Dlast = new Date(year,month+1,0).getDate(),
    D = new Date(year,month,Dlast),
    DNlast = new Date(D.getFullYear(),D.getMonth(),Dlast).getDay(),
    DNfirst = new Date(D.getFullYear(),D.getMonth(),1).getDay(),
    calendar = '<tr>',
    month=["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"];
if (DNfirst != 0) {
  for(var  i = 1; i < DNfirst; i++) calendar += '<td>';
}else{
  for(var  i = 0; i < 6; i++) calendar += '<td>';
}
for(var  i = 1; i <= Dlast; i++) {
  if (i == new Date().getDate() && D.getFullYear() == new Date().getFullYear() && D.getMonth() == new Date().getMonth()) {
    calendar += '<td class="today">' + i;
  }else{
    calendar += '<td>' + i;
  }
  if (new Date(D.getFullYear(),D.getMonth(),i).getDay() == 0) {
    calendar += '<tr>';
  }
}
for(var  i = DNlast; i < 7; i++) calendar += '<td>&nbsp;';
document.querySelector('#'+id+' tbody').innerHTML = calendar;
document.querySelector('#'+id+' thead td:nth-child(2)').innerHTML = month[D.getMonth()] +' '+ D.getFullYear();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.month = D.getMonth();
document.querySelector('#'+id+' thead td:nth-child(2)').dataset.year = D.getFullYear();
if (document.querySelectorAll('#'+id+' tbody tr').length < 6) {  // чтобы при перелистывании месяцев не "подпрыгивала" вся страница, добавляется ряд пустых клеток. Итог: всегда 6 строк для цифр
    document.querySelector('#'+id+' tbody').innerHTML += '<tr><td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;<td>&nbsp;';
}
}
Calendar2("calendar2", new Date().getFullYear(), new Date().getMonth());
// переключатель минус месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(1)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)-1);
}
// переключатель плюс месяц
document.querySelector('#calendar2 thead tr:nth-child(1) td:nth-child(3)').onclick = function() {
  Calendar2("calendar2", document.querySelector('#calendar2 thead td:nth-child(2)').dataset.year, parseFloat(document.querySelector('#calendar2 thead td:nth-child(2)').dataset.month)+1);
}
</script>
Raspberry Pi3+Broadlink+esp8266 (blynk)+AMS
Если вам помогло какое-либо сообщение - не забывайте пользоваться кнопкой "СПАСИБО".
:arrow: Услуги в профиле коннект
>>>>>Мой новый канал на ютутбе, подписывайтесь!<<<<<
vshuka911
Сообщения: 76
Зарегистрирован: Пт июн 02, 2017 11:02 am
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение vshuka911 » Пт июн 02, 2017 11:08 am

Уважаемые форумчане! А как создать ежечасный метод если его нет?
Jilber
Сообщения: 682
Зарегистрирован: Ср май 03, 2017 7:41 pm
Благодарил (а): 111 раз
Поблагодарили: 107 раз

Re: Дизайн сцен 2

Сообщение Jilber » Пт июн 02, 2017 11:13 am

vshuka911 писал(а):Уважаемые форумчане! А как создать ежечасный метод если его нет?
Создать метод класса.
СпойлерПоказать
1.jpg
1.jpg (44.01 КБ) 8912 просмотров
vshuka911
Сообщения: 76
Зарегистрирован: Пт июн 02, 2017 11:02 am
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение vshuka911 » Пт июн 02, 2017 12:26 pm

Извените может я не коректно выразился но как метод он есть а вот в виде дерева он не появляется
vshuka911
Сообщения: 76
Зарегистрирован: Пт июн 02, 2017 11:02 am
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение vshuka911 » Пт июн 02, 2017 12:29 pm

Извените может я не коректно выразился но как метод он есть а вот в виде дерева он не появляется
Вложения
ckock.JPG
ckock.JPG (17.35 КБ) 8891 просмотр
Jilber
Сообщения: 682
Зарегистрирован: Ср май 03, 2017 7:41 pm
Благодарил (а): 111 раз
Поблагодарили: 107 раз

Re: Дизайн сцен 2

Сообщение Jilber » Пт июн 02, 2017 12:30 pm

vshuka911 писал(а):Извените может я не коректно выразился но как метод он есть а вот в виде дерева он не появляется
Он там есть. Надо открыть закладку "Методы" в конкретном объекте. Просто этот метод объекта "ClockChime" видимо не содержит кода.
СпойлерПоказать
1.jpg
1.jpg (27.28 КБ) 8887 просмотров
vshuka911
Сообщения: 76
Зарегистрирован: Пт июн 02, 2017 11:02 am
Благодарил (а): 10 раз
Поблагодарили: 1 раз

Re: Дизайн сцен 2

Сообщение vshuka911 » Пт июн 02, 2017 12:40 pm

спасибо разобрался ты прав просто не было кода
Ответить