Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #101 (permalink)  
Старый 04.08.2019, 02:10
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

попробую сформулировать вопрос по другому, почему когда я применила свойство vertical-align не получила ожидаемый результат? если можно ссылки, где можно найти ответ на этот вопрос...
Ответить с цитированием
  #102 (permalink)  
Старый 05.08.2019, 01:36
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Блондинка
а можно про это чуть подробнее? что именно оно делает?
Удивительно... поискав на русском языке, тут же получаешь массу объяснении, например, такое https://developer.mozilla.org/ru/doc...vertical-align
Также посмотрите наглядный пример, как vertical-align влияет на элемент Блондинка...
<code>
	vertical-align: <select onchange="test.style.verticalAlign = this.value;">
		<optgroup label="alignment-baseline">
			<option>baseline
			<option>text-bottom
			<option>alphabetic
			<option>ideographic
			<option>middle
			<option>central
			<option>mathematical
			<option>text-top
			<option>bottom
			<option>center
			<option>top
		</optgroup>
		<optgroup label="baseline-shift">
			<option>-20px
			<option>20px
			<option>-150%
			<option>150%
			<option>sub
			<option>super
		</optgroup>
	</select>
</code>
<p><span>А</span> <span id="test">Блондинка</span> <span>Б</span></p>

<style>
	
code, p, span {
	border: solid #ff1493;
	display: inline-block;
}
	
code {
	padding: 0.5em;
}
	
p {
	font: 400% sans-serif;
}
	
	p > span {
		display: inline-block;
		font-size: 60%;
	}
	
#test {
	border: solid #ffd700;
	font-weight: bold;
	font-size: 100%;
}

select {
	font: inherit;
}
</style>

Последний раз редактировалось Malleys, 05.08.2019 в 01:39.
Ответить с цитированием
  #103 (permalink)  
Старый 05.08.2019, 14:31
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Malleys,
всё это понятно и знакомо, и исходя из этого по идее элементы управления должны были располагаться по середине блока
Ответить с цитированием
  #104 (permalink)  
Старый 23.09.2019, 21:21
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 806

Malleys,
скорее всего ты прав, эта „пляска интерфейса “ скорее всё портит, возникает вопрос как при текущем месяце кнопку "сегодня" заменить на див в котором вывести часы/минуты/секунды,,а при просмотре др месяцев этот див становился кнопкой с текстом "сегодня"?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      body {
        width: 360px;
      }
      body,
      select,
      input {
        font: 14px serif;
      }
      #calendar {
        width: 330px;
        display: inline-block;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        padding: 5px;
      }
      #navigation_panel {
        background-color: hsl(207, 100%, 92%);
        height: 53px;
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
        padding: 5px;
        margin-bottom: 3px;
        text-align: center;
        vertical-align: middle;
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-flex-wrap: wrap;
      flex-wrap: wrap;
      }
      #navigation_panel button,
      #navigation_panel #calendar_year {
        background-color: hsl(207, 100%, 85%);
        color: hsl(207, 100%, 35%);
        font: 14px serif;
        border: 1px solid hsl(207, 100%, 35%);
      }
      #calendar_month {
        background-color: transparent;
        color: hsl(207, 100%, 35%);
        font: 14px serif;
        border: 1px solid hsl(207, 100%, 35%);
      }
      #navigation_panel button {
        height: 24px;
        vertical-align: middle;
      }
      #background_month {
        background-color: hsl(207, 100%, 85%);
        display: inline-block;
      }
      button.minus {
        width: 28px;
        text-align: center;
        border-radius: 12px 0 0 12px / 10px 0 0 10px;
        margin-right: -1px;
      }
      button.plus {
        width: 28px;
        text-align: center;
        border-radius: 0 12px 12px 0 / 0 10px 10px 0;
        margin-left: -1px;
      }
      .month_plus {
        margin-right: 35px;
        margin-left: px;
      }
      #presently {
        width: 288px;
        margin-top: 5px;
        border-radius: 12px/10px;
        -webkit-box-flex: 0;
        -webkit-flex: 0 0 288px;
        flex: 0 0 288px;
      }
      #calendar_month {
        width: 89px;
        display: inline-block;
      }
      #calendar_year {
        width: 54px;
        display: inline-block;
      }
      select {
        height: 24px;
      }
      input {
        height: 20px;
        border: 1px solid #a9a9a9;
        display: inline-block;
        text-align: center;
      }
      #table {
        font: sans-serif;
        width: 100%;
        height: 222px;
        padding: 2px;
      }
      #table,
      td {
        border: 1px solid #a9a9a9;
        border-radius: 6px/4px;
      }
      td {
        margin: 1px;
        text-align: center;
      }
      td.week-day {
        height: 33px;
      }
      .prevMonth {
        opacity: 0.5;
      }
      .curMonth {
        background-color: #ff69b4;
      }
      .nextMonth {
        opacity: 0.4;
      }
      .nextMonth:nth-child(n + 6) {
      background-color: #ffebf5;
      }
      .curDay {
        background-color: #fffacd;
      }
      #presently.hide {
        display: none;
      }
      .week-day {
        background-color: #c2d6ff;
        color: #0069ff;
      }
      .week-day.curDay {
        border: 1px solid #285fcd;
        background-color: #6b9cff;
        color: #e6f5ff;
        font-weight: bold;
      }
      .week-day:nth-child(n + 6) {
        background-color: #ffcae3;
        color: #ff0075;
      }
      .week-day.curDay:nth-child(n + 6) {
        border: 1px solid #ff0075;
        background-color: #ff97c8;
        color: #fff8fc;
        text-shadow:
        1px 1px #ff0075,
        1px -1px #ff0075,
        -1px 1px #ff0075,
        -1px -1px #ff0075,
        1px 0 #ff0075,
        -1px 0 #ff0075,
        0 1px #ff0075,
        0 -1px #ff0075;
      }
      #table tbody td {
        background-color: #def1ff;
        color: #0091ff;
      }
      #table tbody td:nth-child(n + 6) {
        background-color: #ffdced;
        color: #ff0075;
      }
      #table tbody td.curMonth.curDay {
        background-color: #c2d6ff;
        border: 1px solid hsl(207, 100%, 35%);
        font-weight: bold;
        color: #fff;
        text-shadow: 1px 1px hsl(207, 100%, 35%), -1px 1px hsl(207, 100%, 35%), 1px -1px hsl(207, 100%, 35%), -1px -1px hsl(207, 100%, 35%),
          1px 0 hsl(207, 100%, 35%), 0 1px hsl(207, 100%, 35%), -1px 0 hsl(207, 100%, 35%), 0 -1px hsl(207, 100%, 35%);
      }
      #table tbody td.curMonth.curDay:nth-child(n + 6) {
        background-color: #ffbadb;
        border: 1px solid #ff0075;
        
        text-shadow:
        1px 1px #ff0075,
        1px -1px #ff0075,
        -1px 1px #ff0075,
        -1px -1px #ff0075,
        1px 0 #ff0075,
        -1px 0 #ff0075,
        0 1px #ff0075,
        0 -1px #ff0075;
      }
    </style>
  </head>
  <body>
    <div id="calendar">
      <div id="navigation_panel">
        <button class="month_minus minus">‹</button>
        <span id="background_month"><select id="calendar_month"></select></span>
        <button class="month_plus plus">›</button>
        <button class="year_minus minus">‹</button>
        <input type="text" size="4" id="calendar_year" />
        <button class="year_plus plus">›</button><br />
        <button id="presently">сегодня</button>
      </div>
      <table id="table">
        <thead>
          <tr>
            <td class="week-day">Пн.</td>
            <td class="week-day">Вт.</td>
            <td class="week-day">Ср.</td>
            <td class="week-day">Чт.</td>
            <td class="week-day">Пт.</td>
            <td class="week-day">Сб.</td>
            <td class="week-day">Вс.</td>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
    <script>
Date.prototype.reduce = function(callback, value) {
  var year = this.getFullYear();
  var month = this.getMonth();
  var step = new Date(year, month, 1);
  var last = new Date(year, month + 1, 0);
  step.setHours(24 * (0 - ((step.getDay() + 6) % 7)));
  last.setHours(24 * (6 - ((last.getDay() + 6) % 7)));
  for (var i = 0; step <= last; i++) {
    value = callback(value, new Date(+step), i, this);
    step.setHours(24);
  }
  return value;
};
var data = new Date();
var selectMonth = document.querySelector('#calendar_month');
var monthNames = [
  'Январь',
  'Февраль',
  'Март',
  'Апрель',
  'Май',
  'Июнь',
  'Июль',
  'Август',
  'Сентябрь',
  'Октябрь',
  'Ноябрь',
  'Декабрь',
];
monthNames.forEach(function(monthName, i) {
  selectMonth.options[i] = new Option(monthName, i);
});
selectMonth.addEventListener('change', function() {
  data.setMonth(this.value);
  createCalendar(data);
});
var minusMonth = document.querySelector('.month_minus');
minusMonth.addEventListener('click', function() {
  data.setMonth(data.getMonth() - 1);
  createCalendar(data);
});
var plusMonth = document.querySelector('.month_plus');
plusMonth.addEventListener('click', function() {
  data.setMonth(data.getMonth() + 1);
  createCalendar(data);
});
var minusYear = document.querySelector('.year_minus');
minusYear.addEventListener('click', function() {
  data.setYear(data.getFullYear() - 1);
  createCalendar(data);
});
var plusYear = document.querySelector('.year_plus');
plusYear.addEventListener('click', function() {
  data.setYear(data.getFullYear() + 1);
  createCalendar(data);
});
var inputYear = document.querySelector('#calendar_year');
inputYear.addEventListener('input', function() {
  if (/^\d{4}$/.test(this.value)) {
    data.setYear(this.value);
    createCalendar(data);
  }
});
var currentButton = document.querySelector('#presently');
currentButton.addEventListener('click', function() {
  data = new Date();
  createCalendar(data);
});

var daysTd = document.querySelectorAll('.week-day');
function createCalendar(data) {
  var now = new Date().setHours(0, 0, 0, 0);
  var year = data.getFullYear();
  inputYear.value = year;
  var month = data.getMonth();
  selectMonth.selectedIndex = month;
  currentButton.classList.remove('hide');
  var dayTd = document.querySelector('.week-day.curDay');
  if (dayTd) dayTd.classList.remove('curDay');

  var cls = ['prevMonth', 'curMonth', 'nextMonth'],
    indexCls = 0;
  var html = data.reduce(function(value, current, index, source) {
    var date = current.getDate();
    if (date == 1) indexCls++;
    var className = cls[indexCls];

    if (+now == +current && indexCls == 1) {
      className += ' curDay';
      currentButton.classList.add('hide');
      daysTd[index % 7].classList.add('curDay');
    }
    if (current.getDay() == 1) value += '<tr>';
    return value + '<td class="' + className + '">' + date;
  }, '');
  document.querySelector('#table tbody').innerHTML = html;
}
createCalendar(data);
var timer;
function refresh() {
  window.clearTimeout(timer);
  var finish = new Date().setHours(24, 0, 0, 0);
  finish -= data;
  timer = window.setTimeout(function() {
    createCalendar(data);
    refresh();
  }, finish);
}

refresh();
    </script>
  </body>
</html>
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите доработать скрипт хештега alex72bel Общие вопросы Javascript 1 20.09.2015 23:20
Помогите доработать скрипт меню Фартовый Оффтопик 7 27.11.2014 14:07
Помогите доработать скрипт Joannes Общие вопросы Javascript 0 08.09.2013 21:21
Помогите доработать скрипт Kalashmet Ваши сайты и скрипты 2 02.09.2013 19:50
Помогите доработать скрипт jenya jQuery 12 01.11.2011 09:27