Временная шкала

[Lamantur]

Код:

// Создать векторную шкалу времени в зависимости от смены
// 1 аргумент - класс
// 2 аргумент - время начала смены
// generateTimeline("class", 20);
//h графикa  = 94,864%, и отступить от левого края 12px
function generateTimeline(c, start){
    var elements = document.getElementsByClassName(c);
    var e;
    for(let ii=0; ii<elements.length; ii++){
        e = elements[ii];
        var str = '<line y1=40% x1=1px y2=40% x2=94.864% style=\'stroke:black;stroke-width:0.2%\' />';
        var text, res;
        var all_h = e.getBoundingClientRect().height;
        var all_w = e.getBoundingClientRect().width;
        var textsize = all_h/2;
        for(var i=0;i<=6;i++){
            // Делим на 12 частей
            let t = i*7.9*2;
            let s = t;
            let timeText = i*2 + start;
            if(timeText > 23) timeText = i*2 - 4;
            str = str + '<line y1=40% x1=' +s+ '% y2=0% x2=' +s+ '% style=\'stroke:black;stroke-width:0.3%\' />';
            text = text + "<text y=100% x=" +t+ "% class=\'small\'>" +timeText+ ":00</text>";
        }
        res = "<svg style = 'width:100%;height:100%;margin-left: 12px;' >" +str+ "</svg>";
        var ret = "<svg width = 100% height = 100%>" +text+ "</svg>";
        var d = "<div style = 'width:100%;height:100%;display:grid'>"+res+ret+"</div>";
        e.innerHTML = d;
    }
}

   

Hello World!:

- Сообщений не найдено.

[Lamantur]

Код:

// Создать векторную шкалу времени в зависимости от смены
// 1 аргумент - класс
// 2 аргумент - время начала смены
// generateTimeline("class", 20);
//h графикa  = 94,864%, и отступить от левого края 12px
function generateTimeline(c, start, minutes){
    var elements = document.getElementsByClassName(c);
    var e;
    for(let ii=0; ii<elements.length; ii++){
        e = elements[ii];
        // главная горизонтальная линия
        var str = '<line y1=40% x1=1px y2=40% x2=94.864% style=\'stroke:black;stroke-width:0.2%\' />';
        var text, res;
        var all_h = e.getBoundingClientRect().height;
        var all_w = e.getBoundingClientRect().width;
        var textsize = all_h/2;
        for(var i=0;i<=12;i++){
            // Делим на 12 часов
            let t = i*7.9;
            let s = t;
            let timeText = i + start;
            if(timeText > 23) timeText = i + start - 24;
            str = str + '<line y1=40% x1=' +s+ '% y2=0% x2=' +s+ '% style=\'stroke:black;stroke-width:0.3%\' />';
            text = text + "<text y=100% x=" +t+ "% class=\'small\'>" + timeText + ":" + minutes + "</text>";
        }
        for(var hi=0;hi<=72;hi++){
            // Делим на 72 части чтобы отображать 10 мин
            let ht = hi*7.9;
            let hs = ht;
            str = str + '<line y1=40% x1=' +hs/6+ '% y2=20% x2=' +hs/6+ '% style=\'stroke:grey;stroke-width:0.1%\' />';
           
        }
        //собираем готовый svg и отправляем его в контейнер
        res = "<svg style = 'width:100%;height:100%;margin-left: 12px;' >" + str + "</svg>";
        var ret = "<svg width = 100% height = 100%>" +text+ "</svg>";
        var ddv = "<div style = 'width:100%;height:20px;display:grid'>"+res+ret+"</div>";
        e.innerHTML = ddv;
    }
}

   

Hello World!:

- Сообщений не найдено.