Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                 <h1>Задачи на даты в JS</h1>

<!-- 1 -->
<p>1. Выведите на экран текущий день, месяц и год в формате 'год-месяц-день'</p>

<!-- 2 -->
<p>2. Выведите на экран текущий месяц словом, по-русски</p>

<!-- 3 -->
<h2>Работа с new Date</h2>
<p>1. Выведите на экран текущий день.</p>

<!-- 4 -->
<p>2. Выведите на экран текущий месяц.</p>

<!-- 5 -->
<p>3. Выведите на экран текущий год.</p>

<!-- 6 -->
<p>4. Выведите на экран текущую дату-время в формате '12:59:59 31.12.2014'.
  Для решения этой задачи напишите функцию, которая будет добавлять 0 перед
  днями и месяцами, которые состоят из одной цифры
  (из 1.9.2014 сделает 01.09.2014).</p>

<!-- 7 -->

<h2>Работа с getDay</h2>

<p>5. Выведите на экран номер текущего дня недели.</p>

<!-- 8 -->
<p>6. Выведите на экран текущий день недели (словом, по-русски). Создайте для
  этого вспомогательную функцию showDay, которая параметром принимает число,
  а возвращает день недели по-русски.</p>

<!-- 9 -->
<p>7. Узнайте, какой был 7-го января 2015 года.</p>

<!-- 10 -->
h2>Работа с getTime</h2>

<p>8. Выведите на экран количество минут с 1-го января 1970 года до
  настоящего момента времени.</p>

<!-- 11 -->
<p>9 .Выведите на экран количество часов, прошедшее между 1 марта 1988 года
  и текущим моментом с помощью Date.parse.</p>
<!-- 12 -->
<h2>Разность между датами</h2>

<!-- 13 -->
<p>10. Выведите на экран количество секунд с начала дня до настоящего
  момента времени.</p>

<!-- 14 -->
<h2>Задачи</h2>
<p>11. Выведите на экран количество секунд, которое осталось до конца дня.</p>

<!-- 15 -->

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

<input type="text" placeholder="Введите дату рождения в формате: 1987-06-15"
style="width: 300px;" onblur="offFocus()" id="myBirthday" value="" maxlength="10">
<input type="text" placeholder="Колличество дней" value="" id='myDate'>
              
            
!

CSS

              
                
              
            
!

JS

              
                // 21 task
<!-- 1 -->
 var date = new Date();
  var today = date.getFullYear() +  '-' + '0' + (date.getMonth() + 1)
  + '-' + '0' + date.getDate();
  console.log(today);

// 2
 var monthes = [
    ['Январь', 'Февраль', 'Март'],
    ['Апрель', 'Май', 'Июнь'],
    ['Июль', 'Август', 'Сентябрь'],
    ['Окрябрь', 'Ноябрь', 'Декабрь'],
  ];

  var date = new Date();
  var month = date.getMonth();

  for (var i = 0; i < monthes.length; i++) {
    var myMonth = monthes[month - month][month];
  }

  document.write(myMonth);
  // Это не решение, а просто, доведение до решения)
// or
var monthes = ['Я', 'Ф', 'М', 'А', 'М', 'И', 'И', 'А', 'С', 'О', 'Н', 'Д'];
  var date = new Date();
  var month = date.getMonth();

  for (var i = 0; i < monthes.length; i++) {
    var myMonth = monthes[month] + 'арт';
  }

  document.write(myMonth);

// 3
var date = new Date();
  var day = date.getDate();
  document.write(day);

//4
var date = new Date();
  var month = date.getMonth();
  document.write(month + 1);

// 5
 var date = new Date();
  var year = date.getFullYear();
  document.write(year);

// 6
 var date = new Date();

  function plusNull() {
    var arr = dayToday;
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
      newArr.push('0' + arr[i]);
    } return (newArr.join('.').slice(0, -5) + arr[2]);
  }

  var time = date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
  var dayToday = [date.getDate(), (date.getMonth() + 1), date.getFullYear()];
  document.write(time + ' ' + plusNull(dayToday) + '<br>');

<!-- or -->

<!-- Этот код, мна нравиться на много больше)) -->
var date = new Date();

function getNull(num) {
  if (num > 0 && num < 10) {
    num = '0' + num;
  } return num;
}

var time = date.getHours() + ':' + getNull(date.getMinutes()) + ':'
+ getNull(date.getSeconds());
var dayToday = getNull(date.getDate()) + '.' + getNull(date.getMonth() + 1) +
'.' + date.getFullYear();
document.write(time + ' ' + dayToday);

// 7
 var date = new Date();
  var toDay = date.getDay();
  document.write(toDay);

//8
 var date = new Date();
  var toDay = date.getDay();

  function showDay() {
    var array = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];

    for (var i = 0; i < array.length; i++) {
      var totalDay = array[toDay];
    } return totalDay;
  }

  document.write(showDay(toDay));

// 9

var date = new Date(2015, 0, 7);
  var day = date.getDay();

  function showOldDay() {
    var week = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];

    for (var i = 0; i < week.length; i++) {
      var oldDay = week[day];
    } return oldDay;
  }

  document.write(showOldDay(day));

// 10
var date = new Date();
var minutes = date.getTime();
document.write(Math.floor(minutes / 60000) + ' минут');
</script>

<h2>Работа с Date.parse</h2>

<!-- 11 -->
var oldDate = new Date('1988-03-01T00:00:00');
  var date = Date.parse(oldDate);

  var now = new Date();
  var nowHour = now.getTime();
  document.write(Math.floor((nowHour - date) / 3600000) + ' часов');

// 13
 var oldDate = new Date('2018-03-03T00:00:00');
  var oldSecond = Date.parse(oldDate);
  var now = new Date();
  var nowSecond = now.getTime();

  document.write(Math.floor((nowSecond - oldSecond) / 1000) + ' секунд');

// 14
var offDay = new Date('2018-03-06T00:00:00');
  var offSeconds = Date.parse(offDay);

  var now = new Date();
  var nowSeconds = now.getTime();
  document.write(Math.floor((offSeconds - nowSeconds) / 1000) + ' секунд' + '<br>');

<!-- or -->


  var offDay = new Date(2018, 2, 6, 0, 0, 0);
  var offSeconds = offDay.getTime();

  var now = new Date();
  var nowSeconds = now.getTime();
  document.write(Math.floor((offSeconds - nowSeconds) / 1000) + ' секунд' + '<br>');


<!-- or -->

var offDay = new Date(offDay.getFullYear(), offDay.getMonth(), offDay.getDate(), 0, 0, 0);
  var offSeconds = offDay.getTime();

  var now = new Date();
  var nowSeconds = now.getTime();
  document.write(Math.floor((offSeconds - nowSeconds) / 1000) + ' секунд');

// 15

 function offFocus() {
    var myBirthday = document.getElementById('myBirthday');
    var myDate = document.getElementById('myDate');

    var dateBirthday = new Date(myBirthday.value + 'T00:00:00');

    var nowDate = new Date();
    var newYearDate = dateBirthday.setFullYear(nowDate.getFullYear());
    var myDay = Math.floor(((newYearDate - nowDate) / (3600000 * 24)));
    myDate.value = myDay + ' дней ';
  }


              
            
!
999px

Console