Как я могу поместить буквы таймера обратного отсчета ниже таймера

Например: 1 23 3 59 д ч м с

как я могу сделать это с моим существующим кодом?

мой код:

index.html

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>      
    <h2 id = "countdown"></h2>  
    <script src = "main.js"></script>
</body>
</html>

main.js

CountDownTimer('06/15/2022 07:30 PM', 'countdown');

function CountDownTimer(dt, id) {
    let end = new Date(dt);
    let _second = 1000;
    let _minute = _second * 60;
    let _hour = _minute * 60;
    let _day = _hour * 24;
    let timer;

    function showRemaining() {
        let now = new Date();
        let distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'The event started!';
            
            return;
        }
        
        let days = Math.floor(distance / _day);
        let hours = Math.floor((distance % _day) / _hour);
        let minutes = Math.floor((distance % _hour) / _minute);
        let seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days;
        document.getElementById(id).innerHTML += hours;
        document.getElementById(id).innerHTML += minutes;
        document.getElementById(id).innerHTML += seconds;
    }

    timer = setInterval(showRemaining, 1000);

}

Я мог получить его рядом с буквами, но не ниже каждого таймера... Кстати, я новичок в JS.

Я не уверен, что полностью понимаю ваш вопрос. Не могли бы вы попытаться переформулировать его? В частности, что вы подразумеваете под «Например: 1 23 3 59 д ч м с» и «ниже каждого таймера». Спасибо!

— 19.03.2022 05:03

@RyanO'D Да, я имею в виду, что я хочу, чтобы d (для дней) было ниже 1, h (для часов) было ниже 23 и так далее. Благодарю вас!

— 19.03.2022 05:13

Вы хотите один за другим сверху вниз справа?

— 19.03.2022 05:33

@dineshoz да, насколько я понимаю.

— 19.03.2022 05:38

Посмотрите на опубликованный ответ. Вы это имели в виду?

— 19.03.2022 05:41

@dineshoz нет, только буквы. но во второй строке под временем время должно оставаться таким, как я написал. Спасибо!

— 19.03.2022 05:43

прокомментируйте ожидаемый результат

— 19.03.2022 05:45

@dineshoz таймер буквы (на одну строку ниже таймера)

— 19.03.2022 05:47

Ожидаемый результат: таймер письма?

— 19.03.2022 05:48

@динешоз да. но не рядышком. д ниже дней. ч ниже часов и так далее.

— 19.03.2022 05:51

Проверьте решение прямо сейчас!

— 19.03.2022 05:53

javascript

19.03.2022 04:34

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

CountDownTimer('06/15/2022 07:30 PM', 'countdown');

function CountDownTimer(dt, id) {
    let end = new Date(dt);
    let _second = 1000;
    let _minute = _second * 60;
    let _hour = _minute * 60;
    let _day = _hour * 24;
    let timer;

    function showRemaining() {
        let now = new Date();
        let distance = end - now;
        if (distance < 0) {
            clearInterval(timer);
            document.getElementById(id).innerHTML = 'The event started!';
            
            return;
        }
        
        let days = Math.floor(distance / _day);
        let hours = Math.floor((distance % _day) / _hour);
        let minutes = Math.floor((distance % _hour) / _minute);
        let seconds = Math.floor((distance % _minute) / _second);

        document.getElementById(id).innerHTML = days+ " ";
        document.getElementById(id).innerHTML += hours + " ";
        document.getElementById(id).innerHTML += minutes+ " ";
        document.getElementById(id).innerHTML += seconds+ " <br/>";
        
        document.getElementById(id).innerHTML += "D ";
        document.getElementById(id).innerHTML += "M ";
        document.getElementById(id).innerHTML += "H ";
        document.getElementById(id).innerHTML += "S ";
    }

    timer = setInterval(showRemaining, 1000);

}

<head>
    <meta charset = "UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
</head>
<body>      
    <h2 id = "countdown"></h2>  
    <script src = "main.js"></script>
</body>

19.03.2022 05:40

Другие вопросы по теме

Табулятор: autoColumnsDefinitions с использованием пользовательского форматирования ячеек и динамически определяемых полей?

Родительский элемент не определен

Существуют ли типы для MS Edge, как для Chrome?

Отображение, заставляющее все элементы массива отображаться в React

Есть ли способ добавить другое значение к ключу в объекте в React?

Uncaught ReferenceError: useStudent не определен

Бессмысленная стоимость в системе цен js

HTTP-поток с использованием Axios (Node JS)

Как получить значения для третьего объекта Json с помощью Javascript

Как удалить несколько элементов из массива?

Как я могу поместить буквы таймера обратного отсчета ниже таймера

Ответы 1

Другие вопросы по теме

Похожие вопросы