Как заставить текст мигать

@бел ка · Регистрация: 23.02.2023

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

как с помощью js сделать мигающий текст в спанах с классом colon?

PHP/HTML
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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</title>
  <style>
   #data { 
    font: 40px serif;
    color: hsl(120,100%,30%);
   }
   .colon {
    color: hsl(120,100%,40%);
   }
  </style> 
 </head> 
 <body>
  <span id="data"></span>
  
  <script>
  
  function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
  
  function time() {
    var t = new Date();
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
    var sec = two_digit(t.getSeconds());
  
    return hours + "<span class='colon'>:</span>" + min + "<span class='colon'>:</span>" + sec + "<br>";
  }
  
  function data() {
    var d = new Date();
    var days = ["Воскресенье","Понеднльник","Вторник","Среда","Четверг","Пятница","Суббота"];
    var day = d.getDate();
    // var month = two_digit(d.getMonth()+1);
    // var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
    var months = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    var year = d.getFullYear();
  
    // return days[d.getDay()] + "<br>" + day + "." + month + "." + year + "г."; // = строка 29
    // return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г."; // = строка 30
    return days[d.getDay()] + "<br>" + day + "." + months[d.getMonth()]+ "." + year + "г."; // = строка 31
  }
  
  var spans = document.querySelectorAll('.colon');
  var op = [0.2, 0.4, 0.6, 0.8, 1.0];
  step = 0;
  (function blink() {
    spans.forEach(function(elem) {
    elem.style.opacity = op[step];
  });
  step = ++step % op.length;
  setTimeout(blink, 200);
  })()
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  clock();
  </script>
  <br>
  <br>blink
 </body>
</html>

что тут не так ?

greg zakharov · 06.03.2023, 00:23

Сообщение от бел ка

что тут не так ?

Постановка вопроса, нагромождение кода.

@klyapa · 06.03.2023, 01:00

HTML5
1
2
3
4
5
<span class="colon">текст</span>
<span class="colon">текст</span>
<span class="colon">текст</span>
<span class="colon">текст</span>
<span class="colon">текст</span>

JavaScript
1
2
3
4
const colons = document.querySelectorAll('.colon');
const rgb = () => `rgb(${[...Array(3)].map(x => Math.floor(Math.random() * 256))})`;
const run = () => (colons.forEach(e => e.style.color = rgb(), setTimeout(run, 1000)));
run();

@бел ка · 06.03.2023, 01:58 **[ТС]**

greg zakharov, что не так в строках 51-60, можно это как то исправить?

Добавлено через 18 минут
есть свойство opacity, как ему задать значение 0.3, и с интервалом в 0.5 сек. менять на значение 1.0 ?

@Smls · 06.03.2023, 06:08

Сообщение от бел ка

есть свойство opacity, как ему задать значение 0.3, и с интервалом в 0.5 сек. менять на значение 1.0 ?

Для этого не нужен js:

CSS
1
2
3
4
5
6
.colon {animation: blink 0.5s infinite;}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.3;}
  100% {opacity: 1;}
}

если так уж хочется на js то:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
const colons = document.querySelectorAll('.colon');
 
function blink() {
  colons.forEach(colon => {
    if (colon.style.opacity === '1') {
      colon.style.opacity = '0.3';
    } else {
      colon.style.opacity = '1';
    }
  });
}
 
setInterval(blink, 500);

@бел ка · 06.03.2023, 17:46 **[ТС]**

Smls, вставила в скрипт, и выдает ошибку
Uncaught SintaxError: Unexpected token >
на эту строку colons.forEach(colon => {

@Smls · 06.03.2023, 17:58

А как вставила и куда вставила нужно угадать? Не видя кода невозможно ничего сказать.

@бел ка · 06.03.2023, 18:03 **[ТС]**

PHP/HTML
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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</title>
  <style>
   #data { 
    font: 40px serif;
    color: hsl(120,100%,30%);
   }
   .colon {
    color hsl(120,100%,40%);
    line-height 10px;
    padding: 0 3px; 
    display: inline-block;
    position: relative; bottom: 5px; 
   }
  </style> 
 </head> 
 <body>
  <span id="data"></span>
  
  <script>
  
  function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
  
  function time() {
    var t = new Date();
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
    var sec = two_digit(t.getSeconds());
  
    return hours + "<span class='colon'>:</span>" + min + "<span class='colon'>:</span>" + sec + "<br>";
  }
  
  function data() {
    var d = new Date();
    var days = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
    var day = d.getDate();
    // var month = two_digit(d.getMonth()+1);
    // var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
    var months = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    var year = d.getFullYear();
  
    // return days[d.getDay()] + "<br>" + day + "." + month + "." + year + "г."; // = строка 29
    // return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г."; // = строка 30
    return days[d.getDay()] + "<br>" + day + "." + months[d.getMonth()]+ "." + year + "г."; // = строка 31
  }
  
  const colons = document.querySelectorAll('.colon');
  
  function blink() {
  colons.forEach(colon => {
  if (colon.style.opacity === '1') {
  colon.style.opacity = '0.3';
  } else {
  colon.style.opacity = '1';
  }
  });
  }
  
  setInterval(blink, 500);
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  clock();
  </script>
 </body>
</html>

@Smls · 06.03.2023, 18:27

.colon каждую секунду новый создается. Проще всё таки CSS использовать

@pgb · 06.03.2023, 18:37

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</title>
  <style>
   #data { 
    font: 40px serif;
    color: hsl(120,100%,30%);
   }
   .colon {
    -moz-animation: myfade 1s ease infinite;
    -webkit-animation: myfade 1s ease infinite;
   }
   @-webkit-keyframes myfade {
    0% {
      opacity: 1.0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1.0;
    }   
  }
 
  @-moz-keyframes myfade {
    0% {
      opacity: 1.0;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1.0;
    };
  }
 
  </style> 
 </head> 
 <body>
  <span id="data"></span>
  
  <script>
  
  function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
  
  function time() {
    var t = new Date();
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
    var sec = two_digit(t.getSeconds());
  
    return hours + "<span class='colon'>:</span>" + min + "<span class='colon'>:</span>" + sec + "<br>";
  }
  
  function data() {
    var d = new Date();
    var days = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
    var day = d.getDate();
    // var month = two_digit(d.getMonth()+1);
    // var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
    var months = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    var year = d.getFullYear();
  
    // return days[d.getDay()] + "<br>" + day + "." + month + "." + year + "г."; // = строка 29
    // return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г."; // = строка 30
    return days[d.getDay()] + "<br>" + day + "." + months[d.getMonth()]+ "." + year + "г."; // = строка 31
  }
  
  const colons = document.querySelectorAll('.colon');
  
  function blink() {
  colons.forEach(colon => {
  if (colon.style.opacity === '1') {
  colon.style.opacity = '0.3';
  } else {
  colon.style.opacity = '1';
  }
  });
  }
  
  setInterval(blink, 500);
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  clock();
  </script>
 </body>
</html>

@бел ка · 06.03.2023, 19:17 **[ТС]**

может возможно обновлять раз в секунду не весь элемент "data" а только часы минуты и секунды, а день недели, число, месяц, год раз в сутки, в полночь?

@pgb · 06.03.2023, 19:23

Сообщение от бел ка

может возможно обновлять раз в секунду не весь элемент "data" а только часы минуты и секунды, а день недели, число, месяц, год раз в сутки, в полночь?

Можно ещё лучше сделать, через id или вообще как компонент

@klyapa · 06.03.2023, 19:35

JavaScript
1
2
3
4
5
6
7
8
9
10
11
const colons = document.querySelectorAll('.colon');
const ops = [0.2, 0.5, 0.4, 0.7, 0.3, 0.6, 0.8, 1];
const len = ops.length;
 
let cnt = 0;
 
function blink() {
    colons.forEach(el => (el.style.opacity = ops[cnt % len], cnt === len ? cnt = 0 : cnt++));
}
 
setInterval(blink, 500);

@бел ка · 06.03.2023, 19:37 **[ТС]**

pgb, ну я имела ввиду обернуть в спаны с ид часы минуты секунды и только их обновлять...

@pgb · 06.03.2023, 19:44

Сообщение от бел ка

ну я имела ввиду обернуть в спаны с ид часы минуты секунды и только их обновлять...

Так и я про это сказал.

ЗЫ. А если по современному, то можно компонент сделать с теневой разметкой и JS кодом, подключать компонент, а на странице просто указывать тег(например: <mytime>H:m:s</mytime>) с форматом даты времени, всё остальное будет делать компонент. Но это конечно вам будет посложнее реализовать, поэтому лучше через id.

@бел ка · 06.03.2023, 20:08 **[ТС]**

klyapa, вставила в скрипт, и выдает ошибку
Uncaught SintaxError: Unexpected token >
на эту строку
colons.forEach(el => (el.style.opacity = ops[cnt % len], cnt === len ? cnt = 0 : cnt++));

Добавлено через 6 минут
или лучше менять название класса раз в 0.5 сек, colon <=> colon_op ? задав им соответственно разные значение свойства opacity...

@klyapa · 06.03.2023, 21:22

Сообщение от бел ка

вставила в скрипт, и выдает ошибку

=> Не верю

@бел ка · 06.03.2023, 23:21 **[ТС]**

klyapa, так суть самого вопроса, как заставить мигать разделитель между чч:мм:сс,

пост 8, строка 38,

JavaScript
38
return hours + "<span class='colon'>:</span>" + min + "<span class='colon'>:</span>" + sec + "<br>";

или сделать чтобы за секунду плавно эти спаны меняли прозрачность с 0.1 до 1.0, или в принципе достаточно чтобы за секунду два раза меняли прозрачность с 0.1 на 1.0

@бел ка · 15.05.2023, 01:58 **[ТС]**

есть простой скрипт времени, элемент data обновляется раз в 0.5сек, как сделать чтобы разделитель "<span class='colon'>:</span>" между чч:мм:сс менял прозрачность при каждом обновлении, раз в 0.5сек opacity: 0.2 на opacity: 1.0 средствами js, без css анимации ?

PHP/HTML
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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   #data { 
    font: 40px serif;
    color: hsl(120,100%,30%);
   }
 </style> 
 </head> 
 <body>
  <span id="data"></span>
  
  <script>
  
  function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
  
  function time() {
    var t = new Date();
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
    var sec = two_digit(t.getSeconds());
  
    return hours + "<span class='colon'>:</span>" + min + "<span class='colon'>:</span>" + sec + "<br>";
  }
  
  function data() {
    var d = new Date();
    var days = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
    var day = d.getDate();
    // var month = two_digit(d.getMonth()+1);
    // var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
    var months = ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII"];
    var year = d.getFullYear();
  
    // return days[d.getDay()] + "<br>" + day + "." + month + "." + year + "г."; // = строка 29
    // return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г."; // = строка 30
    return days[d.getDay()] + "<br>" + day + "." + months[d.getMonth()]+ "." + year + "г."; // = строка 31
  }
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 500);
  }
  clock();
  </script>
 </body>
</html>

Добавлено через 5 минут
прозрачность... ну или цвет hsl(120,100%,30%) на hsl(120,100%,70%) ?

@Eva Rosalene · 15.05.2023, 09:57

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

=> Не верю

У бел ка проект запускается на очень древнем устройстве, где-то около 40-х версий Chrome по уровню поддержки фич.

Новые блоги и статьи Все статьи Все блоги /
Подстановка значения реквизита справочника в табличную часть документа 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 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.03.2023, 01:58 [ТС]
	greg zakharov, что не так в строках 51-60, можно это как то исправить? Добавлено через 18 минут есть свойство opacity, как ему задать значение 0.3, и с интервалом в 0.5 сек. менять на значение 1.0 ? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.03.2023, 17:46 [ТС]
	Smls, вставила в скрипт, и выдает ошибку Uncaught SintaxError: Unexpected token > на эту строку colons.forEach(colon => { 0

@Smls 220 / 173 / 115 Регистрация: 19.01.2015 Сообщений: 524
	06.03.2023, 17:58
	А как вставила и куда вставила нужно угадать? Не видя кода невозможно ничего сказать. 0

@Smls 220 / 173 / 115 Регистрация: 19.01.2015 Сообщений: 524
	06.03.2023, 18:27
	.colon каждую секунду новый создается. Проще всё таки CSS использовать 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.03.2023, 19:17 [ТС]
	может возможно обновлять раз в секунду не весь элемент "data" а только часы минуты и секунды, а день недели, число, месяц, год раз в сутки, в полночь? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.03.2023, 19:37 [ТС]
	pgb, ну я имела ввиду обернуть в спаны с ид часы минуты секунды и только их обновлять... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	06.03.2023, 20:08 [ТС]
	klyapa, вставила в скрипт, и выдает ошибку Uncaught SintaxError: Unexpected token > на эту строку colons.forEach(el => (el.style.opacity = ops[cnt % len], cnt === len ? cnt = 0 : cnt++)); Добавлено через 6 минут или лучше менять название класса раз в 0.5 сек, colon <=> colon_op ? задав им соответственно разные значение свойства opacity... 0