Программирование с нуля
@programmirovanies0
86 subscribers
58 links
Канал поможеть научиться программировать с нуля, полезные материалы для обучения, интересные статьи. Все материалы бесплатны.
Телеграм для связи: @booltoken
Download Telegram
About
Blog
Apps
Platform
Join
Программирование с нуля
86 subscribers
Программирование с нуля
🎉 Исследуем мир JavaScript: Создаем интерактивный таймер! ⏲️

Привет, участники канала "Программирование с нуля"! Сегодня мы сделаем еще один шаг на пути к изучению веб-разработки, познакомившись с JavaScript - языком, который добавляет динамику и интерактивность на ваши веб-страницы.🌐

### Почему JavaScript?
JavaScript является неотъемлемой частью веб-разработки. С его помощью можно создавать анимации, обрабатывать пользовательские действия, отправлять запросы на сервер без перезагрузки страницы и многое другое.

🚀 Задача сегодня: Создать простой таймер обратного отсчета на JavaScript.

### Шаги для создания таймера:
1. HTML: Сначала создайте базовую разметку.
2. CSS: Добавьте стили для красивого оформления.
3. JavaScript: Напишем логику таймера.

📝 Код HTML (index.html):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Таймер обратного отсчета</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="timer">
        <h1 id="countdown">00:00:10</h1>
        <button onclick="startTimer()">Старт</button>
    </div>
    <script src="script.js"></script>
</body>
</html>


🎨 Код CSS (styles.css):

#timer {
    text-align: center;
    margin-top: 20vh;
    font-family: Arial, sans-serif;
}

#countdown {
    font-size: 3em;
    color: #333;
}

button {
    font-size: 1em;
    padding: 5px 15px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}


🔧 Код JavaScript (script.js):

let count = 10;
let interval;

function startTimer() {
    interval = setInterval(updateCountdown, 1000);
}

function updateCountdown() {
    const countdownElement = document.getElementById("countdown");
    countdownElement.textContent = `00:00:${count}`;
    if (count === 0) {
        clearInterval(interval);
        countdownElement.textContent = "Время вышло!";
    }
    count--;
}


Теперь откройте файл index.html в браузере, и вы увидите ваш таймер обратного отсчета с кнопкой "Старт". Нажмите кнопку, и таймер начнет отсчет!

Это прекрасный пример того, как можно легко и интересно познакомиться с основами JavaScript. 🌟

Приглашаю вас экспериментировать с кодом: измените время отсчета, добавьте кнопки "Пауза" и "Сброс", или даже создайте визуальные эффекты для завершения отсчета.

Удачного кодинга, и помните, что каждая строка кода приближает вас к мастерству в программировании!

#JavaScript #ВебРазработка #ПрограммированиеСНуля #ИнтерактивныеWebСтраницы
❤1
63 views
Программирование с нуля
🎉 Погружаемся в мир JavaScript: Пишем наш первый скрипт! 🖥️

Привет, участники канала "Программирование с нуля"! Сегодня мы начнем наше путешествие в одну из самых популярных областей веб-разработки - программирование на JavaScript. Этот язык не только является неотъемлемой частью веб-разработки, но и открывает дверь к созданию интерактивных веб-сайтов. Давайте сегодня напишем наш первый JavaScript скрипт - простой таймер!

### Что такое JavaScript?

JavaScript - это динамичный язык программирования, который при выполнении в браузере делает веб-страницы интерактивными. Он позволяет разработчикам добавлять анимированные обновления, интерактивные карты, анимированные 2D и 3D графики, прокручиваемые видео и многое другое.

### Задание: Создаем таймер

Мы напишем простой скрипт, который позволит пользователю задавать таймер и видеть, как время обратного отсчета уменьшается.

📝 HTML код:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Простой Таймер</title>
</head>
<body>
    <input id="time" type="number" min="1" placeholder="Введите время в секундах">
    <button onclick="startTimer()">Запустить таймер</button>
    <h1 id="countdown"></h1>

    <script src="timer.js"></script>
</body>
</html>

📝 JavaScript код (timer.js):
function startTimer() {
    let timeInput = document.getElementById('time').value;
    let countdownElement = document.getElementById('countdown');

    countdownElement.innerHTML = `Осталось времени: ${timeInput} секунд`;

    let interval = setInterval(() => {
        timeInput -= 1;
        countdownElement.innerHTML = `Осталось времени: ${timeInput} секунд`;
        if (timeInput <= 0) {
            clearInterval(interval);
            countdownElement.innerHTML = "Время вышло!";
        }
    }, 1000);
}

### Как это работает?
- HTML создает пользовательский интерфейс, включая поле для ввода времени и кнопку для запуска таймера.
- JavaScript скрипт делает страницу интерактивной. Он считывает значение, введенное в поле, и использует функцию setInterval для уменьшения времени каждую секунду.

### Что дальше?
Поиграйте с кодом! Попробуйте добавить звуковое уведомление или визуальные эффекты при завершении таймера. Экспериментирование — лучший способ учиться.

Надеюсь, этот небольшой проект вдохновит вас продолжить изучение JavaScript и открывать новые возможности для создания интерактивных и захватывающих веб-страниц.

Не забывайте делиться своими успехами и задавать вопросы. Вместе мы сильнее!

#ПрограммированиеСНуля #JavaScript #ВебРазработка #Интерактивность #ОбучениеПрограммированию
76 viewsedited