Переключение (или мигание) определенной ячейки в таблице в течение некоторого периода времени - PullRequest
Новая
       1

Переключение (или мигание) определенной ячейки в таблице в течение некоторого периода времени

2 голосов
/ 08 марта 2012

Я создал таблицу в Html, и я хотел бы, чтобы какая-то ячейка мигала (включалась и выключалась), вроде. Можете ли вы сообщить мне, если это возможно с использованием JavaScript.1003 * На изображении ниже, скажем, Row1 и col 1, возможно ли в javascript или html мигать / мигать желтым цветом?Спасибо image file

ОБНОВЛЕНИЕ Я могу прошить ячейки, но в настоящее время все они вспыхивают случайным образом, хотя у меня время такое жеНо я хочу, чтобы все они мигали вместе (одновременно) и гасли, затем снова мигали и гасли

Ответы [ 3 ]

1 голос
/ 08 марта 2012

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

Мой пример . 

var elapsed = 0;
var interval = 250;
var duration = 3000;

function toggle(element) {
    var newClass = element.className == 'highlight' ? '' : 'highlight';
    element.className = newClass;
    elapsed += interval;

    if(elapsed < duration)
        setTimeout(function() { toggle(element); }, interval);
}

var element = document.getElementById('cell');
toggle(element);​

Здесь я использую переменные duration, чтобы установить желаемую продолжительность всей мигающей анимации, elapsed для отслеживания продолжительности мигания (пороговое значение для сравнения с duration) и interval для установки расстояния между каждой вспышкой / переключателем.

Функция toggleзадает имя класса highlight или вообще ничего, в зависимости от того, чем оно в данный момент не является, чтобы получить альтернативное поведение.Учитывая, что duration не был превышен, toggle снова включается через interval миллисекунд.

Обратите внимание, что я использую getElementById для идентификации интересующей ячейки.Если это не подходит для вас, вы можете использовать getElementsByTagName.Например, table.getElementsByTagName('tr')[0].getElementsByTagName('td')[2] получит третий столбец первой строки в таблице.

1 голос
/ 08 марта 2012

Вы можете создать функцию javascript, которая изменяет цвет фона нужной ячейки.Кроме того, вы можете использовать функцию setInterval () для вызова функции по истечении определенного периода времени. 

var flag = true;
function changeColor () {
    if(flag==true){
        document.getElementById("yourId").style.background="yourColor 1";
        flag=false;
    }
    else if (flag==false){
    document.getElementById("yourId").style.background="yourcolor 2";
    flag = true;
    }
}
setInterval("changeColor()", timeinmillisec);
0 голосов
/ 08 марта 2012

Если вы назначите ему идентификатор, вы можете использовать setTimeout(), чтобы изменить его фон через некоторое время, например: 

function changeColour() {
    document.getElementById("myId").style.backgroundColor="yellow";
}
setTimeout("changeColour()", 2000); // Turn it yellow in 2 seconds

Я думаю, вы поняли общую идею, вы можете улучшить код выше, чтобы сделатьоно мигает.

...