Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   День недели, как вывести на экран? (https://javascript.ru/forum/misc/77226-den-nedeli-kak-vyvesti-na-ehkran.html)

Besprizornik 08.04.2019 09:51

День недели, как вывести на экран?
 
Как вывести в двух спанах расположеных на пустых выпадающих списках сегодняшний день недели?
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>Сегодняшние день недели и дата через элементы формы на JS.</title>
<style>
body { color: #0000a0; font: 14px Georgia, 'Times New Roman', Times, serif; }
h1 { color: #ffffff; font: 16px Georgia, 'Times New Roman', Times, serif; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; -webkit-animation: h-pulsare 1.35s linear infinite; animation: h-pulsare 1.35s linear infinite;}
div { border: 1px solid #999999; padding: 10px; margin-bottom: 10px; }
select { height: 26px; margin: 0; }
input { height: 22px; padding-left: 5px; }
select, input { background: #d7d7ff; color: #0000a0; border: 1px solid #0000a0; font: 16px Georgia, 'Times New Roman', Times, serif; line-height: 0; margin: 5px 3px; }
div.day-grig, div.day-ulian { display: block; padding: 0; margin: 0 auto -10px 2px; border: 1px solid transparent; width: 136px; height: 26px; }
select.day_gr, select.day_ul { position: relative; bottom: 0px; right: 2px; margin: 0 auto -10px 2px; width: 136px; }
span.day_week { position: relative; bottom: 22px; right: -5px; font: 16px Georgia, 'Times New Roman', Times, serif; }
@-webkit-keyframes h-pulsare { 0%, 100% { color: #ffffff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; } 50% { color: #d7d7ff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff, 0 0 30px #ff0055; } } @keyframes h-pulsare { 0%, 100% { color: #ffffff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; } 50% { color: #d7d7ff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff, 0 0 30px #ff0055; } }
</style>
<script> 
var d = new Date(), dayweek = 'Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота'
document.addEventListener('DOMContentLoaded', function() { 
document.querySelector('#date_gr').options[d.getDate()].selected = true;
document.querySelector('#month_gr').options[d.getMonth()+1].selected = true;
document.querySelector('#year_gr').value = d.getFullYear();
d.setDate(d.getDate() - 13);
document.querySelector('#date_ul').options[d.getDate()].selected = true;
document.querySelector('#month_ul').options[d.getMonth()+1].selected = true;
document.querySelector('#year_ul').value = d.getFullYear();
});
</script>
</head><body>
<h1>Конвертирование даты из григорианского календаря в юлианский и обратно.</h1>
<div class="seg_gr">

Сегодня:<br/>
<div class="day-grig"><select class="day_gr" id="day_gr">
</select>
<span class="day_week"></span></div><br>
<select class="date_gr" id="date_gr">
<option value="0"></option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select> 
<select class="month_gr" id="month_gr">
<option value="0"></option><option value="1">января</option><option value="2">февраля</option><option value="3">марта</option><option value="4">апреля</option><option value="5">мая</option><option value="6">июня</option><option value="7">июля</option><option value="8">августа</option><option value="9">сентября</option><option value="10">октября</option><option value="11">ноября</option><option value="12">декабря</option>
</select> 
<input class="year_gr" id="year_gr" type="number" size="4" name="year" min="0" max="2400" step="1" value=""> <i>года</i>.<br/>
по григорианскому календарю<br/>(<i>новый стиль</i>)
</div>
<div class="ul">
Сегодня:<br/>
<div class="day-ulian"><select class="day_ul" id="day_ul">
</select><span class="day_week"></span></div><br>
<select class="date_ul" id="date_ul">
<option value="0"></option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select> 
<select class="month_ul" id="month_ul">
<option value="0"></option><option value="1">января</option><option value="2">февраля</option><option value="3">марта</option><option value="4">апреля</option><option value="5">мая</option><option value="6">июня</option><option value="7">июля</option><option value="8">августа</option><option value="9">сентября</option><option value="10">октября</option><option value="11">ноября</option><option value="12">декабря</option>
</select> 
<input class="year_ul" id="year_ul" type="number" size="4" name="year" min="0" max="2400" step="1" value=""> <i>года</i>.<br/>
по юлианскому календарю<br/>(<i>старый стиль</i>)
</div>
<br/><br/>
</body></html>

Rise 08.04.2019 11:41

Пример не запускается как надо, замени маркеры JS в квадратных скобках на HTML, у тебя же html разметка присутствует, а не просто один js. Форматирование на javascript.ru.
var d = new Date(), dayweek = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'][d.getDay()];
[].forEach.call(document.querySelectorAll('.day_week'), function (el) { el.textContent = dayweek });

Besprizornik 08.04.2019 12:28

Rise,
исправил маркеры в первом посте

исправил код, но не работает, кто не понял вопроса надо вывести текстом сегодняшний день недели в обоих спанах с классом "day_week",пустые вып списки служат вместо фонового изображения

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html><head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
<title>Сегодняшние день недели и дата через элементы формы на JS.</title>
<style>
body { color: #0000a0; font: 14px Georgia, 'Times New Roman', Times, serif; }
h1 { color: #ffffff; font: 16px Georgia, 'Times New Roman', Times, serif; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; -webkit-animation: h-pulsare 1.35s linear infinite; animation: h-pulsare 1.35s linear infinite;}
div { border: 1px solid #999999; padding: 10px; margin-bottom: 10px; }
select { height: 26px; margin: 0; }
input { height: 22px; padding-left: 5px; }
select, input { background: #d7d7ff; color: #0000a0; border: 1px solid #0000a0; font: 16px Georgia, 'Times New Roman', Times, serif; line-height: 0; margin: 5px 3px; }
div.day-grig, div.day-ulian { display: block; padding: 0; margin: 0 auto -10px 2px; border: 1px solid transparent; width: 136px; height: 26px; }
select.day_gr, select.day_ul { position: relative; bottom: 0px; right: 2px; margin: 0 auto -10px 2px; width: 136px; }
span.day_week { position: relative; bottom: 22px; right: -5px; font: 16px Georgia, 'Times New Roman', Times, serif; }
@-webkit-keyframes h-pulsare { 0%, 100% { color: #ffffff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; } 50% { color: #d7d7ff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff, 0 0 30px #ff0055; } } @keyframes h-pulsare { 0%, 100% { color: #ffffff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff; } 50% { color: #d7d7ff; text-shadow: 1px 1px #0005ff, -1px 1px #0005ff, 1px -1px #0005ff, -1px -1px #0005ff, 1px 0px #0005ff, 0px 1px #0005ff, -1px 0px #0005ff, 0px -1px #0005ff, 0 0 30px #ff0055; } }
</style>
<script> 
var d = new Date(), dayweek = ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'][d.getDay()];
[].forEach.call(document.querySelectorAll('.day_week'), function (el) { el.textContent = dayweek });
document.addEventListener('DOMContentLoaded', function() { 
document.querySelector('#date_gr').options[d.getDate()].selected = true;
document.querySelector('#month_gr').options[d.getMonth()+1].selected = true;
document.querySelector('#year_gr').value = d.getFullYear();
d.setDate(d.getDate() - 13);
document.querySelector('#date_ul').options[d.getDate()].selected = true;
document.querySelector('#month_ul').options[d.getMonth()+1].selected = true;
document.querySelector('#year_ul').value = d.getFullYear();
});
</script>
</head><body>
<h1>Конвертирование даты из григорианского календаря в юлианский и обратно.</h1>
<div class="seg_gr">
Сегодня:<br/>
<div class="day-grig"><select class="day_gr" id="day_gr">
</select>
<span class="day_week"></span></div><br>
<select class="date_gr" id="date_gr">
<option value="0"></option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select> 
<select class="month_gr" id="month_gr">
<option value="0"></option><option value="1">января</option><option value="2">февраля</option><option value="3">марта</option><option value="4">апреля</option><option value="5">мая</option><option value="6">июня</option><option value="7">июля</option><option value="8">августа</option><option value="9">сентября</option><option value="10">октября</option><option value="11">ноября</option><option value="12">декабря</option>
</select> 
<input class="year_gr" id="year_gr" type="number" size="4" name="year" min="0" max="2400" step="1" value=""> <i>года</i>.<br/>
по григорианскому календарю<br/>(<i>новый стиль</i>)
</div>
<div class="ul">
Сегодня:<br/>
<div class="day-ulian"><select class="day_ul" id="day_ul">
</select><span class="day_week"></span></div><br>
<select class="date_ul" id="date_ul">
<option value="0"></option><option value="1">01</option><option value="2">02</option><option value="3">03</option><option value="4">04</option><option value="5">05</option><option value="6">06</option><option value="7">07</option><option value="8">08</option><option value="9">09</option><option value="10">10</option><option value="11">11</option><option value="12">12</option><option value="13">13</option><option value="14">14</option><option value="15">15</option><option value="16">16</option><option value="17">17</option><option value="18">18</option><option value="19">19</option><option value="20">20</option><option value="21">21</option><option value="22">22</option><option value="23">23</option><option value="24">24</option><option value="25">25</option><option value="26">26</option><option value="27">27</option><option value="28">28</option><option value="29">29</option><option value="30">30</option><option value="31">31</option>
</select> 
<select class="month_ul" id="month_ul">
<option value="0"></option><option value="1">января</option><option value="2">февраля</option><option value="3">марта</option><option value="4">апреля</option><option value="5">мая</option><option value="6">июня</option><option value="7">июля</option><option value="8">августа</option><option value="9">сентября</option><option value="10">октября</option><option value="11">ноября</option><option value="12">декабря</option>
</select> 
<input class="year_ul" id="year_ul" type="number" size="4" name="year" min="0" max="2400" step="1" value=""> <i>года</i>.<br/>
по юлианскому календарю<br/>(<i>старый стиль</i>)
</div>
<br/><br/>
</body></html>

Rise 08.04.2019 12:37

Строка с querySelectorAll должна быть там же где остальные querySelector, должны быть отступы нормальные это называется форматирование кода, тогда бы интуитивно это было очевидно. И можно было исправить пример в первом посте, а не дублировать одно и тоже.

Besprizornik 08.04.2019 12:56

Rise,
благодарю, разобрался работает, а тот скрипт ссылку на который ты давал, и второй скрипт найденый в гугле, не всегда правильно конвертируют, там не учитывается день весеннего равноденствия, с какого числа надо отнимать на день больше, и просто с начала года 1.01.1900 отнимается не правильно.

Rise 08.04.2019 13:20

Равноденствие это когда день равен ночи вроде, не понятно при чем здесь число дней. Ну вот скрипт конвертирует 01.01.1900 в 20.12.1899, вроде всё верно -12 дней, что не так?

Besprizornik 08.04.2019 13:35

я скачал этот скрипт и у меня отнимало 13 дней в феврале 1900 г. вместо 12, плюс там много ненужного мне, исламские календари, юлианские дни и прочее, а мне надо только григорианский и юлианский календари.

Rise 08.04.2019 13:47

Ну вот февраль 01.02.1900, 15.02.1900, 28.02.1900, разница 12. Возможно вам кажется, что на переходах 29 февраля 1900 (юлианская дата) и 13 марта 1900 (григорианская дата) разница 13 дней, вы ошибаетесь, потому что 29 февраля как бы проглатывает 1 марта и получается разница 12.

Besprizornik 08.04.2019 13:49

ладно, пока пойду в сад надо вишни посадить, позже зайду.

Besprizornik 09.04.2019 22:39

Rise,
в любом случае в тех скриптах куча ненужных мне систем летоисчислений (календарей) и ненужных мне вычислений (юлианский день и т.д.) мне надо только два календаря, григорианский и юлианский, конечно было бы неплохо охватить весь период юлианского, но встаёт вопрос как добавить ещё один селект для выбора периода нашей эры и до н. э. и как вводить даты до н. э. (1 янв 45 г. до н. э.) и второй вопрос как правильно отнимать нужное количество дней с учётом 29 февраля в высокосные годы хх00 по юлианскому календарю.


Часовой пояс GMT +3, время: 15:51.