JavaScript: 10 Уникальных Кодов Программ для Ваших Проектов

JavaScript: 10 Уникальных Кодов Программ для Ваших Проектов

В мире веб-разработки JavaScript остается одним из самых востребованных языков программирования. Он предоставляет разработчикам множество возможностей для создания интерактивных и динамичных приложений. В этой статье мы представим 10 уникальных javascript кодов программ, которые помогут улучшить ваши проекты и упростить разработку.

1. Слайдер изображений

Создание слайдера изображений может быть легким и быстрым. Вот простой код для реализации:

let index = 0; const images = document.querySelectorAll('.slider img'); setInterval(() => { images[index].style.display = 'none'; index = (index + 1) % images.length; images[index].style.display = 'block'; }, 2000);

2. Анимация кнопки при наведении

Добавьте интерактивности вашим кнопкам с помощью анимации:

const button = document.querySelector('.animate-button');
button.addEventListener('mouseover', () => {
    button.style.transform = 'scale(1.1)';
});
button.addEventListener('mouseout', () => {
    button.style.transform = 'scale(1)';
});

3. Валидация формы

Проверьте правильность введенных данных с помощью простого скрипта:

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
    const email = form.querySelector('input[type="email"]').value;
    if (!email.includes('@')) {
        alert('Введите корректный email');
        event.preventDefault();
    }
});

4. Генератор случайных чисел

Создайте генератор случайных чисел для ваших приложений:

function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }

5. Счетчик на веб-странице

Добавьте счетчик на вашу страницу, который будет отсчитывать время:

let count = 0;
setInterval(() => {
    count++;
    document.querySelector('.counter').innerText = count;
}, 1000);

6. Модальное окно

Создайте простое модальное окно для отображения важной информации:

const modal = document.querySelector('.modal'); document.querySelector('.open-modal').onclick = () => { modal.style.display = 'block'; }; document.querySelector('.close-modal').onclick = () => { modal.style.display = 'none'; };

7. Табы на странице

Сделайте вашу страницу более организованной с помощью табов:

const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
    tab.onclick = () => {
        document.querySelector('.active').classList.remove('active');
        tab.classList.add('active');
    };
});

8. Список задач

Создайте простой список задач с возможностью добавления и удаления:

const tasks = [];
function addTask(task) {
    tasks.push(task);
    renderTasks();
}
function renderTasks() {
    const taskList = document.querySelector('.task-list');
    taskList.innerHTML = tasks.map(task => `
${task}
`).join('');
}

9. Календарь событий

Создайте интерактивный календарь для управления событиями:

const events = {}; function addEvent(date, event) { if (!events[date]) events[date] = []; events[date].push(event); }

10. Таймер обратного отсчета

Реализуйте таймер обратного отсчета для ваших мероприятий:

function countdown(seconds) {
    let timer = setInterval(() => {
        if (seconds <= 0) {
            clearInterval(timer);
            alert('Время вышло!');
        } else {
            console.log(seconds);
            seconds--;
        }
    }, 1000);
}

Эти javascript коды программ помогут вам ускорить процесс разработки и добавить функциональность в ваши проекты. Используйте их как основу и адаптируйте под свои нужды!