Как выполнить код JS без перезагрузки страницы?

Рейтинг: 0Ответов: 0Опубликовано: 27.03.2023

Подскажите пожалуйста, есть код JS, до ширины экрана в 480px выполняется один код, после 480px выполняться должен другой. Но без перезагрузки страницы код не выполняется, есть ли методы что-бы выполнить код без перезагрузки страницы? Заранее извиняюсь за тупой вопрос, в js я еще новичек и в интернете особо нечего не нашел(или плохо искал). Спасибо

const mainCircle = document.querySelector('.circle');

function circle3D() {
    if (mainCircle) {
        if (document.documentElement.clientWidth > 480) {
            let radius = 180;
            let countCircle = -1;
            function generateLetters(selector, text, colorCircle) {
                const letters = text.split('');
                const step = 360 / letters.length;
                countCircle = -1; // Сброс счетчика слов
                letters.forEach((l, i) => {
                    const span = document.createElement('span');
                    changeColor(l, span, colorCircle);
                    const deg = step * i;
                    span.style.transform = transform(deg, radius);
                    selector.append(span);
                });
            }
            function changeColor(l, span, colorCircle) {
                if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
                span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
                span.style.color = colorCircle[countCircle]; //Присваиваем цвет
            }
            function transform(deg, radius = 180) {
                return `rotateY(${deg}deg) translateZ(${radius}px)`;
            }
            let circle_1 = document.querySelector('.circle_1');
            let content_1 = 'DevelopmentDevelopmentDevelopmentDevelopment';
            let color_1 = ['#ccba96', '#161616', '#ccba96', '#161616'];
            generateLetters(circle_1, content_1, color_1);

            let circle_2 = document.querySelector('.circle_2');
            let content_2 = 'DesignDesignDesignDesignDesign';
            let color_2 = ['#ccba96', '#161616', '#ccba96', '#161616', '#ccba96'];
            generateLetters(circle_2, content_2, color_2);

            let circle_3 = document.querySelector('.circle_3');
            let content_3 = 'MarketingMarketingMarketingMarketing';
            let color_3 = ['#ccba96', '#161616', '#ccba96', '#161616'];
            generateLetters(circle_3, content_3, color_3);
        } else {
            let radius = 140;
            let countCircle = -1;
            function generateLetters(selector, text, colorCircle) {
                const letters = text.split('');
                const step = 360 / letters.length;
                countCircle = -1; // Сброс счетчика слов
                letters.forEach((l, i) => {
                    const span = document.createElement('span');
                    changeColor(l, span, colorCircle);
                    const deg = step * i;
                    span.style.transform = transform(deg, radius);
                    selector.append(span);
                });
            }
            function changeColor(l, span, colorCircle) {
                if (l.toUpperCase() === l) ++countCircle; //Определяем новое слово по заглавной букве и увеличиваем счетчик слов
                span.innerText = l.toUpperCase(); //В css к верхнему регистру не приводим делаем это здесь
                span.style.color = colorCircle[countCircle]; //Присваиваем цвет
            }
            function transform(deg, radius = 140) {
                return `rotateY(${deg}deg) translateZ(${radius}px)`;
            }
            let circle_1 = document.querySelector('.circle_1');
            let content_1 = 'DevelopmentDevelopment';
            let color_1 = ['#ccba96', '#161616'];
            generateLetters(circle_1, content_1, color_1);

            let circle_2 = document.querySelector('.circle_2');
            let content_2 = 'DesignDesignDesign';
            let color_2 = ['#ccba96', '#161616', '#ccba96'];
            generateLetters(circle_2, content_2, color_2);

            let circle_3 = document.querySelector('.circle_3');
            let content_3 = 'MarketingMarketing';
            let color_3 = ['#ccba96', '#161616'];
            generateLetters(circle_3, content_3, color_3);
        }
    }
}
circle3D();
window.addEventListener('resize', circle3D)

Ответы

Ответов пока нет.