console.log добавить массив
что я делаю не так, часа три пытаюсь разобраться но не получается...
var d = new Date(); var day = ['7','1','2','3','4','5','6'], console.log(day) document.querySelector('#day').options[d.getDay()]. |
Besprizornik,
а зачем тут массив? |
я хочу чтобы в последующем можно было при определенных событиях или условиях можно было присвоить option value="0" selected...
|
А для чего вы создавали эту тему https://javascript.ru/forum/dom-wind...-new-post.html ?
Ведь в ней у вас день недели, это список с семью опциями, где вторая первый день недели, а последняя последний, а день недели возвращается с воскресенья, то есть это будут значения от 0 до 6. А отметить опцию начиная с дня нашей недели, это значит отметить так: ....options[d.getDay()||7] Зачем это делать через массив? |
я только пытаюсь учиться и что-то понять,
хочу попытаться сделать чтобы воскресенью присвоить 7 порядковый номер |
или же надо просто ....options[d.getDay()|8] и добавить ещё один тег option?
|
Цитата:
Это и обеспечивается простым выражением N = A || B, если булево значение А возвращает true, то N будет равно А, иначе В. Следовательно для всех дней недели возвращенным функцией d.getDay(), для значение от 1 до 6, это значение и будет возвращаться, а для воскресенья равного 0 (булево значение false), будет возвращено 7: ....options[от 1 до 6 или 7 для воскресенья] вот и все. |
Цитата:
У вас список <select class="day" id="day"> <option value="">Выберите ...</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> </select> Значит опции имеют индексы от 0 до 7 - восемь опций. Значит возвращенный день недели и будет выбирать начиная со второй, а 0 воскресенья заменяем на 7, для индекса восьмой опции. Если требуется список без пустой опции в начале, то нужно ....options[(d.getDay()||7)-1] И не | а || Ознакомится и изучить https://learn.javascript.ru/logical-ops , это не сложно для уяснения. |
<select class="day" id="day"> <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="0">Воскресенье</option> <option value=""></option> </select> вот список, скрипт просто показывает сегодняшний день недели, в дальнейшем надо будет показать что нельзя высчитать день/дату, для этого и есть пустая опция, которой присвоиться selected |
у поля ввода указаны шаг step="1" и мин макс значения max="2400" скрипт не должен показывать даты после 2400 года, а показывать пустые опции
|
Besprizornik,
вы чего в конце концов хотите? Если наши дни недели, то с чего у вас значение опции воскресенья равно 0? Цитата:
|
Цитата:
document.querySelector('#day').options[(d.getDay()||7)-1].selected = true; |
Цитата:
Собственно если уж и значения полей списка равны буржуйским дням недели, то можно и значению списка присваивать день недели вместо выбора опции по индексу. Тогда <select class="day" id="day"> <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="0">Воскресенье</option> <option value=""></option> <script> var d = new Date(); document.querySelector('#day').value = d.getDay(); </script> Для списка месяцев также берем как есть, коли первая его опция будет первый день со значением 0 (буржуйско-javascript формат), а пустая в конце. |
laimas, я просто пытался что-то понять и сделать из первого вврианта второй
<script> var d = new Date(); document.addEventListener('DOMContentLoaded', function() { document.querySelector('#day').options[d.getDay()||7].selected = true; }); </script> <select class="day" id="day"> <option value=""></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="0">Воскресенье</option> </select><br/><br/><br/> <script> var day=new Array('7','1','2','3','4','5','6') document.addEventListener('DOMContentLoaded', function() { document.querySelector('#day_x').options[d.getDay()||7].selected = true; }); </script> <select class="day_x" id="day_x"> <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> </select><br/> |
чтобы получить страничку с такими вот списками
<!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;} 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>Сегодняшние день недели и дата через элементы формы на JS.</h1> <div class="seg"> Сегодня:<br/> <select class="day" id="day"> <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> </select><br/> <select class="date" id="date"> <option value=""></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=""></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>. </div> </body></html> |
Цитата:
А что касается функционала, года 2400, пустых опций, то тут скорее непорядок. Ведь хотя опции и пусты содержимым, они тем не менее доступны для выбора в списках. Если бы опции имели к примеру текст "Выберите..." и были выбранными по умолчанию, тогда наличие их в списках было бы логичным, а доступ к ним можно было бы запретить через disabled. У вас же назначение данных опций определяется иным и это их предназначение никак не вписывается в логику. В такой концепции их либо вообще не должно быть в списках, а добавляться в них они должны по условию, либо эти опции в списках должны быть скрыты, и показываться по условию. И мало того, с появлением этих артистов на сцене должен накладываться запрет на появление других. Но с другой стороны, если пустые опции появляются на сцене только по мере наступления 2400 года, то не проще ли выбросить эти пустые опции, сделав максимальным значением поля 2399 год? Ведь все элементы ваши получают значения по умолчанию равные элементам текущей даты, а далее выбор, который можно просто ограничить не "по предел", а "до предела". |
laimas,
я боялся что в воскресенье покажет пустоту, я дня три сношался пока что то получилось чтобы правильно показывало с тремя скриптами для каждого списка - отдельный скрипт... пустые опции конечно выбираться не будут, а доступ к ним запретить через disabled дело 2ух минут если не меньше, в принципе пустые опции стоят первыми и они будут показываться если убрать атрибут селектед, тоесть надо будет при вводе значения 2400(к примеру) просто удалять атрибут... |
если есть два одинаковых списка <select id="day"> и <select id="day-2">, то как я понимаю надо document.querySelector('#day', '#day-2').options[d.getDay()||7].selected = true;
|
Цитата:
Для постановки спектакля вы заключили контракты с труппами артистов из различных театров. В каждой такой труппе есть по одному артисту, у которых вообще нет никакой роли, они выходят на сцену только в конце спектакля для поклона. Но при этом вы обязаны по контракту платить им жалование. Правда глупо, расточительно и экономически нецелесообразно? Вот такая же ситуация и в вашем js-сценарии - есть те кто работают как лошади, и те кто вообще болтается бременем, но при этом жрут ресурсы. |
Цитата:
|
querySelectorAll() ?
|
за подсказку благодарю, в принципе пустые опции можно убрать и показывать только при вводе некоректной даты...
|
Цитата:
|
короче, с с сегодняшней датой разобрался, успешно вывел вторую дату(точнее сказать сегодняшнюю По старому стилю), но вариант с двумя датами оставлю на потом...
Кто подскажет куда копать с этим вариантом <!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 (сюда)? |
Цитата:
|
нууу... Я думаю это станет понятно после титле и аш1 страницы...
|
что бы можно было бы посмотреть какой день недели был или будет определённого числа введённого пользователем...
|
Цитата:
<!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 год, ради которого вы снабжаете списки лишними элементами. А вот чего еще не хватает для работы вашей программы, это попробуйте сами определить. |
Ну лишние опции вроде удалить не сложно, дело одной-двух минут, это всегда можно сделать, и в окончательном варианте так и будет...
в принципе особой роли не играет день недели списком/текстом, но вариант (к примеру) вставить пустой список а потом для визуального эффекта поверх него через з-индекс спан с днем недели - меня не прельщает... попробовал ввести 2400 год, число, месяц, пытался ввести разные значения но при нажатии на кнопки никакого эффекта, буду пробовать что-то изменить-исправить-улучшить пока не получится то что хочу, я упрямый пипец... а нехватает много чего... буду пробовать... |
Цитата:
Что касается "но при нажатии на кнопки никакого эффекта" - вы уверены в этом? Все работает, получает и отображает день недели, а если вы попали на тот же самый день, то это не значит что не работает. Чего вы там хотите менять чтобы заработало, этого мне не понять. А вот чего не хватает, чтобы корректно работало, вот над этим подумайте. |
ну... если не ошибаюсь то сегодня понедельник, 4 марта 2019 года, или я не прав? тогда как может быть что 5 марта 2019 года понедельник? на основании этого я и решил что „никакого эффекта“... в случае необходимости могу кинуть в личку ссылку...
сорри, не правильно выразился, не менять а добавить пару маленьких „плюшек“, типа скрыть слово сегодня, появляющие спаны при вводе даты превышающие нижний и верхний пределы и тому подобное... |
https://screenshots.firefox.com/7uxX.../javascript.ru
Под чем вы смотрите не знаю, но учтите, что код совсем "не рассматривает" вопросов кроссбраузерности, это уже сами. |
Opera/9.80 (Android 4.4.2; Linux; Opera Mobi/ADR-1411061201) Presto/2.11.355 Version/12.10
Mozilla/5.0 (Linux; Android 4.4.2; HUAWEI Y360-U61 Build/HUAWEIY360-U61) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.109 Mobile Safari/537.36 |
А я смотрю и под Opera 58.0, под Win7. Вопросы кроссбраузерности, это уже решайте сами - установка обработчиков, поддержка событий, и т.д.
|
пока надо поспать, проснусь буду дальше „копаться“, вроде бы простой скрипт для дат, а тут еще кроссбраузерность................ ....
|
Используйте jQuery, к примеру, она за вас многие заботы на себя возьмет, есть jQuery и для моб. устройств. Вообще почитать:
https://habr.com/ru/post/247029/ |
Часовой пояс GMT +3, время: 14:47. |