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

@бел ка · Регистрация: 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>

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

@бел ка · 19.05.2023, 15:34 **[ТС]**

тогда я не поняла а где значения свойства прозрачности?

@Eva Rosalene · 20.05.2023, 01:12

бел ка, в 7 строке первого сниппета

JavaScript
1
"<span style=\"opacity: " + opacity + ";\" class='colon'>:</span>"

@бел ка · 20.05.2023, 11:04 **[ТС]**

? ? ?

блин, опять где-то накосячила, пустой экран

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</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(opacity) {
    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 style=\"opacity:0.3;" + opacity + ": 1.0;\" 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() {
    var step = 0;
    setInterval(function () {
    document.getElementById('data').innerHTML = time(colons[step]) + data();
    step = (step + 1) % colons.length;
    }, 500);
  }
  </script>
 </body>
</html>

@mr_dramm · 20.05.2023, 12:38

бел ка, Вы наверное хорошо играете в морской бой =)

Просто спросите себя как должна вызываться функия clock?

Добавлено через 9 минут
Я слышал что если использовать отладчик то дело будет идти быстрее ... но это только слухи

@бел ка · 20.05.2023, 15:28 **[ТС]**

mr_dramm,
? ? ?

JavaScript
1
window.setTimeout(clock, 500);

@mr_dramm · 20.05.2023, 16:22

бел ка, извините я не могу Вам помочь...

@Eva Rosalene · 20.05.2023, 18:10

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

опять где-то накосячила, пустой экран

Вы забыли пнуть функцию clock. Просто вызовите её в самом конце.

@бел ка · 20.05.2023, 19:59 **[ТС]**

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</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(opacity) {
    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 style=\"opacity:0.3;" + opacity + ": 1.0;\" 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() {
    var step = 0;
    setInterval(function () {
    document.getElementById('data').innerHTML = time(colons[step]) + data();
    step = (step + 1) % colons.length;
    }, 500);
  } clock(); 
  </script>
 </body>
</html>

? ? ?

@бел ка · 20.05.2023, 20:02 **[ТС]**

блин, опять консоль матюкается...

@Eva Rosalene · 20.05.2023, 20:11

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

блин, опять консоль матюкается...

А зачем вы удалили

JavaScript
1
var colons =["0.3", "1.0"];

?
Алсо, вам прямым текстом консоль говорит, чего приложению не хватает, неужели настолько сложно расшифровать?

@бел ка · 20.05.2023, 22:00 **[ТС]**

Ура ! заработало :-)

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</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(opacity) {
    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 style=\"opacity:" + opacity + "\" class='colon'>:</span>" + min + "<span style=\"opacity:" + opacity + "\" 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() {
    var colons =["0.3", "1.0"];
    var step = 0;
    setInterval(function () {
    document.getElementById('data').innerHTML = time(colons[step]) + data();
    step = (step + 1) % colons.length;
    }, 500);
  } clock(); 
 
  </script>
  
 </body>
</html>

Добавлено через 18 минут

Сообщение от Eva Rosalene

Алсо, вам прямым текстом консоль говорит, чего приложению не хватает, неужели настолько сложно расшифровать?

если честно, то мои знания как js, так и иностранных языков оставляют желать лучшего... и с другой стороны, из-за возраста наверное уже нет возвозможности изучить, если правильно выразится, то пытаюсь что-то понять скорее для собственного удовольствия, и общего саморазвития...

@бел ка · 21.05.2023, 07:16 **[ТС]**

народ, а если изначально эти функции составлены так...

JavaScript
1
2
3
4
5
6
7
function time(opacity) {
    var t = new Date();
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
  
    return hours + "<span class='colon'>:</span>" + min ;
  }

JavaScript
1
2
3
4
5
6
function clock_min() {
  setInterval(function () {
  document.getElementById('data').innerHTML = time() + data();
  }, ((60 - sec) * 1000);
  }
  clock_min();

[QUOTE]Вы запрашиваете spans (в var spans = ...), пока в документе их ещё нет.[/QUOTE{

возможно заставить разделить мигать?

@бел ка · 21.05.2023, 15:29 **[ТС]**

насколько я понимаю, надо сначала вставить данные на страницу,

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
  <script>
    var dayElems = document.getElementById('data');
 
    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(s) {
      setTimeout(function() {
        time() + data();
        clock(60);
      }, s * 1000);
    }
 
    clock(60 - new Date().getSeconds());

а уже потом применить что-то типа этого...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var spans = [].slice.call(document.querySelectorAll('.colon'), 0);
      var colons =["0.2", "1.0"];
      step = 0;
      (function blink()
      {
spans.forEach(function(elem) {   
elem.style.opacity = colons[step];
      });
      step = ++step % colons.length;
 window.setTimeout(blink, 500);
      })()

@бел ка · 21.05.2023, 22:05 **[ТС]**

народ, в принципе можно просто удалить переменную с секундами и не выводить её на экран, получив значения и вывестивывеститолько часы и минуты, и пусть обновляется раз в 0.5 сек весь элемент, но мне просто интересно покопаться в коде, и понять как можно получить мигания разделителя если элемент.обновляетсч развминуту в 00 сек....

@бел ка · 22.05.2023, 10:46 **[ТС]**

походу это нереально, сначала вставить данные в элемент, а потом сделать анимацию разделителя...

или просто никто не знает(не сталкивался с этим) ...

@Balanaar · 22.05.2023, 15:34

бел ка, можно на чистом CSS

CSS
1
2
3
4
5
6
7
8
9
10
11
.colon {
    animation: tick 1s steps(1) infinite;
}
@keyframes tick {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
}

Код добавлять в тег <style>

@бел ка · 22.05.2023, 21:22 **[ТС]**

Balanaar, на css не интересно, поскольку я ничего нового не узнаю...

разве на js нету никаких вариантов? типа

JavaScript
1
2
3
4
5
6
function blink(s) {
   var color = '';
   if (s >= 0 && s < 0.5) opacity = '0.3';
   else if (s >= 0.5 && s < 1) opacity = '1.0';
   return opacity;
   }

@Balanaar · 23.05.2023, 12:41

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

на css не интересно, поскольку я ничего нового не узнаю...

бел ка, мой вам совет: лучше выполнять задачи теми инструментами, которые для них предназначены. Суп можно съесть и вилкой, но зачем, если есть ложка? Лучше выберите для себя другую задачу и продолжите своё обучение в корректном русле.

@бел ка · 23.05.2023, 13:25 **[ТС]**

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

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>js | скрипт время/дата</title>
  <style>
   #data { 
    font: 40px serif;
    color: hsl(120,100%,30%);
   }
  </style> 
 </head> 
 <body>
  <span id="data"></span>
 
  <script>
  var dayElems = document.getElementById('data');
  
  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 + ":" + 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(s) {
  setTimeout(function() {
  time() + data();
  clock(60);
  }, s * 1000);
  }
  
  clock(60 - new Date().getSeconds());
 
  </script>
  
 </body>
</html>

@Eva Rosalene · 23.05.2023, 13:46

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

time() + data();

Вы их вызываете, а результат в документ не пишете.

Новые блоги и статьи Все статьи Все блоги /
Хитросплетение родственных связей пантеона греческих богов. russiannick 14.05.2026 Однооконник, позволяющий узреть и изучить отдельных героев древней Греции. <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible". . .	[golang] Угол между стрелками часов alhaos 12.05.2026 По заданным значениям часа и минуты необходимо определить значение меньшего угла между стрелками аналогового циферблата часов. import "math" func angleClock(hour int, minutes int) float64 { . . .	Debian 13: Установка Lazarus QT5 ВитГо 09.05.2026 Эта инструкция моя компиляция инструкций volvo https:/ / www. cyberforum. ru/ blogs/ 203668/ 10753. html и его же старой инструкции по установке Lazarus с gtk2. . .	Нейросеть на алгоритме "эстафета хвоста" как перспектива. Hrethgir 06.05.2026 На десерт, когда запущу сервер. Статья тут https:/ / habr. com/ ru/ articles/ 1030914/ . Автор я сам, нейросеть только помогает в вопросах которые мне не известны - не знаю людей которые знали-бы. . .
Асинхронный приём данных из COM-порта Argus19 01.05.2026 Асинхронный приём данных из COM-порта Купил на aliexpress термопринтер QR701. Он оказался странным. Поключил к Arduino Nano. Был очень удивлён. Наотрез отказывается печатать русские буквы. Чтобы. . .	попытка написать игровой сервер на C++ pyirrlicht 29.04.2026 попытка написать игровой сервер на плюсах с открытым бесконечным миром. возможно получится прикрутить интерпретатор питон для кастомизации игровой логики. что есть на текущий момент:. . .	Контроль уникальности выбранного документа-основания при изменении реквизита Maks 28.04.2026 Алгоритм из решения ниже разработан на примере нетипового документа "ЗаявкаНаРемонтСпецтехники", разработанного в КА2. Задача: уведомлять пользователя, если указанная заявка (документ-основание). . .	Благородство как наказание Maks 24.04.2026 У хорошего человека отношения с женщинами всегда складываются трудно. А я человек хороший. Заявляю без тени смущения, потому что гордиться тут нечем. От хорошего человека ждут соответствующего. . .

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	19.05.2023, 15:34 [ТС]
	тогда я не поняла а где значения свойства прозрачности? 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	20.05.2023, 12:38
	бел ка, Вы наверное хорошо играете в морской бой =) Просто спросите себя как должна вызываться функия clock? Добавлено через 9 минут Я слышал что если использовать отладчик то дело будет идти быстрее ... но это только слухи 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	20.05.2023, 16:22
	бел ка, извините я не могу Вам помочь... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	20.05.2023, 20:02 [ТС]
	блин, опять консоль матюкается... Миниатюры 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	21.05.2023, 22:05 [ТС]
	народ, в принципе можно просто удалить переменную с секундами и не выводить её на экран, получив значения и вывестивывеститолько часы и минуты, и пусть обновляется раз в 0.5 сек весь элемент, но мне просто интересно покопаться в коде, и понять как можно получить мигания разделителя если элемент.обновляетсч развминуту в 00 сек.... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	22.05.2023, 10:46 [ТС]
	походу это нереально, сначала вставить данные в элемент, а потом сделать анимацию разделителя... или просто никто не знает(не сталкивался с этим) ... 0