Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Правила Карта Блоги Социальные группы Поиск Сообщения за день  
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
6 / 6 / 2
Регистрация: 09.01.2013
Сообщений: 258
1

Моргание ячейки таблицы

06.12.2020, 01:29. Просмотров 960. Ответов 3
Метки bottle, css, html, python 2.7 (Все метки)
Добрый день.
Имею такой код:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

%rebase('index.html', page='')
 
 
% include('menu.html')
 
<script type="text/javascript">
    var X = 0;
    var Y = 0;
 
    function allowDrop(ev) {
      ev.preventDefault();
    }
 
    function drag(ev) {
    //  debugger;
        ev.dataTransfer.setData("text", ev.target.id);
    }
 
    function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("text");
      // ev.target.appendChild(document.getElementById(data));
 
      //console.log(ev)
 
      //id = document.getElementById(data);
      document.getElementById(data).style.position = "absolute";
      document.getElementById(data).style.left = (ev.x - X) + "px";
      document.getElementById(data).style.top = (ev.y - Y) + "px";
 
      // 1. Создаём новый объект XMLHttpRequest
      var xhr = new XMLHttpRequest();
 
      // 2. Конфигурируем его: GET-запрос на URL 'phones.json'
      xhr.open('GET', '/save?id=' + data + '&x=' + (ev.x - X) + '&y=' + (ev.y - Y) , true);
 
      // 3. Отсылаем запрос
      xhr.send();
 
 
    }
 
    function lol(ev, th){
      // debugger
       X =  ev.clientX - th.offsetLeft; //ev.layerX;
       Y =  ev.clientY - th.offsetTop; //ev.layerY;
       console.log([X,Y])
    }
 
</script>
 
<div id="div1" style="width:1900px; min-height:950px; border: solid 1px #000" ondrop="drop(event)" ondragover="allowDrop(event)">
 
    % for _id, grp in groups.items():
 
    <div id="group-{{_id}}" onmousedown="lol(event, this)" draggable="true" ondragstart="drag(event)" width="336" height="69" style="font-size:20px; font-weight: bold; float:left; margin:20px; {{ 'position:absolute; left:%spx;top:%spx' % (grp.get('x',''),  grp.get('y','')) if grp.get('x') else '' }}">
 
        <table>
            % cols = grp.get('cols', 2)
            % rows = len(grp.get('objs', [])) / cols
 
            <tr>
                <td colspan="{{cols}}">{{grp.get('name','')}}</td>
            </tr>
            % closed = True
 
            % for N, obj in enumerate(grp.get('objs', [])):
                % if N % cols == 0:
                    % closed = False
                    <tr>
                % end
                         <td class="obj{{obj.get('id','')}}" style="border: solid 2px #000; border-radius: 5px; background: {{ COLOR_ON if obj.get('up',0) else COLOR_OFF }}" title="{{obj.get('second_name', '')}}">
                                      <img style="float:left; width:30px; border-radius: 2px; border: solid 2px #{{ COLOR_ON if obj.get('up', 0) else COLOR_OFF }}" src="/static/img/{{ 'ip2_on.png' if obj.get('status', {}).get('ip2', 0) else 'ip2_off.png' }}">
                                      &nbsp;
                                      <img style="float:left; width:30px; border-radius: 2px; border: solid 2px #{{ COLOR_ON if obj.get('up', 0) else COLOR_OFF }}" src="/static/img/{{ 'ip3_off.png' if obj.get('status', {}).get('ip3', 0) else 'ip3_on.png' }}">
 
                                   {{obj.get('name')}}&nbsp;
                        </td>
                % if N % cols == cols - 1:
                    % closed = True
                    </tr>
                % end
            % end
 
                % if not closed:
                    </tr>
                % end
        </table>
 
    </div>
 
    % end
 
</div>
 
 
 
% include('footer.html', stat=stat, mon=mon)
он рабочий, на текущий момент замечаний нет.
подскажите, как его доработать, чтобы вот эта часть:
HTML5
1
2
3
4
5
6
7

                         <td class="obj{{obj.get('id','')}}" style="border: solid 2px #000; border-radius: 5px; background: {{ COLOR_ON if obj.get('up',0) else COLOR_OFF }}" title="{{obj.get('second_name', '')}}">
                                      <img style="float:left; width:30px; border-radius: 2px; border: solid 2px #{{ COLOR_ON if obj.get('up', 0) else COLOR_OFF }}" src="/static/img/{{ 'ip2_on.png' if obj.get('status', {}).get('ip2', 0) else 'ip2_off.png' }}">
                                      &nbsp;
                                      <img style="float:left; width:30px; border-radius: 2px; border: solid 2px #{{ COLOR_ON if obj.get('up', 0) else COLOR_OFF }}" src="/static/img/{{ 'ip3_off.png' if obj.get('status', {}).get('ip3', 0) else 'ip3_on.png' }}">
 
                                   {{obj.get('name')}}&nbsp;
                        </td>
моргала в течении 300 или другого числа секунд при смене статуса obj.get('up',0) с 1 на 0, а затем согласно вышенаписанному коду работало дальше.

все что нашел в инете, может только или заставить моргать постоянно или при наведении, но не оставить дальше нужный цвет.
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 06.12.2020, 01:29
Ответы с готовыми решениями:

Изменение ячейки таблицы на текстовое поле с содержанием ячейки при клике на неё
Доброго времени суток! Подскажите, как реализовать? Есть некая таблица, в которой хранятся 7...

как присвоить значение ячейки из одной таблицы в ячейку другой таблицы?
Есть две таблицы &quot;услуга в заказе&quot;(код заказа, код работы, исполнитель,дата, сумма за услугу) и...

Заполнить ячейки таблицы из условия where этой же таблицы?
Добрый вечер. В таблице есть 4 поля. Дисциплина,Часы, Имя, Часы Всего. Чем заполнять ячейки я...

ячейки таблицы
Ячейки HTML таблицы могут содержать: • Теги форматирования на уровне текста (inline elements)...

3
6 / 6 / 2
Регистрация: 09.01.2013
Сообщений: 258
07.01.2021, 20:52  [ТС] 2
переделал страницу, сделал скрипт JS

строки:
было:
Javascript
1
2
3

                        for(j=0; j<divs.length; j++){
                               divs[j].style.background = onoff == 'on' ? COLOR_ON : COLOR_OFF;
                        }
стало:
Javascript
1
2
3
4
5
6
7
8

                        for(j=0; j<divs.length; j++){
                               old_color = divs[j].style.background;
                               divs[j].style.background = onoff == 'on' ? COLOR_ON : COLOR_OFF;
                                if (old_color == COLOR_ON && onoff == 'off'){
                                    localStorage.setItem('obj' + id, new Date().getTime());
                                    debugger;
                                }
                        }
в скрипте в целом:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<script>
    function news(){
    //alert(tab);
 
    var xhr = new XMLHttpRequest();
    xhr.withCredentials =  true;
 
    // 2. Конфигурируем его: GET-запрос на URL 'phones.json'
    xhr.open('GET', 'news?tab='+tab, true);
 
    // 3. Отсылаем запрос
    xhr.send();
 
    xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
 
                arr = JSON.parse(xhr.response);
                play = false;
 
                //debugger;
 
                objs = arr['objs'];
                logs = arr['log'];
 
                alert = document.getElementById('alert');
 
                for(i=0; i<objs.length; i++){
 
                        id = objs[i][0];
                        html = objs[i][1];
                        onoff = objs[i][2];
                        alrt = objs[i][3];
                        msg = objs[i][4];
 
                        card = document.getElementById('obj' + id);
 
                        if (card){
                               card.style.background = onoff == 'on' ? COLOR_ON : COLOR_OFF;
                               card.innerHTML = html;
                        }
 
                        divs = document.getElementsByClassName('obj' +id)
 
                        for(j=0; j<divs.length; j++){
                               old_color = divs[j].style.background;
                               divs[j].style.background = onoff == 'on' ? COLOR_ON : COLOR_OFF;
                                if (old_color == COLOR_ON && onoff == 'off'){
                                    localStorage.setItem('obj' + id, new Date().getTime());
                                    debugger;
                                }
                        }
 
                        if (alrt){
                                wrp = document.createElement('div');
                                wrp.setAttribute("id", "alert"+id);
 
                                styleString = 'width:80%; margin-left:10%; margin-bottom: 15px;';
                                wrp.setAttribute('style', styleString);
 
                                card = document.createElement('div');
                                color = onoff == 'on' ? COLOR_ON : COLOR_OFF;
                                styleString = 'background:'+color;
 
                                card.setAttribute('style', styleString);
                                card.innerHTML = html;
 
                                wrp.innerHTML =  msg;
                                wrp.insertBefore(card, wrp.firstChild);
 
                                alert.insertBefore(wrp, alert.firstChild);
                                alert.style.display='block';
 
                                setTimeout(delalert, 10000, "alert"+id);
 
                                if (!play){
                                    var x = document.getElementById("aud-" + onoff);
                                    x.play();
                                    play = true;
                                }
                        }
 
 
                }
 
                log = document.getElementById('log');
 
                if (log){
                    debugger;
                    for(i=0; i<logs.length; i++){
                        log.insertBefore(document.createElement('br'), log.firstChild);
                        span = document.createElement('span')
                        span.innerHTML = logs[i];
                        log.insertBefore(span, log.firstChild);
 
                    }
 
                }
 
            }
        }
 
    }
 
    setInterval(news, 3000);
 
    function blink(){
 
            var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
            var bodybgarrayno = Math.floor(Math.random() * colors.length);
            var selectedcolor = colors[bodybgarrayno];
 
            for (var id = 1; id <= 10 ; id++){
                    tm = localStorage.getItem('obj' + id  );
                    if ( tm && parseInt(tm) + 2 * 60 * 1000 > new Date().getTime() ){
                         $(".obj"  + id ).css("background",selectedcolor);
                    }
            }
    }
 
 
    setInterval(blink, 3000);
</script>
если вынести в отдельный скрипт:
Javascript
1
2
3
4
5
6
7
8
9
10

    function blink(){
 
            var colors = ["#0099cc","#c0c0c0","#587b2e","#990000","#000000","#1C8200","#987baa","#981890","#AA8971","#1987FC","#99081E"];
            var bodybgarrayno = Math.floor(Math.random() * colors.length);
            var selectedcolor = colors[bodybgarrayno];
 
 
                         $(".obj2").css("background",selectedcolor);
    setInterval(blink, 3000);
    }
то работает, если задать четко ID class.
Подскажите, куда копать, чтобы заработало.

Добавлено через 13 минут
0
6 / 6 / 2
Регистрация: 09.01.2013
Сообщений: 258
09.01.2021, 20:52  [ТС] 3
подскажите с решением...

old_color = divs[j].style.background;
выдает в формате: rgb(76, 187, 23)
как этот ответ можно переделать в формат #4cbb17 ?
0
Эксперт JS
2024 / 1084 / 407
Регистрация: 29.04.2016
Сообщений: 2,603
10.01.2021, 06:51 4
Цитата Сообщение от Серый_Ветер Посмотреть сообщение
как этот ответ можно переделать в формат #4cbb17 ?
https://codepen.io/Mr_Sergo/pe... itors=0012
Javascript
1
2
3
4
5
6

let old_color = 'rgb(76, 187, 23)'
let rgbTohex = rgb => {
  let a = rgb.replace(/[rgb() ]/g ,'').split(',')
  return `#${((1 << 24) + (+a[0] << 16) + (+a[1] << 8) + +a[2]).toString(16).slice(1)}`
}
console.log( rgbTohex(old_color) )  // #4cbb17
основная часть функции rgbTohex не моя, загуглил
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 10.01.2021, 06:51

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

Ячейки таблицы в IE9
Неожиданно наткнулся на проблему отображения таблицы в IE9 (001.png). В строке появляется &quot;пустая&quot;...

Закрашивание ячейки таблицы
дело состоит в следующем: нужно сделать так, чтоб в таблице (StringGrid) закрашивался фон...

ячейки таблицы в цыкле
Вобщем суть такова. Из базы данных вытаскиваем картинку а название к ней. в даном примере картинка...

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

Зафиксировать ячейки таблицы
XML создаю программно: tablelayout ----tablerow1 --------linearlayout1 ------------TextView1...

Переполнение ячейки таблицы
Здравствуйте. Помогите пожалуйста разобраться в следующей ситуации: Допустим есть див и ячейка...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Реклама - Обратная связь
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.