Javascript.RU

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

Сообщение от рони Посмотреть сообщение
render смотри свои сообщения или мои
тут про render сказал, вообще запутал меня, без бутылки явно не разобраться...
Ответить с цитированием
  #32 (permalink)  
Старый 05.06.2021, 21:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,675

render тело таблицы
Блондинка,

функция получает диапазон и направление, выдаёт html.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            margin: 10px auto;
        }

        td {
            border: solid 1px #000080;
        }
        td.week_day {
            background-color: #7575FF;
        }
    </style>
    <script>
        const render = function(range, horiz) {
            let html = '';
            if (horiz) {
                for (let i = 0, j = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) cls = 'week_day';
                    if (i % 7 == 0) {
                        html += '<tr>';
                    }
                    html += `<td class="${cls}">${range[i]}`;
                }
            } else {
                html = [];
                for (let i = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) {
                        cls = 'week_day'
                        html.push('<tr>')
                    }
                    html[i % 7] += `<td class="${cls}">${range[i]}`;
                }
                html = html.join('')
            }
            return html
        }
    </script>
</head>
<body>
    <table class="test"></table>
    <table class="test"></table>
    <script>
        let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        let tables = document.querySelectorAll('.test');
        let html = render(range);
        tables[0].innerHTML = html;
        html = render(range, true);
        tables[1].innerHTML = html;
    </script>
</body>
</html>
Ответить с цитированием
  #33 (permalink)  
Старый 05.06.2021, 21:26
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,675

Блондинка,
тоже самое, но направление от наличия в теге таблицы класса
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        table {
            margin: 10px auto;
        }

        td {
            border: solid 1px #000080;
        }
        td.week_day {
            background-color: #7575FF;
        }
    </style>
    <script>
        const render = function(range, horiz) {
            let html = '';
            if (horiz) {
                for (let i = 0, j = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) cls = 'week_day';
                    if (i % 7 == 0) {
                        html += '<tr>';
                    }
                    html += `<td class="${cls}">${range[i]}`;
                }
            } else {
                html = [];
                for (let i = 0; i < range.length; i++) {
                    let cls = 'day';
                    if (i < 7) {
                        cls = 'week_day'
                        html.push('<tr>')
                    }
                    html[i % 7] += `<td class="${cls}">${range[i]}`;
                }
                html = html.join('')
            }
            return html
        }
    </script>
</head>
<body>
    <table class="test"></table>
    <table class="test horiz"></table>
    <script>
        let range = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        let tables = document.querySelectorAll('.test');
        tables.forEach(table => {
        let direction = table.classList.contains('horiz');
        table.innerHTML = render(range, direction);
        });
    </script>
</body>
</html>
Ответить с цитированием
  #34 (permalink)  
Старый 11.06.2021, 00:38
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 765

рони,
как тут удалить вторую таблицу, чтобы просто менялся класс таблицы? и удалить(в случае необходимости) элементы с названием месяца и года, из html-кода, чтобы скрипт сначала проверял наличие элементов и вставлял необходимое? проще говоря чтобы на странице была только одна таблица, и вне зависимости от наличия/отсутствия элементов id="month_name" и id="num_year" скрипт выводил необходимое?
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #navigation_panel {
            white-space: nowrap;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            padding: 5px 15px;
            margin: 0 0 5px;
        }
        
        input {
            width: 56px;
            display: inline-block;
            text-align: center;
            border: 1px solid hsl(210, 100%, 50%);
        }
        
        #table_rotate {
            border: 1px solid hsl(210, 100%, 50%);
            border-radius: 12px 12px 0 12px;
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        select {
            border: 1px solid hsl(210, 100%, 50%);
            background-color: hsl(210, 100%, 90%);
            color: hsl(210, 100%, 50%);
        }
        
        .table_month_horiz,
        .table_month_vert {
            width: 250px;
            height: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
        }
        
        td {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 6px;
            text-align: center;
            font: 14px serif;
        }

        #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: 250px;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        #month {
            display: inline-block;
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 8px;
            padding: 5px;
            width: 250px;
        }

        #month_name {
            border: 1px solid hsl(0, 0%, 50%);
            border-radius: 4px;
            padding: 5px;
            margin: 0 0 5px;
        }

        .table_month_vert,
        .table_month_horiz {
            table-layout: fixed;
            width: 100%;
            height: 250px;
            border-spacing: 3px;
        }

        .table_month_horiz tr td:nth-child(1) {
            width: 20%;
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(1) {
        width: 20%;
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_horiz tr td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_horiz tr:nth-child(n+6) td:nth-child(n+2) {
        width: 20%;
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */
        
        .table_month_vert tr:nth-child(1) td.day {
            background-color: hsl(210, 100%, 88%);
            color: hsl(210, 100%, 50%);
            font-weight: bold;
        } /* названия будних дней недели */
        
        .table_month_vert tr:nth-child(1) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 88%);
        color: hsl(348, 100%, 50%);
        font-weight: bold;
        } /* названия выходных дней недели */
        
        .table_month_vert tr:nth-child(n+2) td.day {
        background-color: hsl(210, 100%, 95%);
        color: hsl(210, 100%, 50%);
        } /* будниe */
        
        .table_month_vert tr:nth-child(n+2) td.day:nth-child(n+6) {
        background-color: hsl(348, 100%, 95%);
        color: hsl(348, 100%, 50%);
        } /* выходныe */

    </style>
</head>

<body>
    <div id="num_year"></div>
    <div id="month">
        <div id="navigation_panel">
        <select id="select_month"></select>
        <input id="year_input" type="number" value="">
        <button id="table_rotate">➘</button>
        </div>
        <div id="month_name"></div> 
        <table class="table_month_horiz"></table>
        <table class="table_month_vert"></table> 
    </div>
    <script>
        var calendar = {
            type: 'horiz',
            element: document.querySelector('.table_month_vert'),
            
            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);
                }
            },
            
            render2: function(horiz) {
                var html = '';
                if (horiz) {

                    this.element.classList.add("horiz");
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    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];
                    }
                    html = html.join('')
                }

                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            render: function() {
                var html = '';
                if (this.type == 'vert') {
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_vert');
                    this.element.classList.add("horiz");
                    
                    for (var i = 0, j = 0; i < this.data.length; j = ++i % 7) {
                        if (j == 0) html += '<tr class="week">';
                        html += '<td class="day">' + this.data[i] + '</td>';
                        if (j == 6) html += '</td>';
                    }
                } else {
                    
                    this.element.innerHTML = '';
                    this.element = document.querySelector('.table_month_horiz');
                    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];
                    }
                    html = html.join('');
                    
                }
                this.numYear.textContent = this.year;
                this.monthName.textContent = this.month;
                this.element.innerHTML = html;
            },
            toggle: function(){
                this.type = this.type == 'vert' ? 'horiz' : 'vert';
                this.render();
            },
        };
        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.update(thisYear, thisMonth);
        calendar.render();
        
        selector = document.querySelector('#select_month');
        month_list = ['Январь', 'Февраль', 'Март', 'Апрель', ' Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'];
        for (var i = 0; i < month_list.length; i++){
        selector.options[i] = new Option(month_list[i], i);
        }
        selector.selectedIndex = thisMonth;
        
        //Это для того, чтобы менять календарь при изменении месяца и года
        selector.addEventListener('change', load);
        document.querySelector('#year_input').addEventListener('input', load);
        
        document.getElementById('table_rotate').addEventListener('click', function() {

        calendar.toggle();
        });
        
        function load(){
        var year = document.getElementById('year_input').value;
        var month = selector.selectedIndex;
        calendar.update(year, month);
        calendar.render();
        }

        document.addEventListener("DOMContentLoaded", ()=>{
        document.querySelector('#year_input').value = thisYear;
        load();
        });
    </script>
</body>
</html>

Последний раз редактировалось Блондинка, 11.06.2021 в 00:44.
Ответить с цитированием
  #35 (permalink)  
Старый 11.06.2021, 11:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,675

Блондинка,
https://learn.javascript.ru/modifying-document
Ответить с цитированием
  #36 (permalink)  
Старый 12.06.2021, 19:06
Аватар для Блондинка
Профессор
Отправить личное сообщение для Блондинка Посмотреть профиль Найти все сообщения от Блондинка
 
Регистрация: 24.02.2019
Сообщений: 765

Сообщение от рони Посмотреть сообщение
Блондинка,
https://learn.javascript.ru/modifying-document
рони, не будь таким жестоким, лишь бы издеваться...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как добавить еще один селектор foxfor jQuery 1 29.05.2015 12:32
Соединить 2 скрипта в один или сбор информации из разных автозаполняемых полей Ilya_Ru Общие вопросы Javascript 4 07.04.2015 12:53
как отображать результаты скрипта немедленно, а не после завершения всей функции? sitar32 Элементы интерфейса 6 28.08.2014 17:27
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 13:25
как прекратить выполнение скрипта ? kefi Общие вопросы Javascript 3 31.03.2009 18:05