Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #61 (permalink)  
Старый 28.07.2019, 13:03
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка
ну не знаю как ещё объяснить, есть форма с двумя списками для даты и месяца и полем ввода, в эту форму надо добавить текстовый узел выводящий день недели, но с помощью стилей изменить внешний вид этого текстового узла, чтобы он визуально не отличался от списка...
Вам уже такое сделали — сообщение №39. Хотя с точки зрения конечного пользователя здесь странно именно то, что день недели написан на кнопке, запускающей раскрывающийся список! Вам ведь на самом деле такой плохой UX не нужен!

Вот мой вариант — последняя часть сообщения №67 Вы можете поменять стили, как хотите! (Например, что вам стоит добавить такую же закруглённую рамку для дня недели, как в том примере это сделано у <input> и <select>?)
Ответить с цитированием
  #62 (permalink)  
Старый 28.07.2019, 14:47
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Malleys,
пост 74, можно использовать
<span id="day">
и внутрь поместить див с нулевой высотой/шириной задать диву рамку 3-5 пикселей и левую правую нижнюю рамку сделать прозрачной, тем самым нарисовав треугольник, типа как в списке, но надо чтобы этот треугольник не отличался визуально от аналогичного в селекте, а он сильно различается в разных браузерах...
Ответить с цитированием
  #63 (permalink)  
Старый 28.07.2019, 15:12
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка
Malleys, пост 74, можно использовать
Вы пишете так, как будто это у меня что-то не получается! Если вы знаете как делать, то делайте!

Сообщение от Блондинка
но надо чтобы этот треугольник не отличался визуально от аналогичного в селекте, а он сильно различается в разных браузерах...
Можно, чтобы не отличался!
<span id="day">Воскресенье</span>
<style>
  #day {
    -webkit-appearance: menulist;
    padding-right: 1em;
  }
</style>


Только зачем вам эта стрелка? Это же не всплывающий список!
Ответить с цитированием
  #64 (permalink)  
Старый 28.07.2019, 16:46
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Malleys,
не во всех браузерах это сработает, в том числе и в Habbit browser, который ты когда то скачал...
Сообщение от Malleys
Только зачем вам эта стрелка? Это же не всплывающий список!
захотелось чтобы элементы спан и селект в которых отображается составляющие дату визуально не отличалось, поэтому я и подумала почему бы не использовать html из 74 поста...
Ответить с цитированием
  #65 (permalink)  
Старый 28.07.2019, 17:17
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка
не во всех браузерах это сработает, в том числе и в Habbit browser, который ты когда то скачал...
Ну вообще-то в нём тоже работает, и в Firefox и в Chrome и в Safari (и хотя в Edge в консоли показывает как правильное свойство, оно визуально никак не отличается от простого текста!)...

Сообщение от Блондинка
чтобы элементы спан и селект в которых отображается составляющие дату визуально не отличалось, поэтому я и подумала почему бы не использовать html из 74 поста
А зачем тогда разные названия?

Вы ещё можете использовать треугольник ▼.

<span id="day">Воскресенье ▼</span>


Сообщение от Русский
Остаётся только ответить вопрос, почему же дни именуются не с начала седмицы, середина которой - среда, а с понедельника
Дни как раз таки именуются от недѣли, начала седмицы. Недѣля — точка отсчёта. По прошествий одного дня с недѣли получается понедѣльникъ, по прошествий двух дней с недѣли получается вторникъ, по прошествий четырёх дней с недѣли получается четвергъ и т.д. ((Например, тогда получается, что во вторникъ днём с начала седмицы прошло 2 дня и ещё столько-то часов вторника))

Если говорить о неделе, начало которой в понедельник, то получается, что точка отсчёта — понедельник. И тогда получается, что по прошествии одного дня с понедельника получается вторник, по прошествий трёх дней с понедельника получается четверг, и т.д. Что как раз таки не логично, поэтому стали использовать порядковые числительные для объяснения такой недели. Т. е. второй день — вторник, четвёртый день — четверг, и т.д. (Например, тогда получается, что во вторник днём с начала недели прошёл 1 день и ещё столько-то часов вторника)

Сообщение от Русский
А ей использовать код на ES6 религия не позволяет.
Вы перепутали религию с браузером Habit!

Последний раз редактировалось Malleys, 28.07.2019 в 18:41.
Ответить с цитированием
  #66 (permalink)  
Старый 04.08.2019, 03:23
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Сообщение от laimas
Да, либо поставить опции списка в том же порядке, что возвращает функция getDay(), либо использовать наш порядок, но уменьшая индекс на 1:

document.querySelector('#day_01').options[(d.getDay()||7)-1].selected = true;
laimas, а тут где нужно изменить порядок дней, полночи пробую методом тыка, пока безрезультатно
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Calendar</title>
</head>
<body>
<style>
.month, .month.vert .week, .day { display:inline-block; }
.month.vert .day { display:block; }
.day { border: 1px solid #ccc; width: 30px; line-height: 30px; text-align: center; margin: 1px; }
</style>
<div class="month"></div>
<script>
var calendar = {
update: function (year, month) {
this.days.length = 7;
var stepDay = new Date(year, month, 1);
stepDay.setDate(1 - stepDay.getDay());
var lastDay = new Date(year, month + 1, 0);
lastDay.setDate(lastDay.getDate() + 6 - lastDay.getDay());
while (stepDay <= lastDay) {
this.days.push(stepDay.getDate());
stepDay.setHours(24);
}
},
render: function () {
var html = '';
for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
if (j == 0) html += '<div class="week">';
html += '<div class="day">' + this.days[i] + '</div>';
if (j == 6) html += '</div>';
}
this.element.innerHTML = html;
},
toggle: function () {
this.element.classList.toggle('vert');
}
};
var today = new Date, thisYear = today.getFullYear(), thisMonth = today.getMonth();
calendar.days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
calendar.element = document.querySelector('.month');
calendar.element.addEventListener('click', function () { calendar.toggle() });
calendar.update(thisYear, thisMonth);
calendar.render();
</script>
</body>
</html>
Ответить с цитированием
  #67 (permalink)  
Старый 04.08.2019, 09:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Блондинка,
вам дали алгоритм тут
Сообщение от Rise
step.setHours(24 * (0 - (step.getDay() + 6) % 7)); last.setHours(24 * (6 - (last.getDay() + 6) % 7));
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>
      .month,
      .month.vert .week,
      .day {
        display: inline-block;
      }
      .month.vert .day {
        display: block;
      }
      .day {
        border: 1px solid #ccc;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
      }
    </style>
    <div class="month"></div>
    <script>
      var calendar = {
        update: function(year, month) {
          this.days.length = 7;
          var stepDay = new Date(year, month, 1);
          stepDay.setDate(stepDay.getDate() + 0 - ((stepDay.getDay() + 6) % 7));
          var lastDay = new Date(year, month + 1, 0);
          lastDay.setDate(lastDay.getDate() + 6 - ((lastDay.getDay() + 6) % 7));
          while (stepDay <= lastDay) {
            this.days.push(stepDay.getDate());
            stepDay.setHours(24);
          }
        },
        render: function() {
          var html = '';
          for (var i = 0, j = 0; i < this.days.length; j = ++i % 7) {
            if (j == 0) html += '<div class="week">';
            html += '<div class="day">' + this.days[i] + '</div>';
            if (j == 6) html += '</div>';
          }
          this.element.innerHTML = html;
        },
        toggle: function() {
          this.element.classList.toggle('vert');
        },
      };
      var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

      calendar.element = document.querySelector('.month');
      calendar.element.addEventListener('click', function() {
        calendar.toggle();
      });
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
  </body>
</html>
Ответить с цитированием
  #68 (permalink)  
Старый 04.08.2019, 10:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Блондинка,
можно так ...
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Calendar</title>
  </head>
  <body>
    <style>

      .day {
        border: 1px solid #ccc;
        width: 30px;
        line-height: 30px;
        text-align: center;
        margin: 1px;
        background-color: #B0C4DE;
      }
      .month {
          display: flex;
          flex-wrap:wrap;
          width: 238px;
          height: 238px;
          justify-content: space-around;
          margin: 30px auto;
      }
      .month.vert{
          flex-direction: column;
      }
      .day:nth-child(7n + 6), .day:nth-child(7n + 7){
         background-color:  #FF85C6;
      }
      .day:nth-child(-n + 7) {
          color: #FFFFFF;
      }

    </style>
    <div class="month"></div>
    <script>
      var calendar = {
        update: function(year, month) {
          var stepDay = new Date(year, month, 1);
          stepDay.setDate(stepDay.getDate() - ((stepDay.getDay()||7) - 1));
          var lastDay = new Date(stepDay);
          lastDay.setDate(lastDay.getDate() + 41);
          while (stepDay <= lastDay) {
            this.days.push(stepDay.getDate());
            stepDay.setHours(24);
          }
        },
        render: function() {
          var html = '';
          for (var i = 0; i < this.days.length; i++) {
            html += '<div class="day">' + this.days[i] + '</div>';
          }
          this.element.innerHTML = html;
        },
        toggle: function() {
          this.element.classList.toggle('vert');
        },
      };
      var today = new Date(),
        thisYear = today.getFullYear(),
        thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];

      calendar.element = document.querySelector('.month');
      calendar.element.addEventListener('click', function() {
        calendar.toggle();
      });
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
  </body>
</html>
Ответить с цитированием
  #69 (permalink)  
Старый 04.08.2019, 15:03
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

рони,
как то не очень с этими строчками
var lastDay = new Date(stepDay);
          lastDay.setDate(lastDay.getDate() + 41);

слишком много дней следующего месяца показано
Ответить с цитированием
  #70 (permalink)  
Старый 04.08.2019, 17:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Блондинка
слишком много дней следующего месяца показано
зато всегда одинаково квадрат 7 * 7 = 49 как в W10
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать калькулятор и с чего начать? A.P. Yellowman Общие вопросы Javascript 3 15.11.2013 21:32
Как сделать реакцию на изменение любого элемента формы. Mik Events/DOM/Window 3 28.07.2011 08:52
Как убрать hover? Либо как сделать стрелки статичными? krusty36 Элементы интерфейса 1 13.07.2011 09:20
Как сделать, чтобы при наведении на кнопку справа от нее появлялись текстовые ссылки? Tass Общие вопросы Javascript 7 17.02.2011 09:06
Вопрос как сделать эту панельку Определённых размеров и свойств. jei jQuery 3 09.06.2009 19:14