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

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

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

@mr_dramm · 15.05.2023, 10:25

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

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

проблема со стрелочными функциями => они не поддерживаются скорее всего в вашем браузере. И конечно же есть babel, который можно доустановить в вашу среду разработки чтобы он автоматически компилировал в es5 или под определенную версию браузера

@Padonak · 15.05.2023, 14:12

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

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

Да-да

@бел ка · 15.05.2023, 20:16 **[ТС]**

Padonak, в СССР и небо было голубее, и трава зеленее, и в конце 1990 когда не было интернета, в печатных сми предрекали конец света, поскольку не было метода getFullYear, а все использовали метод getYear, и в то время ввели "новый" по тем временам метод getFullYear, тем самым предотвратив пресловутый конец света...

Добавлено через 12 минут
рылась в некротемах рунета,, вот к примеру работающая функция получения московского времени без ES6

JavaScript
1
2
3
4
5
6
7
8
9
10
11
function sad() {
      var d_t = new Date(); 
      var m_t = d_t.getUTCDay() + (d_t.getUTCHours() + 3);
      
      var wdays = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
      var wd_t = new Date(d_t);
      var hours = two_digit(wd_t.getHours());
      var min = two_digit(wd_t.getMinutes());
      var sec = two_digit(wd_t.getSeconds());
      return wdays[wd_t.getDay()] + ", " + hours + "<span class='colons'>:</span>" + min + "<span class='colons'>:</span>" + sec;
    }

Добавлено через 1 минуту
есть ли народ, который реально подскажет ответ на вопрос?

greg zakharov · 15.05.2023, 20:52

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

JavaScript
1
2
3
var d_t = new Date();
...
var wd_t = new Date(d_t);

Это явно взято отсюда.

Не по теме:

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

Padonak, в СССР и небо было голубее, и трава зеленее...

И секса не было, а с демографией всё было нормально, ибо всем заправляла партия: она и рожала, и думала за нас. А перед своим развалом СССР сделал то, что заставило поседеть инженеров во всём мире: вывести полностью автоматизированный шатл на околоземную орбиту, а после ещё и посадить его на космодроме. И всё это на полностью отечественных разработках. Были же инженеры! Мыслили глобальными категориями, а не то что эти ваши ECMA.

@бел ка · 15.05.2023, 21:49 **[ТС]**

greg zakharov, если сказать другими словами, то я предпочитаю ознакомиться с объектом дата, не поверхностно, а максимально детально, чтобы если меня разбудят в 3 часа ночи и зададут вопрос, я автоматически должна знать ответ, независимо от того к какой категории этот вопрос относится, хоть ES5, ES6 или ES1,а качество образования в СССР было лучшим в мире, по крайней мере я знаю что в слове хер я не допущу 5 орфографических АшЕбАк. :-)

greg zakharov · 15.05.2023, 22:34

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

чтобы если меня разбудят в 3 часа ночи и зададут вопрос, я автоматически должна знать ответ, независимо от того к какой категории этот вопрос относится, хоть ES5, ES6 или ES1

Похвально, конечно, если человек желает основательно разобраться в каком-то вопросе, другое дело то, как он это делает. Зубрёжка ничего толкового не даст, да и толк от того, чтобы запоминать ворох ненужной информации?! Разве что на случай апокалипсиса, но там уже не до ESx будет, острее будет стоять вопрос выживания. Технологиям свойственно устаревать, хотя они и могут продолжать использоваться (например, схемы с ламповыми элементами, COBOL и т.д.), законспектировать их работу можно разве что для общего развития, ибо никто их с вас ни при поступлении на работу, ни тем более в 3 часа ночи спрашивать не станет: будут скорее сыпать такими словами-уродами как "фулстэк", "джун", "опстайп" и прочей некрофилией. Если же вопрос состоит в "просто хорошо разбираться", для этого нужно освоить общую базу, ООП, ФП, регуляные выражения и как можно больше экспериментировать с кодом, не задавая при этом вопросов, а стараясь на них отвечать.

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

качество образования в СССР было лучшим в мире

Это факт, который могу подтвердить по себе.

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

по крайней мере я знаю что в слове хер я не допущу 5 орфографических АшЕбАк

Вообще-то, "хер" — буква, а не слово. Статус слова, ему придали позже, и то оно означало вовсе не мужской детородный орган, а восходило к слову "хворь": прихереть — захворать, приболеть.

@Padonak · 15.05.2023, 23:34

Не по теме:

А я, к слову, был октябрёнком, пионером и комсомольцем )) Интересно, много нас тут таких?

@бел ка · 16.05.2023, 12:43 **[ТС]**

greg zakharov, ну я только недавно начала интересоваться js, сначала я не понимала почему при использовании методов getUTC... время (часы) без испрвления(>=24), но поразмышляв логически и пару раз прочитав учебные материалы, не составило труда прийти к выводу, что объект всегда содержит все компоненты даты, и если я получила глобальное время то и часы будут соответствовать другим компонетам, а именно числу месяца, и только потом надо получить нужные мне компоненты в нужном мне часовом поясе, я это к чему... главное не зубрёжка, а понимание основ работы чего угодно, в данном случае объекта дата...

Добавлено через 2 минуты
Padonak, Ну я немножко отличаюсь от тебя, меня в комсомол не взяли, поведение...

greg zakharov · 16.05.2023, 21:15

Не по теме:

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

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

"Парни, музыка, н*******и..." (C) или постпанк перед рождением панка, — или что?

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

А я, к слову, был октябрёнком, пионером и комсомольцем

Давай нашу:

Я в мир удивительный этот пришёл
Отваге и правде учиться.
Единственный друг, дорогой комсомол,
Ты можешь на нас положиться!..

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

...что объект всегда содержит все компоненты даты...

Какой именно объект? Что значит "компонент даты"?

@бел ка · 17.05.2023, 00:23 **[ТС]**

greg zakharov, объект дата всегда содержит все компоненты даты, год, месяц, дата, часы, минуты, секунды, милисекунды... и не может содержать только часть из вышеперечисленного, например только дату, или только время, когда запрашиваю часть компонентов для вывода на экран/консоль это другое дело, и если я не запросила часть компонентов для вывода, это ведь не значит что их нету, они просто скрыты, другими словами когда я запросила чч, день недели через через методы UTC, мне естественно вернули чс и дн на текущий момент по глобальному времени, а по локальному времени уже другое число, поэтому и неудивительно что я вижу >=23часов на экране...

@бел ка · 18.05.2023, 14:54 **[ТС]**

есть простой скрипт времени, элемент 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>

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

Добавлено через 33 минуты
возможно ли использовать что-то типа этого

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

только использовать свойство прозрачности а не цвета...

@бел ка · 18.05.2023, 23:07 **[ТС]**

если попробовать что-то типа этого? как правильно и лучше сделать?

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);
      })()

Добавлено через 33 минуты
попыталась сделать так, в консоли ошибок нету, но разделители не мигают, почему? что сделала не правильно?

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
<!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() {
    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 = [].slice.call(document.querySelectorAll('.colon'), 0);
  var colons =["0.3", "1.0"];
  step = 0;
  (function blink()
  {
  spans.forEach(function(elem) {   
  elem.style.opacity = colons[step];
  });
  step = ++step % colons.length;
  window.setTimeout(blink, 500);
  })()
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  clock();
  </script>
 </body>
</html>

greg zakharov · 18.05.2023, 23:35

Не по теме:

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

что сделала не правильно?

Сейчас каждый из нас наденет свой колпак телепата и попытается установить с вами контакт в обход Чумака или Кашпировского.

@Eva Rosalene · 19.05.2023, 01:50

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

что сделала не правильно?

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

@бел ка · 19.05.2023, 02:32 **[ТС]**

Eva Rosalene, тогда если я правильно понимаю, 62 строку

JavaScript
1
document.getElementById('data').innerHTML = time() + data();

надо разместить перед переменной (var spans = ...), чтобы результат функций time и data уже были в документе?

@Eva Rosalene · 19.05.2023, 02:39

бел ка, нет, setInterval будет заменять innerHTML каждый раз, и элементы будут пересоздаваться, инвалидируя старый результат.

Добавлено через 2 минуты
Я бы переписала это на вашем месте, если честно. Например, вместо innerHTML = сделала какую-то более хитрую функцию, которая бы это дело обновляла, но не трогала элементы .colon.

@бел ка · 19.05.2023, 02:46 **[ТС]**

Сообщение от greg zakharov

Не по теме:

Сейчас каждый из нас наденет свой колпак телепата и попытается установить с вами контакт в обход Чумака или Кашпировского.

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

Добавлено через 4 минуты
Eva Rosalene, тогда надо наверное обновлять весь элемент раз в 0.5сек и при каждом обновлении менять значение свойства opasity ?

@Eva Rosalene · 19.05.2023, 02:57

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

тогда надо наверное обновлять весь элемент раз в 0.5сек и при каждом обновлении менять значение свойства opasity ?

Да, можно и так. Внести всё в одну функцию, вроде

JavaScript
1
2
3
4
5
6
7
8
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: " + opacity + ";\" class='colon'>:</span>" + sec + "<br>";
  }

JavaScript
1
2
3
4
5
6
7
function clock() {
    var step = 0;
    setInterval(function () {
    document.getElementById('data').innerHTML = time(colons[step]) + data();
    step = (step + 1) % colons.length;
    }, 1000);
  }

@бел ка · 19.05.2023, 12:05 **[ТС]**

Сообщение от greg zakharov

Не по теме:

Сейчас каждый из нас наденет свой колпак телепата и попытается установить с вами контакт в обход Чумака или Кашпировского.

видел в реале электронные часы, может обращал внимание что там между часами минутами и секундами стоит разделитель в виде двоеточия :, и эти разделители мигают ежесекундно, так моя цель получить тот же эффект мигания на странице сайта, что тут непонятного ?

Добавлено через 11 минут
Eva Rosalene, тогда как я понимаю, переменную var spans.... надо размещать перед функцией time ?

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

@Eva Rosalene · 19.05.2023, 12:07

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

Eva Rosalene, тогда как я понимаю, переменную var spans.... надо размещать перед функцией time ?

Она уже не нужна. В innerHTML сразу записывается стилевое свойство. Только таймаут нужно на 500 заменить.

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	15.05.2023, 21:49 [ТС]
	greg zakharov, если сказать другими словами, то я предпочитаю ознакомиться с объектом дата, не поверхностно, а максимально детально, чтобы если меня разбудят в 3 часа ночи и зададут вопрос, я автоматически должна знать ответ, независимо от того к какой категории этот вопрос относится, хоть ES5, ES6 или ES1,а качество образования в СССР было лучшим в мире, по крайней мере я знаю что в слове хер я не допущу 5 орфографических АшЕбАк. :-) 0

@Padonak
	15.05.2023, 23:34
	Не по теме: А я, к слову, был октябрёнком, пионером и комсомольцем )) Интересно, много нас тут таких? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	16.05.2023, 12:43 [ТС]
	greg zakharov, ну я только недавно начала интересоваться js, сначала я не понимала почему при использовании методов getUTC... время (часы) без испрвления(>=24), но поразмышляв логически и пару раз прочитав учебные материалы, не составило труда прийти к выводу, что объект всегда содержит все компоненты даты, и если я получила глобальное время то и часы будут соответствовать другим компонетам, а именно числу месяца, и только потом надо получить нужные мне компоненты в нужном мне часовом поясе, я это к чему... главное не зубрёжка, а понимание основ работы чего угодно, в данном случае объекта дата... Добавлено через 2 минуты Padonak, Ну я немножко отличаюсь от тебя, меня в комсомол не взяли, поведение... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	17.05.2023, 00:23 [ТС]
	greg zakharov, объект дата всегда содержит все компоненты даты, год, месяц, дата, часы, минуты, секунды, милисекунды... и не может содержать только часть из вышеперечисленного, например только дату, или только время, когда запрашиваю часть компонентов для вывода на экран/консоль это другое дело, и если я не запросила часть компонентов для вывода, это ведь не значит что их нету, они просто скрыты, другими словами когда я запросила чч, день недели через через методы UTC, мне естественно вернули чс и дн на текущий момент по глобальному времени, а по локальному времени уже другое число, поэтому и неудивительно что я вижу >=23часов на экране... 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	19.05.2023, 02:39
	бел ка, нет, `setInterval` будет заменять `innerHTML` каждый раз, и элементы будут пересоздаваться, инвалидируя старый результат. Добавлено через 2 минуты Я бы переписала это на вашем месте, если честно. Например, вместо `innerHTML =` сделала какую-то более хитрую функцию, которая бы это дело обновляла, но не трогала элементы `.colon`. 0