Javascript-форум - как сделать?

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - как сделать? (https://javascript.ru/forum/misc/78060-kak-sdelat.html)

Блондинка

20.07.2019 22:22

как сделать?

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>  
  <form>
   <button>></button>
   <select id="month" name="month">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <button>></button>
   <button><</button>
   <input type="number" id="year" name="year" size="4" min="0" max="2250" step="1">

   <button>></button>
  </form>
 <script> 
var d = new Date(); 
document.addEventListener('DOMContentLoaded', function() { 
document.querySelector('#month').options[d.getMonth()].selected = true;
document.querySelector('#year').value = d.getFullYear();
});
</script>
 </body>
</html>

подскажите если не трудно, как сделать чтобы при клике на кнопки со стрелочками у опций переключился селектед, и содержимое поля ввода ввода менялось?

j0hnik

20.07.2019 23:48

Русский,
Изменить_месяц, сложно.

const Изменить_месяц = вперёд => {
		const
			поле = document.getElementById("Месяц"),
      выделено = поле.selectedIndex;
		if (вперёд) {
			if (выделено < 11) поле.selectedIndex++;
		}
		else {
			if (выделено > 0) поле.selectedIndex--;
		}
	};

рони	21.07.2019 00:05

:) :write:

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <form>
   <input type=button onclick="Изменить_месяц(false);" value="<" />
   <select id="Месяц" name="Месяц">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <input type=button onclick="Изменить_месяц(true);" value=">" />
   <input type=button onclick="Изменить_год(false);" value="<" />
   <input type=number size=4 min=0 max=2250 step=1 id="Год" name="Год" />
   <input type=button onclick="Изменить_год(true);" value=">" />
  </form>
  <script>
    const сегодня = new Date();
    document.addEventListener('DOMContentLoaded', () => {
        document.getElementById("Месяц").options[сегодня.getMonth()].selected = true;
        document.getElementById("Год").value = сегодня.getFullYear();
    });

    const Изменить_месяц = вперёд => {
        const поле = document.getElementById("Месяц");
        let выделено = Math.max(1, Math.min(10,поле.selectedIndex));
        вперёд ? выделено++ : выделено--
        поле.selectedIndex = выделено
    }

    const Изменить_год = вперёд => {
        const поле = document.getElementById("Год");
        вперёд ? поле.value++ : поле.value--;
    }
  </script>
 </body>
</html>

Блондинка

21.07.2019 02:47

по идее в ваших двух примерах атрибут селектед должен быть установлен у опции с текущим месяцем и поле с годом заполнено, а отображается в селекте январь и поле пустое...

рони	21.07.2019 08:29

Цитата:

Сообщение от Блондинка

а отображается в селекте январь и поле пустое...

1. выкинуть браузер или искать полифилы.
2. искать вариант перевода es6 в es5 или самостоятельно менять стрелочные функции на "обычные" и т.д.?

рони	21.07.2019 11:53

babel es5 Try it out

Блондинка,
конвертор в es5
https://babeljs.io/repl
Copy & Paste
скопировать код es6, получить код es5, заменить одно на другое, добавить полифил перед кодом, если нужно.

<script src="https://polyfill.io/v3/polyfill.min.js"></script>

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
  <form>
   <input type=button onclick="Изменить_месяц(false);" value="<" />
   <select id="Месяц" name="Месяц">
    <option value="01">январь</option>
    <option value="02">февраль</option>
    <option value="03">март</option>
    <option value="04">апрель</option>
    <option value="05">май</option>
    <option value="06">июнь</option>
    <option value="07">июль</option>
    <option value="08">август</option>
    <option value="09">сентябрь</option>
    <option value="10">октябрь</option>
    <option value="11">ноябрь</option>
    <option value="12">декабрь</option>
   </select>
   <input type=button onclick="Изменить_месяц(true);" value=">" />
   <input type=button onclick="Изменить_год(false);" value="<" />
   <input type=number size=4 min=0 max=2250 step=1 id="Год" name="Год" />
   <input type=button onclick="Изменить_год(true);" value=">" />
  </form>
  <script>
    "use strict";
var сегодня = new Date();
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById("Месяц").options[сегодня.getMonth()].selected = true;
  document.getElementById("Год").value = сегодня.getFullYear();
});

var Изменить_месяц = function Изменить_месяц(вперёд) {
  var поле = document.getElementById("Месяц");
  var выделено = Math.max(1, Math.min(10, поле.selectedIndex));
  вперёд ? выделено++ : выделено--;
  поле.selectedIndex = выделено;
};

var Изменить_год = function Изменить_год(вперёд) {
  var поле = document.getElementById("Год");
  вперёд ? поле.value++ : поле.value--;
};
  </script>
 </body>
</html>

Блондинка

21.07.2019 17:12

рони,
спасибо большое, сейчас всё нормально работает

Блондинка

21.07.2019 18:01

кто знает как создать выпадающий список с одной опций для названия сегодн дня недели?

как создать выпадающий список для чисел месяца, что бы количество опций соответствовало количеству дней в месяце, (лишние опции скрыть) ?

рони	21.07.2019 18:41

Цитата:

Сообщение от Блондинка

лишние опции скрыть

количество дней в месяце или зависимые селекты

Блондинка

21.07.2019 20:23

Как установить селектед соответствуещему дню недели понятно, а как убрать опции с другими днями недели?
другими словами при выборе даты день недели не играет никакой роли, можно было бы вывести на экран и текстом, но хотелось бы оставить список с одной опцией, чтобы внешне выглядело всё одинаково, все компоненты объекта дата были внутри элементов формы, селекты и инпуты а не просто текст

Блондинка

24.07.2019 21:39

Цитата:

Сообщение от laimas (Сообщение 504290)

[HTML run height=600]<script>
document.addEventListener('DOMContentLoaded', function() {
var d = new Date();
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>

надо просто не присваивать селектед для опции в выпадающем списке для дня недели, а просто вставить название дня между открывающим и закрывающим тегом оптион

laimas

24.07.2019 21:50

Я каким боком к этой вашей теме стал иметь отношение? :)

Блондинка

24.07.2019 21:55

laimas,
Я просто взяла кусок кода из вашего поста

laimas

24.07.2019 22:00

Цитата:

Сообщение от Блондинка

кусок кода из вашего поста

Единственный на этом форуме способный выковыривать из глубоких недр ранее созданного, это рони, я же не помню то, что и неделю назад писал. :) И не вникая что тут в теме и о чем, с трудом представляю какое отношение этот кусок имеет к теме.

Блондинка

24.07.2019 22:26

laimas,
если не трудно, подскажи на что заменить строчку

document.querySelector('#day').options[d.getDay()||7].selected = true;

если есть одна пустая опция в списке, чтобы в ней выводился сег день

laimas

24.07.2019 22:47

Сегодняшний день - день недели?

Блондинка

24.07.2019 23:32

да, день недели

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="utf-8">
<title></title>
<style>
select { height: 26px; }
input { height: 22px; padding-left: 5px; }
</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>
<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="7">Воскресенье</option>
</select><br/>
<select class="date" id="date">
<option value="0">01</option>
 
<option value="1">02</option>
<option value="2">03</option>
<option value="3">04</option>
<option value="4">05</option>
<option value="5">06</option>
<option value="6">07</option>
<option value="7">08</option>
<option value="8">09</option>
<option value="9">10</option>
<option value="10">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="20">21</option>
<option value="21">22</option>
<option value="22">23</option>
<option value="23">24</option>
<option value="24">25</option>
<option value="25">26</option>
<option value="26">27</option>
<option value="27">28</option>
<option value="28">29</option>
<option value="29">30</option>
<option value="30">31</option>
</select> 
<select class="month" id="month">
<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/>
</body></html>

в этом коде надо часть html удалить

<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="7">Воскресенье</option>
</select>

и заменить на

<select class="day" id="day">
<option value=""></option>
</select>

laimas

24.07.2019 23:38

Ну если день недели, то два способа: 1) то что ранее вы взяли "куском", 2) это непосредственно устанавливать значение списка равное текущему дню, то есть value опции Воскресенье должно быть равно 0.

1)

<select 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>
 
<script>
document.querySelector('#day').options[new Date().getDay()||7].selected = true;
</script>

<select 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>
 
<script>
document.querySelector('#day').value = new Date().getDay()
</script>

Блондинка

24.07.2019 23:45

Русский,
мне надо одна опция, а не несколько...

laimas

24.07.2019 23:45

Удалить и заменить ... тогда это бессмыслица, зачем в данном случае список? Не проще ли текст в любой элемент, например в тот же span?

Блондинка

24.07.2019 23:49

laimas,
Просто когда есть список с внешне смотрится более стильно чем спан

laimas

24.07.2019 23:54

Цитата:

Сообщение от Блондинка

список с внешне смотрится более стильно чем спан

Что за ерунда :) Вы о пользователе думайте, о том к чему он привык и чего ожидает, а не о рюшечках. Тот же SPAN можно стилями оформить как угодно.

Блондинка

25.07.2019 00:11

laimas,
не спорю, можно спан оформить стилями, и для каждого браузера использовать своё фоновое изображение, но проще сделать селект,

о пользователе? он привык выбирать число месяц и год, но не день недели

Блондинка

25.07.2019 00:15

laimas

25.07.2019 00:21

Цитата:

Сообщение от Блондинка

он привык выбирать число месяц и год, но не день недели

Пользователя давно приучили к таким элементам как флажки, кнопки, списки и т.п. Следовательно он не просто видит их, но и знает их поведение, а от списка он вправе ожидать выбор. А если не выбирать день недели, то зачем список? Дело хозяйское конечно, но это если не бред, то профанация точно. ;)

PS. Почитайте о понятии интерфейса.

Блондинка

25.07.2019 01:05

laimas,
можно просто написать чем заменить строчку яваскрипта?

laimas

25.07.2019 01:24

var d = new Date(),
    days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
document.querySelector('#day').textContent = days[d.getDay()];

А чем будет являться #day решайте сами.

Блондинка

25.07.2019 14:49

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="utf-8">
<title></title>
<style>
select { height: 26px; }
input { height: 22px; padding-left: 5px; }
</style>
<script> 
var d = new Date(); 
document.addEventListener('DOMContentLoaded', function() { 
days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
document.querySelector('#day').textContent = days[d.getDay()];
document.querySelector('#date').options[d.getDate()].selected = true;
document.querySelector('#month').options[d.getMonth()].selected = true;

document.querySelector('#year').value = d.getFullYear();
});
</script>
</head>
<body>
<select class="day" id="day">
<option value=""></option>
</select><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="2400" step="1" value=""> <i>года</i>.<br/>
</body></html>

кто подскажет, почему неправильно отображается число? и почему не показывает день недели?

laimas

25.07.2019 15:29

Блондинка

25.07.2019 16:35

Кто объяснит почему число отображается на один больше, сегодня ведь 25го

laimas

25.07.2019 16:43

Потому, что .options[d.getDate()].selected, это установка опции по ее индексу, а индексы начинаются с 0. Замените на document.querySelector('#date').value = d.getDate();, или если по индексу, то .options[d.getDate()-1].selected

Блондинка

25.07.2019 16:56

laimas,
или изменить опции? у каждой опции установить value на единицу меньше числа, так можно? я просто спрашиваю чтобы знать, это не значит что буду так делать...

laimas

25.07.2019 17:09

Цитата:

Сообщение от Блондинка

у каждой опции установить value на единицу меньше числа, так можно?

Зачем? Если выбирать по индексу, то смена значений опций ничего не даст. А если устанавливать значение списка, то ничего менять не надо, дни начинаются с 1, и ваши опции имеют значения начиная с 1.

Блондинка

25.07.2019 20:00

laimas,
а тут что не так?

<!DOCTYPE HTML>
<html lang="ru">
<head>
  <meta charset="utf-8">
<title></title>
<style>
select { height: 26px; }
input { height: 22px; padding-left: 5px; }
</style>
<script> 
var d = new Date(); 
document.addEventListener('DOMContentLoaded', function() { 
days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
document.querySelector('#day').textContent = days[d.getDay()];
document.querySelector('#day_01').options[new Date().getDay()||7].selected = true;
document.querySelector('#day_02').value = new Date().getDay()
document.querySelector('#date').options[d.getDate()-1].selected = true;
document.querySelector('#date_01').value = d.getDate();
document.querySelector('#month').options[d.getMonth()].selected = true;
document.querySelector('#year').value = d.getFullYear();
});
</script>
</head>
<body>
<select class="day">
<option  id="day"></option>
</select><br/>
<select id="day_01">
<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 id="day_02">
<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>
<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><br/>
<select class="date" id="date_01">

<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="2400" step="1" value=""> <i>года</i>.<br/>
</body></html>

laimas

25.07.2019 20:15

Встречный вопрос - а почему в третьем случае список отмечает верно?

Вы выдрали этот код где-то, и не учли, что он для списка у которого есть первый не относящийся к дню недели опшен.

Опции списка имеют индексы начиная с 0. new Date().getDay()||7 для пятницы вернет 5, а под пятым индексом в вашем списке опция субботы. Кстати, у вас объявлен объект Date ранее, так что далее его получать в коде не стоит.

Rise	25.07.2019 20:30

Блондинка,
Что ты делаешь можешь объяснить? Посмотри свой первый пост в этой теме и последний. Ты просто так от балды пишешь ради обучения или есть какая-то задача?

Блондинка

25.07.2019 23:04

убрала new Data вообще всё не работает

15 строка document.querySelector('#day_01').options[getDay()||7].selected = true; 
16 строка document.querySelector('#day_02').value = getDay();

Блондинка

25.07.2019 23:28

Русский,
а там что нибудь работает? могу скинуть скриншот запускаемого примера, может из-за латиницлатиницы и не работает а ?

laimas

26.07.2019 04:11

Цитата:

Сообщение от Блондинка

убрала new Data вообще всё не работает

:) Вместо new Date() нужно d.getDay(), так как ранее у вас под этой переменной и открыт этот объект. Только оказывается у вас там написано так, как делать не стоит. А "оказывается" потому, что код не форматирован и его читать неудобно. В чем вы пишите код, если редакторы при открытии тела функции/условия автоматически создают парные конструкции {}, а при переходе на новую строку (входе в эту конструкцию) добавляют табуляцию? Должно быть так:

document.addEventListener('DOMContentLoaded', function() {
    var d = new Date(),
        days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");
    
    document.querySelector('#day').textContent = days[d.getDay()];
    document.querySelector('#day_01').options[d.getDay()||7].selected = true;
    document.querySelector('#day_02').value = d.getDay()
    document.querySelector('#date').options[d.getDate()-1].selected = true;
    document.querySelector('#date_01').value = d.getDate();
    document.querySelector('#month').options[d.getMonth()].selected = true;
    document.querySelector('#year').value = d.getFullYear();
});

Здесь объявлены две переменные d и days, через запятую, хотя можно написать и так:

var d = new Date();
var days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");

Но вот так, как у вас:

days = "Воскресенье Понедельник Вторник Среда Четверг Пятница Суббота".split(" ");

делать не стоит. В остальном надеюсь теперь понятно почему:

document.querySelector('#day_01').options[d.getDay()||7].selected = true;

с ошибкой, а:

document.querySelector('#day_02').value = d.getDay()

нормально.

Блондинка

26.07.2019 05:48

document.querySelector('#day_01').options[d.getDay()-1||7].selected = true;

вот так показывает пятницу

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

Страница 1 из 3

Показывать 40 сообщений этой темы на одной странице