Верно ли решена задача? Что можно улучшить?

345

10 ноября 2017, 11:08

Создайте инпут, в который пользователь вводит дату своего рождения в формате '2014-12-31' (с конкретным годом). По потери фокуса выведите под инпутом сколько дней осталось до его дня рождения. Воспользуйтесь методом Date.parse.

На имена переменных и обработчик в атрибуте можно не обращать внимание.

function gdate(elem) { 
	var inputValue = elem.value; 
	var date = new Date(); 
	var fromNow = Date.parse(String(date.getFullYear()) + '-' + (date.getMonth() + 1) + '-' + date.getDate()); 
	var fromTarget = Date.parse(inputValue); 
	var result = (fromTarget - fromNow) / (1000 * 60 *60 *24) ; 
 
	document.getElementById("output").innerHTML = Math.round(result); 
}

input { 
	width: 250px; 
	padding: 5px 10px; 
}

<input type="text" placeholder="Введите дату в формате 2014-12-31" onblur="gdate(this)"> 
	<p id="output"></p>

Answer 1

// Получим элемент с id="date-input" 
document.querySelector('#date-input') 
  // Повесим обработчик 
  .addEventListener('blur', function() { 
    // bd - день рождения 
    // Date.parse не обязательна, 
    // можно просто new Date(this.value) 
    let bd = new Date(Date.parse(this.value)) 
    // now - дата сейчас 
    let now = new Date 
    // Обновим год дня рождения на текущий 
    bd.setFullYear(+now.getFullYear()) 
    // Если в этом году уже был день рождения 
    if (bd <= now) { 
      // Переносим на след. год 
      bd.setFullYear(+bd.getFullYear() + 1) 
    } 
    // Получаем разницу во времени 
    let diff = Math.round((+bd - now) / 86400000) 
    document.getElementById('output').innerHTML = diff 
  })

input { 
  width: 250px; 
  padding: 5px 10px; 
  font-size: 14px; 
  font-family: Helvetica, Arial, sans-serif; 
  border-radius: 4px; 
  border: 1px solid #bbb; 
  color: #222; 
  padding: 10px; 
  appearance: none; 
  webkit-appearance: none; 
}

<input id="date-input" type="text" placeholder="Введите дату в формате 2014-12-31"> 
<p id="output"></p>

Создание сайта для дропшиппинга в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Создание и добавление в массив “на лету”

Пытаюсь обновлять значение переменной, если это строка, то переводить ее в массив c одним индексом

288

javascript

Как прекратить дублирование child-components при routes

Доброго дня всем!Люди добрые не подскажите в чем может быть моя проблема,уже загуглилсяПроблема в следующем, есть основной компонент регистрации,...

284

javascript

Vue v-for - не понятная ситуация с выводом в console.log

В примере ниже осуществляется вывод списка в HTMLВывод в HTML происходит нормально

241

javascript

Не объявляется переменная в JS

Добрый день!

312