Добавить эффект кнопке

@Dmitriy2840 · Регистрация: 17.09.2015

Студворк — интернет-сервис помощи студентам

есть вот такой код, который при выполнении условия возвращает цвет в

HTML5
1
input

, мне необходимо что бы когда загорается красный цвет, добавить для него эффект мигания. уже голову сломал, Создать эффект в CSS и поместить его в переменную, не получается, или не хватает навыков. Подскажите кто знает как передать эффект

PHP
1
2
3
4
5
6
7
8
9
10
11
12
if ($e22 > 40){
 
        if($delta6 >= 30) return "#11f543";
 
             elseif($delta6 >=20) return "#FAFA04";
 
                elseif($delta6 <= 19) return "#FF000B";
 
                    return "#FF000B";
    
 
   }

@Пифагор · 07.05.2019, 17:59

Dmitriy2840, это проще на JS сделать

HTML5
1
<input id="button" type="button" value="asdasdasd">

JavaScript
1
2
3
4
5
6
var timerId = setInterval(function() {
    if(document.querySelector("#button").style.backgroundColor == "red"){
        document.querySelector("#button").style.backgroundColor = "green";
    }else
        document.querySelector("#button").style.backgroundColor = "red";
}, 2000);

Добавлено через 38 секунд
https://jsfiddle.net/75wuLnyc/

Добавлено через 1 минуту
ну и добавить нужные условия типа "когда загорается красный цвет".

@imaster · 07.05.2019, 18:01

Сообщение от Dmitriy2840

Создать эффект в CSS и поместить его в переменную

В переменную вам достаточно поместить CSS класс. А уже к этому классу применять анимацию.
Если не знаете как сделать анимацию - пишите в раздел HTML.

@Dmitriy2840 · 08.05.2019, 08:16 **[ТС]**

Пифагор, а нельзя как то это выполнить что бы не привязывать к определенной кнопке, т.к. их много. Можно типо, где бы не загорелся красный, начинать мигать.?

@imaster · 08.05.2019, 13:35

Сообщение от Dmitriy2840

нельзя как то это выполнить что бы не привязывать к определенной кнопке

Если у вас подключена библиотека jquery, можете обращаться к элементам через классы.
Например

JavaScript
1
$(".className").css({"background-color" : "#ff0000"});

где className - название класса, для которого нужно поменять фоновый цвет.

@andyyy · 08.05.2019, 13:55

Сообщение от Dmitriy2840

, мне необходимо что бы когда загорается красный цвет, добавить для него эффект мигания. уже голову сломал, Создать эффект в CSS и поместить его в переменную, не получается, или не хватает навыков. Подскажите кто знает как передать эффект

пишите условие типо

PHP
1
2
3
4
5
if($color =='red') {
//подлючаем класс с анимацией
echo "<div class='мигающий класс'>мигающая надпись</div>";
 
}

в самом классе делаем что-то типо

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.мигающий класс {animation: название вашей анимации  2s infinite ease-in-out;}
 
/*саму анимацию делаем так*/
 
@keyframes название вашей анимации {
0% {/*список правил при 0*/
color: yellow;
 
}
/* можно добавлять и другие, например 20% */
100% {/*список правил при 100 */
color: red;
 
 
}
}

@Dmitriy2840 · 08.05.2019, 14:29 **[ТС]**

Не получается.
Вот кнопка на пример

HTML5
1
<input style='background-color:<?=$color3?>' id="e20"  title="0017" type="submit" value="<?php echo $e20 ?>"  >

Css

CSS
1
2
3
4
5
6
7
8
9
.colorId {animation: colorId  2s infinite ease-in-out;}
 
/*саму анимацию делаем так*/
 
@keyframes colorId {
0% {color: yellow;}
50% {color: yellow;}
100% {color: red;}
}

Вот передаю при выполненных условиях цвет при помощи PHP

PHP
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
function getColorFour($delta5,$delta6,$e22){
  
if ($e22 <= 40 ) { 
  
        if($delta5 >= 30) return "#11f543";
 
             elseif($delta5 >=20) return "#FAFA04";
 
                elseif($delta5 <= 19) return "#FF000B";
 
                    return "#FF000B";
                } 
if ($e22 > 40){
 
        if($delta6 >= 30) return "#11f543";
 
             elseif($delta6 >=20) return "#FAFA04";
 
                elseif ($delta6 <= 19) return "#FF000B";
 
                    return "#FF000B";
 
        
 
   } 
}   
        $color4=getColorFour($delta5,$delta6,$e22);

И если в input я пишу класс анимации, сразу срабатывает не зависимо от PHP, если пишу условие, то синтаксис эрор пишет, что то явно не то делаю..

@andyyy · 08.05.2019, 15:46

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
 
<style>
 
.colorId {animation: colorId  2s infinite ease-in-out;}
 
/*саму анимацию делаем так*/
 
@keyframes colorId {
0% {color: yellow;}
50% {color: yellow;}
100% {color: red;}
}
</style>

<body>

PHP
1
2
3
4
5
6
7
<?PHP 
$array = array('red','yellow','green');
$rand = rand(0,2);
 
$a  =  $array[$rand];
 
?>

PHP
1
<?PHP if($a =='red') {echo "<div class='colorId'>надпись</div>"; } else  echo "просто надпись";  ?>

HTML5
1
2
3
</body>
 
</html>

@u4en1k · 08.05.2019, 20:45

Код должен быть PHP в одинарных кавычках, а HTML в двойных. Если практиковать программирование с одинарными кавычками, то в скором времени увидите, что, если выводите данные, допустим с БД, тогда данные прервутся, и получится только часть. И так же нагрузка на оперативу, на обработку двойных кавычек и одинарных.

@andyyy · 09.05.2019, 07:06

u4en1k,
Да без разницы какие кавычки, если голова из правильного места растет, ничего не произойдет!

@Asiman · 09.05.2019, 07:51

Сообщение от u4en1k

Код должен быть PHP в одинарных кавычках, а HTML в двойных. Если практиковать программирование с одинарными кавычками, то в скором времени увидите, что, если выводите данные, допустим с БД, тогда данные прервутся, и получится только часть. И так же нагрузка на оперативу, на обработку двойных кавычек и одинарных.

https://axshavan.livejournal.com/727160.html

Новые блоги и статьи Все статьи Все блоги /
Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .

@Dmitriy2840 0 / 0 / 0 Регистрация: 17.09.2015 Сообщений: 143
	08.05.2019, 08:16 [ТС]
	Пифагор, а нельзя как то это выполнить что бы не привязывать к определенной кнопке, т.к. их много. Можно типо, где бы не загорелся красный, начинать мигать.? 0

@u4en1k 133 / 118 / 34 Регистрация: 04.04.2018 Сообщений: 593
	08.05.2019, 20:45
	Код должен быть PHP в одинарных кавычках, а HTML в двойных. Если практиковать программирование с одинарными кавычками, то в скором времени увидите, что, если выводите данные, допустим с БД, тогда данные прервутся, и получится только часть. И так же нагрузка на оперативу, на обработку двойных кавычек и одинарных. 0

@andyyy 767 / 323 / 157 Регистрация: 26.05.2016 Сообщений: 2,127
	09.05.2019, 07:06
	u4en1k, Да без разницы какие кавычки, если голова из правильного места растет, ничего не произойдет! 0