Конвертация html в javascript

167

09 февраля 2019, 05:20

можете объяснить,как можно вот этот код (структура и стили) представить в виде js файла? по сути нужно конвертировать html файл в js объекты которые в свою очередь конвертируются в Dom элементы. Без использования библиотек.

<!DOCTYPE html>
<html>
<head>
    <title>stopwatch</title>
    <meta charset="utf-8">
</head>
<body>
<button class="open-record-panel-btn">Открыть / скрыть панель</button>


<div class="recordPanel hidden">
    <svg id="mouse-circle"></svg>
    <div class="recordPanel__text">
        Запишите:
    </div>
    <div class="recordPanel__start recordPanel__btn">
        <img src="assets/images/start.png">
        <span>Записать</span>
    </div>
    <div class="recordPanel__stop recordPanel__btn disabled">
        <img src="assets/images/stop.png">
        <span>Стоп</span>
    </div>
    <div class="recordPanel__timer recordPanel__text">
        00:00:00
    </div>
    <div class="recordPanel__settings recordPanel__btn">
        <img src=assets/images/settings.png>
        <span>Параметры</span>
    </div>
    <div class="recordPanel__settings-window">
        <h3 style="margin: 0;">
            Окно настроек
        </h3>
        <br>
        <div style="text-align: right;">
            <label style="margin-right: 5px;">
                Путь к файлу записи:
            </label>
            <input type="text">
            <button>Обзор</button>
            <br><br>
            <button class="recordPanel__settings-window-ok">
                Ок
            </button>
            <button class="recordPanel__settings-window-cancel">
                Отмена
            </button>
        </div>
    </div>
    <div class="recordPanel__close">✖</div>
</div>
<div>
    Текст
</div>
</body>
</html>

В html должна остаться только кнопка "открыть/скрыть панель" и просто подключенный js файл,в котором все находится И вот такой css

body {
    padding-top: 50px;
}
.recordPanel.hidden {
    display: none;
}
.recordPanel {
    display: flex;
    justify-content: flex-start;
    color: #0070C0;
    height: 30px;
    border-bottom: 1px solid #0070C0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 5px;
    background: white;
}
.recordPanel__timer {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
.recordPanel__btn img {
    margin-right: 6px;
}
.recordPanel__btn {
    margin: 0 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    color: black;
    padding-right: 5px;
}
.recordPanel__btn.disabled {
    color: grey;
    background: #ccc;
    border-radius: 20px;
    cursor: no-drop !important;
}
.recordPanel__btn:hover:not(.disabled) {
    background:gainsboro;
    border-radius: 15px;
}
.recordPanel__text {
    display: flex;
    align-items: center;
    margin: 0 10px;
}
.recordPanel__settings-window {
    display: none;
    position: relative;
    top: 35px;
    left: 190px;
    margin-left: -422px;
    border: 1px solid blue;
    background: white;
    width: 390px;
    height: 100px;
    padding: 15px;
}
.recordPanel__settings-window.visible {
    display: block !important;
}
.recordPanel__close {
    position: absolute;
    right: 20px;
    cursor: pointer;
}
#mouse-circle {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    box-shadow: yellow;
    background: yellow;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0.4;
}
.recordPanel:not(.recording) #mouse-circle {
  display: none;
}
.recordPanel.recording #mouse-circle {
  display: block;
}

Answer 1

<div id='test'></div>
<script type='text/javascript'>
    var o=document.createElement('div')
    o.innerHTML = 'Привет!'
    document.getElementById('test').appendChild(o)
</script>

Например так.

Делаете кнопку и вешаете на нее onclick с запуском функции создающей элементы.

Но к чему такой велосипед? Не проще ли оставить все как есть и по событию просто убирать свойство display:block?

Нарпимер так

function myFunction() {
    var element = document.getElementsByClassName("hidden");
    element[0].style.display = "block";
}

Создание интернет-магазина парфюмерии в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Подсказки для ячеек в таблице HTML [закрыт]

Есть сайтик ссылка нужно сделать подсказку (картинка) ячеек примерно как на этом сайте

140

jQuery

Конвертация html в javascript

Подсказки для ячеек в таблице HTML [закрыт]

Конфликт слайдера

Получение XML на asp.net

Ошибка в чтении до пробела