Страница 3 из 5 < 12 3 45 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   возможно ли чтобы скрипт создавал другой html-код? (https://javascript.ru/forum/misc/82605-vozmozhno-li-chtoby-skript-sozdaval-drugojj-html-kod.html)

Блондинка 30.05.2021 21:46
Цитата:
Сообщение от ksa
Вижу два варианта продолжения...
1. Начать таки читать книжки по HTML, CSS и JavaScript
2. Бросить это дело
я же задала ширину высоту таблице, но не врубаюсь почему стиль не срабатывает... :cray:

рони 30.05.2021 22:20
Блондинка,
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>calendar-rotate</title>
    <style type="text/css">
        .month {
            --wh: 350px; /* менять размер тут px, em, и т.д.*/
            border: 1px solid #000000;
            width: var(--wh);
            height: calc(var(--wh)/7 * var(--col));
            border-spacing: 2px;
            margin: 4px;
        }
        .month td {
            border: 1px solid #000000;
            text-align: center;
            line-height: calc(var(--wh)/7 - 8px);
        }
        .month.vert {
            width: calc(var(--wh)/7 * var(--col));
        }
        .month.vert tbody {
            display: grid;
            grid-gap: 2px;
            grid-template-columns: repeat(var(--col), 1fr);
        }
        .month.vert tbody tr {
            height: calc(var(--wh) - 4px);
            display: grid;
            grid-gap: 1px;
            grid-template-columns: repeat(1, 1fr);
        }
        .day {
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        .day:nth-child(7n + 6),
        .day:nth-child(7n + 7) {
            background-color: hsl(348, 100%, 90%);
            color: hsl(348, 100%, 50%);
        }
    </style>
</head>
<body>
    <div id="calendar_rotate">
        <div id="navigation_panel">
            <button id="month_minus">◀</button>
            <span id="background_month"><select id="month_select"></select></span>
            <button id="month_plus">▶</button>
            <button id="year_minus">◀</button>
            <input id="year_input" type="number" size="4" value="" />
            <button id="year_plus">▶</button>
            <button id="month_rotate">➙</button>
        </div>
        <table class="month vert"></table>
        <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 += '<tr class="week">';
                        html += '<td class="day">' + this.days[i] + '</td>';
                        if (j == 6) html += '</tr>';
                    }
                    this.element.innerHTML = html;
                    this.element.style.setProperty("--col", this.days.length / 7)
                },
                toggle: function() {
                    this.element.classList.toggle('vert');
                },
            };
            var today = new Date(),
                thisYear = today.getFullYear(),
                thisMonth = today.getMonth();
            calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
            selector = document.getElementById('month_select');
            month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
            for (let i = 0; i < month_list.length; i++) {
                selector.options[i] = new Option(month_list[i], i);
            }
            selector.selectedIndex = thisMonth;
            selector.addEventListener('', load);
            document.getElementById('year_input').addEventListener('input', load);
            calendar.element = document.querySelector('.month');
            document.getElementById('month_rotate').addEventListener('click', function() {
                calendar.toggle();
            });
            function load() {
                let year = document.getElementById('year_input').value;
                let month = selector.selectedIndex;
                calendar.update(year, month);
                calendar.render();
            }
            document.addEventListener("DOMContentLoaded", () => {
                document.getElementById('year_input').value = thisYear;
                load();
            });
        </script>
    </div>
</body>
</html>

Блондинка 31.05.2021 01:46
рони,
этот календарь работает намного лучше, но всё равно пиксели прыгают, высота и ширина не одинаковые получаются при гориз и верт раскладке календаря...

не проще ли взять эти два скрипта и объединить в один, и по нажатию на кнопку вывести одну таблицу а вторую скрыть? 

<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);
});

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 indexcurDay;
 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');
 indexcurDay = index % 7;
 }
 value[index % 7] += '<td class="' + className + '">' + date;
 return value
 }, ['<tr><td class="week-day">Пн.',
             '<tr><td class="week-day">Вт.',
             '<tr><td class="week-day">Ср.',
             '<tr><td class="week-day">Чт.',
             '<tr><td class="week-day">Пт.',
             '<tr><td class="week-day">Сб.',
             '<tr><td class="week-day">Вс.']);
 document.querySelector('#table tbody').innerHTML = html.join('');
 var daysTd = document.querySelectorAll('.week-day');
 if(indexcurDay !== void 0) daysTd[indexcurDay].classList.add('curDay');
}
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>



<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 += '<tr class="week">';
                                html += '<td class="day">' + this.days[i] + '</td>';
                                if (j == 6) html += '</td>';
                            }
                            this.element.innerHTML = html;
                        },
                        toggle: function() {
                            this.element.classList.toggle('vert');
                        },
                    };
                    var today = new Date(),
                        thisYear = today.getFullYear(),
                        thisMonth = today.getMonth();
                    calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
                    selector = document.getElementById('month_select');
                    month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
                    for (let i = 0; i < month_list.length; i++){
                        selector.options[i] = new Option(month_list[i], i);
                    }
                    selector.selectedIndex = thisMonth;
                    selector.addEventListener('', load);
                    document.getElementById('year_input').addEventListener('input', load);
                    calendar.element = document.querySelector('.month');
                    document.getElementById('month_rotate').addEventListener('click', function() {
                        calendar.toggle();
                    });
                    function load(){
                            let year = document.getElementById('year_input').value;
                            let month = selector.selectedIndex;
                            calendar.update(year, month);
                            calendar.render();
                    }
                    document.addEventListener("DOMContentLoaded", ()=>{
                        document.getElementById('year_input').value = thisYear;
                        load();
                    });


                </script>

рони 31.05.2021 07:34
Блондинка,
сами, сами...

Блондинка 31.05.2021 22:11
рони,
можешь хоть объяснить, как создать одну таблицу где ячейки с классом week_day в начале каждой строки, и вторую где дни недели идут в ряд, и как заполнить эти обе таблицы датами, но только не 42 дня, а обрезать дни пред и будущего месяца после вс...

Блондинка 01.06.2021 00:56 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
    <style>
      #table_year {
      table-layout: fixed;
      width: 100%;
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      }
      .td_month {
      width: 260px;
      height: 270px;
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      }
      #num_year,
      #month_name {
      background-color: hsl(210, 100%, 95%);
      color: hsl(210, 100%, 50%);
      font: bold 18px serif;
      text-align: center;
      }
      #num_year {
      width: 790px;
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      padding: 5px;
      margin: 0 0 5px 0;
      }
      #month {
      display: inline-block;
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      padding: 5px;
      width: auto;
      }
      #month_name {
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      padding: 5px;
      margin: 0 0 5px 0;
      }
      .day {
      border: 1px solid hsl(0, 0%, 66%);
      width: auto;
      line-height: 30px;
      text-align: center;
      margin: 1px;
      background-color: hsl(210, 100%, 95%);
      color: hsl(210, 100%, 50%);
      }
      .table_month_vert {
      table-layout: fixed;
      width: 100%;
      height: 220px;
      border: 1px solid hsl(0, 0%, 66%);
      border-radius: 4px;
      }
      .week_day {
      width: 20%;
      background-color: hsl(210, 100%, 50%);
      color: hsl(210, 100%, 95%);
      }
      .table_month_vert tr:nth-child(n + 6) td.day {
      background-color: hsl(340, 100%, 95%);
      color: hsl(340, 100%, 50%);
      }
      .table_month_vert tr:nth-child(1) th {
      text-align: center;
      }
    </style>
    </head>
    <body>
    <div id="num_year"></div>
    <div id="month">
    <div id="month_name"></div>
    <table class="table_month_vert"></table><br>
    <table class="table_month_gor"></table>
    </div>
    <script>
           var calendar = {
      update: function(year, month) {
      this.year = year;
      this.month = [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
      var startDay = new Date(year, month, 1);
      var offsetDay = (startDay.getDay() || 7) - 1;
      startDay.setDate(startDay.getDate() - offsetDay);
      var lastDay = new Date(startDay);
      var days = new Date(year, month + 1, 0).getDate();
      days = Math.ceil((days + offsetDay) / 7) * 7;
      lastDay.setDate(lastDay.getDate() + days);
      this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
      while (startDay < lastDay) {
      this.data.push(startDay.getDate());
      startDay.setHours(24);
      }
      },
      render: function() {
      var html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
      for (var i = 0; i < this.data.length; i++) {
      html[i % 7] += '<td class="day">' + this.data[i];
      }
      this.numYear.textContent = this.year;
      this.monthName.textContent = this.month;
      this.element.innerHTML = html.join('');
      },
      };
      var today = new Date(),
      thisYear = today.getFullYear(),
      thisMonth = today.getMonth();
      calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
      calendar.numYear = document.querySelector('#num_year');
      calendar.monthName = document.querySelector('#month_name');
      calendar.element = document.querySelector('.table_month_vert');
      calendar.update(thisYear, thisMonth);
      calendar.render();
    </script>
</body>
</html>


как создать и заполнить вторую таблицу с классом class="table_month_gor"?

рони 01.06.2021 07:37
Цитата:
Сообщение от Блондинка
вторую таблицу с классом class="table_month_gor"?
продублировать три строки внизу скрипта, добавить ниже
calendar.element = document.querySelector('.table_month_gor');
//calendar.update(thisYear, thisMonth); если нужен другой месяц и год уточнить
      calendar.render();

Блондинка 01.06.2021 08:35
Цитата:
Сообщение от рони (Сообщение 537494)
продублировать три строки внизу скрипта, добавить ниже
calendar.element = document.querySelector('.table_month_gor');
//calendar.update(thisYear, thisMonth); если нужен другой месяц и год уточнить
      calendar.render();
рони как создать и вывести вторую таблицу на этот же месяц с классом table_month_gor, но чтобы дни шли в ряд, а не в столбик? 

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
        <style>
          #table_year {
          table-layout: fixed;
          width: 100%;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          .td_month {
          width: 260px;
          height: 270px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          #num_year,
          #month_name {
          background-color: hsl(210, 100%, 95%);
          color: hsl(210, 100%, 50%);
          font: bold 18px serif;
          text-align: center;
          }
          #num_year {
          width: 790px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          margin: 0 0 5px 0;
          }
          #month {
          display: inline-block;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          width: auto;
          }
          #month_name {
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          padding: 5px;
          margin: 0 0 5px 0;
          }
          .day {
          border: 1px solid hsl(0, 0%, 66%);
          width: auto;
          line-height: 30px;
          text-align: center;
          margin: 1px;
          background-color: hsl(210, 100%, 95%);
          color: hsl(210, 100%, 50%);
          }
          .table_month_vert {
          table-layout: fixed;
          width: 100%;
          height: 220px;
          border: 1px solid hsl(0, 0%, 66%);
          border-radius: 4px;
          }
          .week_day {
          width: 20%;
          background-color: hsl(210, 100%, 50%);
          color: hsl(210, 100%, 95%);
          }
          .table_month_vert tr:nth-child(n + 6) td.day {
          background-color: hsl(340, 100%, 95%);
          color: hsl(340, 100%, 50%);
          }
          .table_month_vert tr:nth-child(1) th {
          text-align: center;
          }
        </style>
        </head>
        <body>
        <div id="num_year"></div>
        <div id="month">
        <div id="month_name"></div>
        <table class="table_month_vert"></table><br>
        <table class="table_month_gor"></table>
        </div>
        <script>
               var calendar = {
          update: function(year, month) {
          this.year = year;
          this.month = [ 'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь', ][month];
          var startDay = new Date(year, month, 1);
          var offsetDay = (startDay.getDay() || 7) - 1;
          startDay.setDate(startDay.getDate() - offsetDay);
          var lastDay = new Date(startDay);
          var days = new Date(year, month + 1, 0).getDate();
          days = Math.ceil((days + offsetDay) / 7) * 7;
          lastDay.setDate(lastDay.getDate() + days);
          this.data = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
          while (startDay < lastDay) {
          this.data.push(startDay.getDate());
          startDay.setHours(24);
          }
          },
          render: function() {
          var html = ['<tr class="week_day">', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>', '<tr>'];
          for (var i = 0; i < this.data.length; i++) {
          html[i % 7] += '<td class="day">' + this.data[i];
          }
          this.numYear.textContent = this.year;
          this.monthName.textContent = this.month;
          this.element.innerHTML = html.join('');
          },
          };
          var today = new Date(),
          thisYear = today.getFullYear(),
          thisMonth = today.getMonth();
          calendar.days = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'];
          calendar.numYear = document.querySelector('#num_year');
          calendar.monthName = document.querySelector('#month_name');
          calendar.element = document.querySelector('.table_month_vert');
          calendar.update(thisYear, thisMonth);
          calendar.render();
          calendar.element = document.querySelector('.table_month_gor');
          calendar.update(thisYear, thisMonth);
          calendar.render();
        </script>
    </body>
    </html>

рони 01.06.2021 10:29
Цитата:
Сообщение от Блондинка
но чтобы дни шли в ряд,
либо воспользоватся кучей вариантов, предложенных ранее, с flex или grid, и повернуть строки с помощью css, либо создать свой render
либо взять рендер от вариантов с flex или grid.

Блондинка 01.06.2021 10:46
Цитата:
Сообщение от рони (Сообщение 537504)
либо создать свой render
либо взять рендер от вариантов с flex или grid.
лишь бы поиздеваться над пожилым человеком :'(


Часовой пояс GMT +3, время: 03:51.
Страница 3 из 5 < 12 3 45 >
Показывать 40 сообщений этой темы на одной странице