04.03.2019, 03:53
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
|
querySelectorAll() ?
|
|
04.03.2019, 03:58
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
|
за подсказку благодарю, в принципе пустые опции можно убрать и показывать только при вводе некоректной даты...
|
|
04.03.2019, 04:01
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Besprizornik
|
|
querySelectorAll()
|
Зачем? Проще получить два элемента отдельно методом querySelector(), не такая и большая коллекция, чтобы цикл запускать. |
|
04.03.2019, 08:37
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
короче, с с сегодняшней датой разобрался, успешно вывел вторую дату(точнее сказать сегодняшнюю По старому стилю), но вариант с двумя датами оставлю на потом...
Кто подскажет куда копать с этим вариантом
<!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>Хотите узнать какой день недели был или будет определённого числа ?</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;}
select { height: 26px; }
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; }
@-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();
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#day').options[d.getDay()||7].selected = true;
document.querySelector('#date').options[d.getDate()].selected = true;
document.querySelector('#month').options[d.getMonth()+1].selected = true;
document.querySelector('#year').value = d.getFullYear();
});
</script>
</head><body>
<h1>Хотите узнать какой день недели был или будет определённого числа ?</h1>
<div class="seg">
Сегодня:<br/>
<select class="day" id="day">
<option value="0" disabled="disabled"></option><option value="1" disabled="disabled">Понедельник</option><option value="2" disabled="disabled">Вторник</option><option value="3" disabled="disabled">Среда</option><option value="4" disabled="disabled">Четверг</option><option value="5" disabled="disabled">Пятница</option><option value="6" disabled="disabled">Суббота</option><option value="7" disabled="disabled">Воскресенье</option>
</select><br/>
<select class="date" id="date">
<option value="0" disabled="disabled"></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" id="month">
<option value="0" disabled="disabled"></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" id="year" type="number" size="4" name="year" min="0" max="2400" step="1" value=""> <i>года</i>.<br/>
Выберите нужную вам дату и нажмите на кнопку „Смотреть“...<br/>
<button type="button">Смотреть</button><br/>
При нажатии на кнопку „Сбросить“ покажет сегодняшнюю дату...<br/>
<button type="reset">Сбросить</button><br/>
</div>
</body></html>
как и что искать чтобы данные введённые пользователем попадали в var d = new Date ( сюда)?
|
|
04.03.2019, 09:05
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Besprizornik
|
|
чтобы данные введённые пользователем попадали в var d = new Date (сюда)?
|
Зачем? |
|
04.03.2019, 09:14
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
|
нууу... Я думаю это станет понятно после титле и аш1 страницы...
|
|
04.03.2019, 09:16
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
|
что бы можно было бы посмотреть какой день недели был или будет определённого числа введённого пользователем...
|
|
04.03.2019, 10:03
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Besprizornik
|
|
что бы можно было бы посмотреть какой день недели был или будет
|
А зачем тогда список для дней недели с опциями, которые нельзя выбрать? А почему до сих пор в ваших списках никчемные лишние опции? Это уже страдает логика.
<!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>Хотите узнать какой день недели был или будет определённого числа ?</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;}
select { height: 26px; }
input { height: 22px; padding-left: 5px; }
select, input, #week { background: #d7d7ff; color: #0000a0; border: 1px solid #0000a0; font: 16px Georgia, 'Times New Roman', Times, serif; line-height: 0; margin: 5px 3px; }
@-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; } }
#week {
padding: 3px 6px;
}
</style>
<script>
var d = new Date(), daysweek = 'Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота'.split(' '), W, D, M, Y;
document.addEventListener('DOMContentLoaded', function() {
W = document.querySelector('#week');
D = document.querySelector('#date');
M = document.querySelector('#month');
Y = document.querySelector('#year');
setDate();
document.querySelectorAll('button').forEach(function(e) {
e.addEventListener('click', function() {
setDate(e.type)
})
});
Y.addEventListener('input', function() {
if(this.value > this.max) this.value = this.max
})
});
function setDate(what) {
if(!what || what=='reset') {
W.textContent = daysweek[d.getDay()];
D.options[d.getDate()-1].selected = true;
M.options[d.getMonth()].selected = true;
Y.value = d.getFullYear();
} else {
var t = new Date(Y.value, M.value, D.value);
W.textContent = daysweek[t.getDay()];
}
}
</script>
</head><body>
<h1>Хотите узнать какой день недели был или будет определённого числа ?</h1>
<div class="seg">
<p>Сегодня:</p>
<div><span id="week"></span></div><br/>
<select class="date" id="date">
<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" id="month">
<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>
</select>
<input class="year" id="year" type="number" size="4" name="year" min="0" max="2399" step="1"/> <i>года</i>.<br/>
Выберите нужную вам дату и нажмите на кнопку „Смотреть“...<br/>
<button type="button">Смотреть</button><br/>
При нажатии на кнопку „Сбросить“ покажет сегодняшнюю дату...<br/>
<button type="reset">Сбросить</button><br/>
</div></body></html>
И попробуйте выбрать 2400 год, ради которого вы снабжаете списки лишними элементами. А вот чего еще не хватает для работы вашей программы, это попробуйте сами определить.
Последний раз редактировалось laimas, 04.03.2019 в 12:10.
|
|
04.03.2019, 10:57
|
|
Кандидат Javascript-наук
|
|
Регистрация: 24.02.2019
Сообщений: 126
|
|
|
Ну лишние опции вроде удалить не сложно, дело одной-двух минут, это всегда можно сделать, и в окончательном варианте так и будет...
в принципе особой роли не играет день недели списком/текстом, но вариант (к примеру) вставить пустой список а потом для визуального эффекта поверх него через з-индекс спан с днем недели - меня не прельщает...
попробовал ввести 2400 год, число, месяц, пытался ввести разные значения но при нажатии на кнопки никакого эффекта, буду пробовать что-то изменить-исправить-улучшить пока не получится то что хочу, я упрямый пипец... а нехватает много чего... буду пробовать...
|
|
04.03.2019, 11:10
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Besprizornik
|
|
в принципе особой роли не играет день недели списком/текстом ....
|
Ну если так подходить к решениям задач, тогда я вам не советчик. 
Что касается "но при нажатии на кнопки никакого эффекта" - вы уверены в этом? Все работает, получает и отображает день недели, а если вы попали на тот же самый день, то это не значит что не работает. Чего вы там хотите менять чтобы заработало, этого мне не понять. А вот чего не хватает, чтобы корректно работало, вот над этим подумайте. |
|
|
|
