Возможно ли изменить текст и цвет ссылок?

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

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

на странице есть несколько ссылoк

HTML5
1
2
3
4
5
<a>текст ссылки <span class="d_5"><br>изменить текст</span></a><br>
<a>текст ссылки <span class="d_0"><br>изменить текст</span></a><br>
<a>текст ссылки <span class="d_2"><br>изменить текст</span></a><br>
<a>текст ссылки <span class="d_6"><br>изменить текст</span></a><br>
и тд...

где цифра соответствует дню недели в class="d_5", возможно ли в этот спан вставить текущий день недели и часы и минуты, например чт, 14:45, типа как в скрипте идущих часов? и возможно ли к этому спану применить разные стили, в зависимости от текущего времени и дня недели?

CSS
1
2
3
4
color: #00f; /*  4ч. 5мин. до применения синего цвета, с 19:50 до 23:55 */
color: #f00; /* три дня пять минут, до дня дня недели, с 23:55 до 24:00 */
color: #0f0; /* день недели, равен цифре в спан класс, 0=вс, 1=пн, 2=вт, ... 6=сб, с 00:00 до 24:00 */
display: none; /* остальной промежуток времени */

если известно день недели, (для разных ссылок разный, иногда повторяется), и промежуток времени, когда должен применяться стиль?

такое возможно сделать с помощью js ?

Добавлено через 16 минут
это ссылки-автологины, день недели устанавливается рандомно при регистрации, изменить цвет/стиль нужно только в качестве напоминания, какие действия предпринимать(или нет) на этом аккаунте, чтобы при входе в разные аккаунты не вычислять в в уме прошло ли уже 3 дня до нужного дня недели...

Добавлено через 5 часов 28 минут
есть несколько спанов, с классами: d_0, d_1, d_2, d_3, d_4, d_5, d_6, в каждый надо вставить текущий день недели (вс, пн, вт, ср, чт, пт, сб) и текущее время часы минуты, с обновлением в 1 сек,

есть 7-дневный цикл, 7дней * 24часа * 60мин = 10080мин.
надо по кругу менять стиль спана,

1. 24*60=1440мин — color: #0f0;
2. 4070мин — display: none;
3. 4*60+5=245мин — color: #00f;
4. 72*60+5=4325мин — color: f00;

отсчет цикла начинается в 00:00, в спанах с разными классами в разные дни, d_0 воскр, d_1 понял, и тд...

такое возможно реализовать на js?

@klyapa · 23.02.2023, 21:35

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

такое возможно реализовать на js?

о да

@бел ка · 16.04.2023, 20:35 **[ТС]**

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%);
   }
   .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><br>
  <span class="day_0"></span><br>
  <span class="day_1"></span><br>
  <span class="day_2"></span><br>
  <span class="day_3"></span><br>
  <span class="day_4"></span><br>
  <span class="day_5"></span><br>
  <span class="day_6"></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 days = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(t.getHours());
    var min = two_digit(t.getMinutes());
    var sec = two_digit(t.getSeconds());
  
    return days[d.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time();
    }, 1000);
  }
  clock();
  </script>
 </body>
</html>

что не так с 46 строкой?

@klyapa · 16.04.2023, 20:54

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

что не так с 46 строкой?

var t = new Date();
return days[d.getDay()] + ", " + hours + ":" + min + ":" + sec;

@бел ка · 16.04.2023, 22:30 **[ТС]**

как вставить в элементы с классом время и день недели, определить сколько сек осталось до наступления новой минуты, и обновлять эти спаны при наступлении новой минуты?

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
78
79
80
81
82
<!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><br>
  <span class="day_0"></span><br>
  <span class="day_1"></span><br>
  <span class="day_2"></span><br>
  <span class="day_3"></span><br>
  <span class="day_4"></span><br>
  <span class="day_5"></span><br>
  <span class="day_6"></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 months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
  var year = d.getFullYear();
  
  return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г.";
  }
  
  function sad() {
    var s = new Date();
    
    var days = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(s.getHours());
    var min = two_digit(s.getMinutes());
    var sec = two_digit(s.getSeconds());
  
    return days[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  
  function clock_min() {
  setInterval(function () {
  document.querySelectorAll('.day_0','.day_1','.day_2','.day_3','.day_4','.day_5','.day_6').innerHTML = sad();
  }, 60000);
  }
  clock();
  </script>
 </body>
</html>

@klyapa · 16.04.2023, 23:00

JavaScript
1
2
3
4
5
6
7
function clock(s) {
    setTimeout(function () {
        document.getElementById('data').innerHTML = time();
        clock(60);
    }, s * 1000);
}
clock(60 - new Date().getSeconds());

@бел ка · 17.04.2023, 00:10 **[ТС]**

строки 22-28, 74-79, почему спаны пустые? это про 5 пост...

Добавлено через 11 минут
klyapa,

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
78
79
80
81
82
83
84
<!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><br>
  <span class="day_0"></span><br>
  <span class="day_1"></span><br>
  <span class="day_2"></span><br>
  <span class="day_3"></span><br>
  <span class="day_4"></span><br>
  <span class="day_5"></span><br>
  <span class="day_6"></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 months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
  var year = d.getFullYear();
  
  return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г.";
  }
  
  function sad() {
    var s = new Date();
    
    var days = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(s.getHours());
    var min = two_digit(s.getMinutes());
    var sec = two_digit(s.getSeconds());
  
    return days[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
  
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  clock();
 
  function clock(s) {
  setTimeout(function () {
  document.getElementById('data').innerHTML = time();
  clock(60);
  }, s * 1000);
  }
  clock(60 - new Date().getSeconds());
  </script>
 </body>
</html>

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

Добавлено через 26 минут
сейчас обновляется в
чч:мм:17
чч:мм:00
чч:мм:17
чч:мм:00
чч:мм:17
чч:мм:00
чч:мм:17
чч:мм:00
и т.д .

надо чтобы обновлялось в

чч:мм:17
чч:мм:00
чч:мм:00
чч:мм:00
чч:мм:00
и т.д.

Добавлено через 2 минуты
17 сек это сек загрузки страницы

@klyapa · 17.04.2023, 00:19

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

почему спаны пустые?

Да не заморачивался я над этим. Ты спрашивала, как запустить таймер, чтобы сначала задержка была разницей "60 сек. минус текущее кол-во сек.", а следующие по 60 сек. Я тебе показал "как". Спаны сама допиливай.

@бел ка · 17.04.2023, 01:50 **[ТС]**

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

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

HTML5
1
2
3
4
5
6
7
8
<span id="data"></span><br>
  <span class="day_0"></span><br>
  <span class="day_1"></span><br>
  <span class="day_2"></span><br>
  <span class="day_3"></span><br>
  <span class="day_4"></span><br>
  <span class="day_5"></span><br>
  <span class="day_6"></span>

JavaScript
1
document.querySelectorAll('.day_0','.day_1','.day_2','.day_3','.day_4','.day_5','.day_6').innerHTML = sad();

или что надо вместо querySelectorAll ?

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

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

JavaScript
1
2
3
4
5
6
7
function clock(s) {
    setTimeout(function () {
        document.getElementById('data').innerHTML = time();
        clock(60);
    }, s * 1000);
}
clock(60 - new Date().getSeconds());

так на странице отображается
чч:05:37
чч:06:00
чч:06:37
чч:07:00
чч:07:37
чч:08:00
чч:08:37

а как сделать чтобы отображалосьчч:05:37
чч:05:37
чч:06:00
~~чч:06:37~~
чч:07:00
~~чч:07:37~~
чч:08:00
~~чч:08:37~~

@klyapa · 17.04.2023, 12:47

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

блин, больше часа пробую таймер, ни работает как надо

Вы не видите, что у вас две функции с одним именем? Это недопустимо.

Для чего у вас куча спанов с невменяемыми классами? Они для чего? Что вы хотите в них насовать? Уже второй месяц подходит к концу, как вы насилуете многострадальный объект Date, и находитесь в исходной точке. Просто горе какое-то с вами ...

HTML5
1
<span id="data"></span>

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
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 months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
  var year = d.getFullYear();
 
  return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г.";
}
 
function _clock() {
    setTimeout(function () {
        document.getElementById('data').innerHTML = time() + data();
        _clock();
    }, 1000);
}
_clock();
 
function clock(s) {
    setTimeout(function () {
        document.getElementById('data').innerHTML = time();
        clock(60);
    }, s * 1000);
}
clock(60 - new Date().getSeconds());

Добавлено через 7 минут
Если хотите менять цвет текста, то просто пропишите в css классы с нужным color и меняйте классы, в зависимости от индекса дня недели. Не нужны здесь шесть спанов.

Добавлено через 3 минуты
... или в массиве цвета пропишите ...

JavaScript
1
['#00f', '#f00', '#0f0', ...]

@бел ка · 17.04.2023, 22:18 **[ТС]**

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

Для чего у вас куча спанов с невменяемыми классами? Они для чего? Что вы хотите в них насовать?

Не нужны здесь шесть спанов.

эти спаны просто часть разных ссылок...

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

HTML5
1
2
3
4
5
6
7
8
9
10
<span id="data"></span><br>
<table>
<tr><td></td><td><a><span></span>  <span class="day_0"></span> </a></td><td></td></tr>
<tr><td></td><td><a><span></span>  <span class="day_1"></span>  </a></td><td></td></tr>
<tr><td></td><td><a><span></span> <span class="day_2"></span>  </a></td><td></td></tr>
<tr><td></td><td><a><span></span>  <span class="day_3"></span>  </a></td><td></td></tr>
<tr><td></td><td><a><span></span>  <span class="day_4"></span>  </a></td><td></td></tr>
<tr><td></td><td><a><span></span>  <span class="day_5"></span>  </a></td><td></td></tr>
<tr><td></td><td><a><span></span>  <span class="day_6"></span> </a></td><td></td></tr>
</table>

вот приблизительно код страницы

Добавлено через 6 минут
каждая ссылка должна содержать текущие день недели и время чч::мм:сс так понятнее? я думала что необязательно приводить весь код страницы, чтобы задать вопрос...

Добавлено через 35 минут
адрес каждой ссылки статичен, не меняется, часть текста ссылки также не меняется, поэтому я просто не выкладывала эту часть html-кода

а часть текста ссылок должен динамически обновляется, в чч:мм:00, и менять цвет...
есть несколько спанов, с классами: day_0, day_1, day_2, day_3, day_4, day_5, day_6, в каждый надо вставить текущий день недели (вс, пн, вт, ср, чт, пт, сб) и текущее время часы минуты, с обновлением в 1 мин ,

есть 7-дневный период, (=7дней * 24часа * 60мин = 10080мин.), спустя некоторое время нужно менять цвет этой части текста ссылок по кругу менять цвет

1. 24*60=1440мин — color: #0f0;
2. 4070мин — color: #ff0;
3. 4*60+5=245мин — color: #00f;
4. 72*60+5=4325мин — color: f00;

отсчет периода начинается в 00:00, в спанах с разными классами в разные дни, day_0 воскресенье, day_1 понедельник, day_2 вторник, и тд...

Добавлено через 2 часа 6 минут
если проще говорить, я пытаюсь делать по одному шагу за раз, и на данный момент мне нужно в одном месте страницы вывести время и дату текущую, обновляемую ежесекундно, и в 12ти местах вывести день недели и время с обновлением раз в 60 сек, в 00сек

Добавлено через 5 часов 42 минуты
klyapa, вижу что никто не понял, попытаюсь сказать по другому...

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></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><br>
  
  <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 + ":" + min + ":" + sec + "<br>";
  }
  
  function data() {
  var d = new Date();
  var days = ["Воскресенье","Понедельник","Вторник","Среда","Четверг","Пятница","Суббота"];
  var day = d.getDate();
  var months = ["января","февраля","марта","апреля","мая","июня","июля","августа","сентября","октября","ноября","декабря"];
  var year = d.getFullYear();
  
  return days[d.getDay()] + "<br>" + day + " " + months[d.getMonth()]+ " " + year + "г.";
  }
    
  function clock() {
    setInterval(function () {
    document.getElementById('data').innerHTML = time() + data();
    }, 1000);
  }
  
  </script>
 </body>
</html>

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

есть второй скрипт, с помощью которого надо в разных местах страницы(в разных ссылка) вывести день недели и время, обновляемую раз в минуту, в 00сек, что и не получается у меня сделать, хз что не так, пробовала и querySelector и querySelectorAll, спаны пустые, хз как быть если названия классов у спанов разные, а поскольку два скрипта делают одно и тоже, выводят компоненты даты, я пыталась оба скрипта объединить в один

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">
e>
  <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>
 <a><span>nik-1</span> <span class="day_0"></span></a><br>
 <a><span>nik-2</span> <span class="day_1"></span></a><br>
 <a><span>nik-3</span> <span class="day_2"></span></a><br>
 <a><span>nik-4</span> <span class="day_3"></span></a><br>
 <a><span>nik-5</span> <span class="day_4"></span></a><br>
 <a><span>nik-6</span> <span class="day_5"></span></a><br>
 <a><span>nik-7</span> <span class="day_6"></span></a>
  <script>
  
  function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
  
   function sad() {
    var s = new Date();
    
    var days = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(s.getHours());
    var min = two_digit(s.getMinutes());
    var sec = two_digit(s.getSeconds());
  
    return days[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
  
  function clock_min() {
  setInterval(function () {
  document.querySelectorAll('.day_0','.day_1','.day_2','.day_3','.day_4','.day_5','.day_6').innerHTML = sad();
  }, 60000);
  }
  clock();
  </script>
 </body>
</html>

@klyapa · 17.04.2023, 23:36

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

есть второй скрипт, с помощью которого надо в разных местах страницы(в разных ссылка) вывести день недели и время, обновляемую раз в минуту, в 00сек, что и не получается у меня сделать

Пипец просто ...
Вот ваши спаны..

HTML5
1
2
3
4
5
6
7
<a><span>nik-1</span> <span class="day_0"></span></a><br>
<a><span>nik-2</span> <span class="day_1"></span></a><br>
<a><span>nik-3</span> <span class="day_2"></span></a><br>
<a><span>nik-4</span> <span class="day_3"></span></a><br>
<a><span>nik-5</span> <span class="day_4"></span></a><br>
<a><span>nik-6</span> <span class="day_5"></span></a><br>
<a><span>nik-7</span> <span class="day_6"></span></a>

Добавлено через 26 секунд
Вот мы их нашли...

JavaScript
1
var elems = document.querySelectorAll('span[class^="day"]');

Добавлено через 1 минуту
Цвета для дней недели...

JavaScript
1
var colors = ['red', 'blue', 'green', 'yellow', 'brown', 'aqua', 'gray'];

Добавлено через 25 секунд
Сами дни недели...

JavaScript
1
var days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];

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

JavaScript
1
2
3
4
5
6
7
8
9
10
function changeMinute(n) {
    setTimeout(function () {
        elems.forEach(function (span, i) {
            span.style.color = colors[i];
            span.innerHTML = days[i] + ', ' + new Date().toLocaleTimeString();
        });
        changeMinute(60);
    }, n * 1000);
}
changeMinute(60 - new Date().getSeconds());

@бел ка · 18.04.2023, 01:15 **[ТС]**

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

находим спаны, вставляем день и время, обновляем, на этом СТОП...

Добавлено через 50 минут
в неделе 10080 минут. (7×24×60=10080мин.)

делим неделю на 4 разных промежутка

duration 1440мин — color: #0f0;
duration 4070мин — color: #ff0;
duration 245мин — color: #00f;
duration 4325мин — color: f00;

что в сумме будет ровно 10080 минут, одна неделя, каждому промежутку назначаем свой цвет,

начинаем отсчёт смены цвета,

start day 0 hours 0,0,0(воскресенье, 00:00:00) для спана с классом day_0
start day 1 hours 0,0,0(понедельник, 00:00:00) для спана с классом day_1
start day 2 hours 0,0,0(вторник, 00:00:00) для спана с классом day_2
start day 3 hours 0,0,0(среда, 00:00:00) для спана с классом day_3
start day 4 hours 0,0,0(четверг, 00:00:00) для спана с классом day_4
start day 5 hours 0,0,0(пятница, 00:00:00) для спана с классом day_5
start day 6 hours 0,0,0(суббота, 00:00:00) для спана с классом day_6

start - это начало отсчёта смены цвета, день недели в 00ч 00м 00с
duration это продолжительность каждого цвета в минутах

не знаю как ещё можно объяснить что в результате должно получиться...........

@бел ка · 18.04.2023, 18:35 **[ТС]**

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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>
    <a><span>nik-1</span> <span class="day_0"></span></a><br />
    <a><span>nik-2</span> <span class="day_1"></span></a><br />
    <a><span>nik-3</span> <span class="day_2"></span></a><br />
    <a><span>nik-4</span> <span class="day_3"></span></a><br />
    <a><span>nik-5</span> <span class="day_4"></span></a><br />
    <a><span>nik-6</span> <span class="day_5"></span></a><br />
    <a><span>nik-7</span> <span class="day_6"></span></a>
    <script>  
            const LINKS = document.querySelectorAll('[class^="day_"');
      
      function two_digit(n) {
      return ("" + n).padStart(2, "0");
      }
      
      function sad() {
      var s = new Date();
      var days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
      var hours = s.getHours();
      var min = s.getMinutes();
      var sec = s.getSeconds();
      
      setTimeout(sad, (60 - sec) * 1000);
      
      LINKS.forEach((el) => {
      el.textContent = `${days[s.getDay()]}, ${two_digit(hours)}:${two_digit(min)}:${two_digit(sec)}`;
      });
      }
      
      sad();
    </script>
  </body>
</html>

как исправить?

@Tanya2007 · 18.04.2023, 22:51

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

const LINKS = document.querySelectorAll('[class^="day_"]');

Квадратная скобка в конце пропущена.

@бел ка · 18.04.2023, 23:53 **[ТС]**

Tanya2007, ага, исправила, но тел старый, этот скрипт не хочет работать, ругается на 44 строчку...

@Tanya2007 · 19.04.2023, 00:08

бел ка,
LINKS - это псевдомассив (коллекция), метода foreach у него нет, чтобы использовать ForEach, нужно LINKS преобразовать в массив:

JavaScript
1
[...LINKS].forEach

@бел ка · 19.04.2023, 00:55 **[ТС]**

Tanya2007, а не подскажешь как правильно удалить 29, 42-49 строки и заменить чем-то типа функции

JavaScript
1
2
3
4
5
6
function clock_min() {
  setInterval(function () {
  document.querySelectorAll('.day_0','.day_1','.day_2','.day_3','.day_4','.day_5','.day_6').innerHTML = sad();
  }, 60000);
  }
  clock();

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

@бел ка · 19.04.2023, 20:45 **[ТС]**

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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <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>
    <a><span>nik-1</span> <span class="day_0"></span></a><br />
    <a><span>nik-2</span> <span class="day_1"></span></a><br />
    <a><span>nik-3</span> <span class="day_2"></span></a><br />
    <a><span>nik-4</span> <span class="day_3"></span></a><br />
    <a><span>nik-5</span> <span class="day_4"></span></a><br />
    <a><span>nik-6</span> <span class="day_5"></span></a><br />
    <a><span>nik-7</span> <span class="day_6"></span></a>
    <script>  
            const LINKS = document.querySelectorAll('[class^="day_"]');
      
      function two_digit(n) {
      return ("" + n).padStart(2, "0");
      }
      
      function sad() {
      var s = new Date();
      var days = ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"];
      var hours = s.getHours();
      var min = s.getMinutes();
      var sec = s.getSeconds();
      
      setTimeout(sad, (60 - sec) * 1000);
      
      LINKS.forEach((el) => {
      el.textContent = `${days[s.getDay()]}, ${two_digit(hours)}:${two_digit(min)}:${two_digit(sec)}`;
      });
      }
      
      sad();
    </script>
  </body>
</html>

как можно по другому написать этот код? адаптировать под старые телефоны?

@Eva Rosalene · 20.04.2023, 01:13

JavaScript
1
2
3
LINKS.forEach((el) => {
      el.textContent = `${days[s.getDay()]}, ${two_digit(hours)}:${two_digit(min)}:${two_digit(sec)}`;
      });

замените на

JavaScript
1
2
3
LINKS.forEach(function (el) {
      el.textContent = `${days[s.getDay()]}, ${two_digit(hours)}:${two_digit(min)}:${two_digit(sec)}`;
      });

после этого оно у вас 100% будет ругаться на template literals, поэтому дальше замените на

JavaScript
1
2
3
LINKS.forEach(function (el) {
      el.textContent = days[s.getDay()] + ", " + two_digit(hours) + ":" + two_digit(min) + ":" + two_digit(sec);
      });

скорее всего следующая ошибка, которую вы получите, будет связана с отсутствием в старых браузерах метода padStart
тогда вам придётся заменить

JavaScript
1
2
3
function two_digit(n) {
      return ("" + n).padStart(2, "0");
      }

на

JavaScript
1
2
3
4
5
6
7
8
9
10
function padStart(str, length, symbol) {
      while (str.length < length) {
            str = symbol + str;
      }
      return str;
}
 
function two_digit(n) {
      return padStart(String(n), 2, "0");
}

Если и так не заработает - штош

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Первый деплой lagorue 16.01.2026 Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes lagorue 13.01.2026 А пригодятся-ли мне знания kubernetes в России?	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/	WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	18.04.2023, 01:15 [ТС]
	это и правда, пипец просто, такое впечатление что я пишу на марсианском языке, который не один землянин не понимает... находим спаны, вставляем день и время, обновляем, на этом СТОП... Добавлено через 50 минут в неделе 10080 минут. (7×24×60=10080мин.) делим неделю на 4 разных промежутка duration 1440мин — color: #0f0; duration 4070мин — color: #ff0; duration 245мин — color: #00f; duration 4325мин — color: f00; что в сумме будет ровно 10080 минут, одна неделя, каждому промежутку назначаем свой цвет, начинаем отсчёт смены цвета, start day 0 hours 0,0,0(воскресенье, 00:00:00) для спана с классом day_0 start day 1 hours 0,0,0(понедельник, 00:00:00) для спана с классом day_1 start day 2 hours 0,0,0(вторник, 00:00:00) для спана с классом day_2 start day 3 hours 0,0,0(среда, 00:00:00) для спана с классом day_3 start day 4 hours 0,0,0(четверг, 00:00:00) для спана с классом day_4 start day 5 hours 0,0,0(пятница, 00:00:00) для спана с классом day_5 start day 6 hours 0,0,0(суббота, 00:00:00) для спана с классом day_6 start - это начало отсчёта смены цвета, день недели в 00ч 00м 00с duration это продолжительность каждого цвета в минутах не знаю как ещё можно объяснить что в результате должно получиться........... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	18.04.2023, 23:53 [ТС]
	Tanya2007, ага, исправила, но тел старый, этот скрипт не хочет работать, ругается на 44 строчку... 0