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

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

@DrType · 29.04.2023, 09:58

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

@бел ка · 29.04.2023, 10:06 **[ТС]**

Jess163, сейчас ругается на 67 строку

JavaScript
1
elem.title = `Прошло ${startPoint} дн`;

@бел ка · 29.04.2023, 10:29 **[ТС]**

DrType, конвертировала

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
    
 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"><style>
.nik { 
   font: 16px serif;
   color: #666;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   </style>
   </head>
   <body>
<span class="day_5">test</span><br><br>
<span class="day_2">test</span><br><br>
<span class="day_6">test</span><br><br>
<span class="day_3">test</span><br><br>
<span class="day_0">test</span><br><br>
<span class="day_4">test</span><br><br>
<span class="day_1">test</span><br><br>
<span class="day_0">test</span>
<hr /> 
<span class="day_5">a</span><br><br>
<span class="day_2">s</span><br>
<span class="day_6">d</span><br>
<span class="day_3">ert</span><br>
<span class="day_0">g</span><br>
<span class="day_4">vbn</span><br>
<span class="day_1">b</span><br>
<span class="day_0">1234</span>
 
<script>
var elems = document.querySelectorAll('[class^="day"]'),
  days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
function checkMin(m) {
  var color = '';
  if (m >= 0 && m < 1440) color = '#090';else if (m >= 1440 && m < 5510) color = '#f00';else if (m >= 5510 && m < 5755) color = '#00f';else if (m >= 5755 && m < 10080) color = '#099';
  return color;
}
function func() {
  Array.from(elems).forEach(function (elem) {
    var index = elem.className.replace(/[^\d]+/g, ''),
      WD = days[index],
      date = new Date(),
      Min = date.getHours() * 60 + date.getMinutes(),
      today = date.getDay(),
      startPoint = index < today ? today - index : index == today ? 0 : today - index + 7,
      amount = startPoint * 1440 + Min;
    elem.innerHTML = 'С начала ' + days[dayIndex] + ' до текущей минуты прошло <b>' + minutesPassed + '</b> минут';
    elem.style.color = checkMin(amount);
    elem.title = "Прошло".concat(startPoint, " дн");
  });
}
func();
</script>
</body>
</html>

@eniqx · 29.04.2023, 11:48

не знаю как вы, а я сдаюсь)
А почему вы пишите на js код для мобильных телефонов, причем, как я понимаю, старых версий?
React-native, flutter, dart не подходят?
Либо вам надо создать новую тему, где вам подскажут люди, которые хорошо разбираются в мобильной разработке.
Ответ на ваш вопрос был получен, код на js отрабатывает без проблем. То что он не работает не мобильных устройствах, я думаю это уже вопрос не по этой части

@бел ка · 29.04.2023, 13:18 **[ТС]**

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

@бел ка · 29.04.2023, 22:43 **[ТС]**

никто не знает как в этом скрипте исправить функцию renewal

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"><style>
.nik { 
   font: 16px serif;
   color: #666;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   </style>
   </head>
   <body>
<span class="day_5">пт</span><br><br>
<span class="day_2">вт</span><br>
<span class="day_6">сб</span><br>
<span class="day_3">ср</span><br>
<span class="day_0">вс</span><br>
<span class="day_4">чт</span><br>
<span class="day_1">пн</span><br>
<span class="day_0">вс</span>
<br><br> 
<span class="day_5">пт</span><br><br>
<span class="day_2">вт</span><br>
<span class="day_6">сб</span><br>
<span class="day_3">ср</span><br>
<span class="day_0">вс</span><br>
<span class="day_4">чт</span><br>
<span class="day_1">пн</span><br>
<span class="day_0">вс</span>
 
<script>
var elems = document.querySelectorAll('[class^="day"]');
var days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
function checkMin(m) {
    var color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function renewal(d, elems) {
    var thisMin = d.getHours() * 60 + d.getMinutes();
    var index = d.getDay();
    var len = 0;
    for(var i = index; i >= len; i--) {
        elems[i].innerHTML = 'С начала ' + days[i] + ', до текущей минуты, прошло ' + thisMin + ' мин';
        elems[i].style.color = checkMin(thisMin);
        thisMin += 1440;        
        if(i === 0) {
            i = elems.length;
            len = index + 1;
            index = elems.length + 1;
        }
    }
}
 
renewal(new Date(), elems);
</script>
</body>
</html>

чтобы правильно работала и на старых телефонах, как эта функция

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function func(){
[...elems].forEach(function(elem){
const index = elem.className.replace(/[^\d]+/g, ''),
      WD = days[ index ],
      date = new Date(),
      Min = date.getHours() * 60 + date.getMinutes(),
      today = date.getDay(),
      startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
      amount = startPoint * 1440 + Min;
elem.innerHTML = `С начала ${WD} до текущей минуты прошло <b>${amount}<b> минут`;
elem.style.color = checkMin(amount);
elem.title = `Прошло ${startPoint} дн`;
});
}
 
func();

Добавлено через 41 минуту
возможно ли к переменной "var i = index; " добавить массив типа ["day_0", "day_1", "day_2", "day_3", "day_4", "day_5", "day_6"], с именами классов чтобы обозначить в каком спане от какого дня отсчитывать минуты для присвоения цвета...

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

@бел ка · 30.04.2023, 20: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
    
 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"><style>
.nik { 
   font: 16px serif;
   color: #666;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   </style>
   </head>
   <body>
<a>nik-1 <span class="day_5">пт</span></a><br>
<a>nik-2 <span class="day_2">вт</span></a><br>
<a>nik-3 <span class="day_6">сб</span></a><br> 
<a>nik-4 <span class="day_3">ср</span></a><br>
<a>nik-5 <span class="day_0">вс</span></a><br>
<a>nik-6 <span class="day_4">чт</span></a><br>
<a>nik-7 <span class="day_1">пн</span></a><br>
<a>nik-8 <span class="day_0">вс</span></a><br> 
<a>nik-9 <span class="day_5">пт</span></a><br>
<a>nik-10 <span class="day_2">вт</span></a><br>
<a>nik-11 <span class="day_6">сб</span></a><br>
<a>nik-12 <span class="day_3">ср</span></a><br>
<a>nik-13 <span class="day_0">вс</span></a><br>
<a>nik-14 <span class="day_4">чт</span></a><br>
<a>nik-15 <span class="day_1">пн</span></a><br>
<a>nik-16 <span class="day_0">1234</span></a>
<script>
const elems = document.querySelectorAll('[class^="day"]'),
      days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
function checkMin(m) {
    let color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function func(){
[...elems].forEach(function(elem){
const index = elem.className.replace(/[^\d]+/g, ''),
      WD = days[ index ],
      date = new Date(),
      Min = date.getHours() * 60 + date.getMinutes(),
      today = date.getDay(),
      startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
      amount = startPoint * 1440 + Min;
elem.innerHTML = `С начала ${WD} до текущей минуты прошло <b>${amount}<b> минут`;
elem.style.color = checkMin(amount);
elem.title = `Прошло ${startPoint} дн`;
});
}
 
func();
</script>
</body>
</html>

@DrType · 30.04.2023, 20:52

бел ка, я всё же за Babel. Пробуйте разные версии, должно получиться. Вот ещё тут онлайн конвертер.
Почему возникла ошибка с from, я не знаю...

@бел ка · 01.05.2023, 12:30 **[ТС]**

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

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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"><style>
.nik { 
   font: 16px serif;
   color: #666;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   </style>
   </head>
   <body>
<span class="day_5">пт</span><br>
<span class="day_2">вт</span><br>
<span class="day_6">сб</span><br>
<span class="day_3">ср</span><br>
<span class="day_0">вс</span><br>
<span class="day_4">чт</span><br>
<span class="day_1">пн</span><br>
<span class="day_0">вс</span>
<hr /> 
<span class="day_5">пт</span><br>
<span class="day_2">вт</span><br>
<span class="day_6">сб</span><br>
<span class="day_3">ср</span><br>
<span class="day_0">вс</span><br>
<span class="day_4">чт</span><br>
<span class="day_1">пн</span><br>
<span class="day_0">вс</span>
 
<script>
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var elems = document.querySelectorAll('[class^="day"]'),
    days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
function checkMin(m) {
  var color = '';
 if (m >= 0 && m < 1440) color = '#090';
 else if (m >= 1440 && m < 5510) color = '#f00';
 else if (m >= 5510 && m < 5755) color = '#00f';
 else if (m >= 5755 && m < 10080) color = '#099';
 return color;
}
function func() {
  [].concat(_toConsumableArray(elems)).forEach(function (elem) {
    var index = elem.className.replace(/[^\d]+/g, ''),
        WD = days[index],
        date = new Date(),
        Min = date.getHours() * 60 + date.getMinutes(),
        today = date.getDay(),
        startPoint = index < today ? today - index : index == today ? 0 : today - index + 7,
        amount = startPoint * 1440 + Min;
    elem.innerHTML = '\u0421 \u043D\u0430\u0447\u0430\u043B\u0430 ' + WD + ' \u0434\u043E \u0442\u0435\u043A\u0443\u0449\u0435\u0439 \u043C\u0438\u043D\u0443\u0442\u044B \u043F\u0440\u043E\u0448\u043B\u043E <b>' + amount + '<b> \u043C\u0438\u043D\u0443\u0442';
    elem.style.color = checkMin(amount);
    elem.title = '\u041F\u0440\u043E\u0448\u043B\u043E ' + startPoint + ' \u0434\u043D';
  });
}
func();
</script>
</body>
</html>

в 41 строке

@eniqx · 01.05.2023, 16:15

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
<script>
var elems = document.querySelectorAll('[class^="day"]'),
      days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
function checkMin(m) {
    var color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function func(){
for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var index = elem.className.replace(/[^\d]+/g, ''),
        WD = days[ index ],
        date = new Date(),
        Min = date.getHours() * 60 + date.getMinutes(),
        today = date.getDay(),
        startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
        amount = startPoint * 1440 + Min;
    elem.innerHTML = 'С начала ' + WD + ' до текущей минуты прошло <b>' + amount + '</b> минут';
    elem.style.color = checkMin(amount);
    elem.title = 'Прошло ' + startPoint + ' дн';
}
}
 
func();
</script>

@бел ка · 02.05.2023, 19:43 **[ТС]**

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

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
    
 
<script>
var elems = document.querySelectorAll('[class^="day"]'),
      days = ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'];
 
function checkMin(m) {
    var color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function func(){
for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var index = elem.className.replace(/[^\d]+/g, ''),
        WD = days[ index ],
        date = new Date(),
        Min = date.getHours() * 60 + date.getMinutes(),
        today = date.getDay(),
        startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
        amount = startPoint * 1440 + Min;
    elem.innerHTML = 'С начала ' + WD + ' до текущей минуты прошло <b>' + amount + '</b> минут';
    elem.style.color = checkMin(amount);
    elem.title = 'Прошло ' + startPoint + ' дн';
}
}
 
func();
</script>

одним словом, как к этому скрипту правильно добавить эти функции, чтобы в каждом спане было,

HTML5
1
<span class="day_5">пятница, вт, 12:59:00</span>

где вт, 12:59:00 текущее время с обновлением в 00сек

JavaScript
1
2
3
4
5
6
function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }

JavaScript
1
2
3
4
5
6
7
8
9
10
  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;
  }

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

Добавлено через 5 часов 9 минут
никто не знает как сейчас добавить ежеминутное обновление элементов в 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
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
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"><style>
a { 
   font: 25px serif;
   color: #666;
   text-decoration: none;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   </style>
   </head>
   <body>
<a href="">nik-1 <span class="day_0"></span></a><br>
<a href="">nik-2 <span class="day_1"></span></a><br>
<a href="">nik-3 <span class="day_2"></span></a><br>
<a href="">nik-4 <span class="day_3"></span></a><br>
<a href="">nik-5 <span class="day_4"></span></a><br>
<a href="">nik-6 <span class="day_5"></span></a><br>
<a href="">nik-7 <span class="day_6"></span></a><br><br>
<a href="">nik-8 <span class="day_0"></span></a><br>
<a href="">nik-9 <span class="day_5"></span></a><br>
<a href="">nik-10 <span class="day_2"></span></a><br>
<a href="">nik-11 <span class="day_6"></span></a><br>
<a href="">nik-12 <span class="day_3"></span></a><br>
<a href="">nik-13 <span class="day_0"></span></a><br>
<a href="">nik-14 <span class="day_4"></span></a><br>
<a href="">nik-15 <span class="day_1"></span></a><br>
<a href="">nik-16 <span class="day_0"></span></a>
 
<script>
var elems = document.querySelectorAll('[class^="day"]'),
      days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
 
function checkMin(m) {
    var color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
 
function sad() {
    var s = new Date();
    
    var wdays = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(s.getHours());
    var min = two_digit(s.getMinutes());
    var sec = two_digit(s.getSeconds());
  
    return wdays[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
 
function renewal(){
for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var index = elem.className.replace(/[^\d]+/g, ''),
        WD = days[ index ],
        date = new Date(),
        Min = date.getHours() * 60 + date.getMinutes(),
        today = date.getDay(),
        startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
        amount = startPoint * 1440 + Min;
    elem.innerHTML = WD + ', ' + sad();
    elem.style.color = checkMin(amount);
    elem.title = 'Прошло ' + startPoint + ' дн';
}
}
 
renewal();
</script>
</body>
</html>

JavaScript
1
2
3
4
5
6
7
function clock(s) {
  setTimeout(function () {
  document.querySelectorAll('[class^="day"]').innerHTML = sad();
  clock(60);
  }, s * 1000);
  }
  clock(60 - new Date().getSeconds());

а в остальном я получила то, чего и хотела...

Добавлено через 1 час 27 минут
если более правильно сформулировать вопрос, я не совсем догоняю как правильно подключить функцию обновления, если в скрипте уже в 41 строке

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

уже нашли все нужные элементы...

@бел ка · 03.05.2023, 08:07 **[ТС]**

никто не знает как добавить обновление элементов?

@Eva Rosalene · 03.05.2023, 10:59

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

Почему возникла ошибка с from, я не знаю...

Потому что по умолчанию Babel не полифиллит. Этого можно добиться или с помощью babel-preset-env, или руками загузив core-js

@бел ка · 03.05.2023, 13:03 **[ТС]**

никто не знает как добавить обновление элементов?

@бел ка · 04.05.2023, 01:00 **[ТС]**

никто не знает как добавить обновление элементов?

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

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

1.) найти все элементы с классом day_0, day_1, day_2, day_3, day_4, day_5, day_6

2.) вставить текущее время (ср, 17:41:00) обновляя раз в минуту в 00сек

3.) определить для каждого спана день недели (индекс дня недели), с которого начинается отсчёт, обрезав в названии класса первых 4 символа (day_), получив 0, 1, 2, 3, 4, 5, 6

4.) высчитать сколько минут прошло минут с начала этих дней

5.) определить какому из 4х отрезков времени соответствует текущий момент, и уведомить пользователя, мол сейчас 1ый (2, 3, 4) отрезок времени, не текстом, а присвоив каждому отрезку времени свой цвет

всё вышеперечисленное скрипт выполняет, кроме обновления элементов...

Добавлено через 4 часа 51 минуту
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"><style>
a { 
   font: 25px serif;
   color: #666;
   text-decoration: none;
   }
   #data,
   .day_0,
   .day_1,
   .day_2,
   .day_3,
   .day_4,
   .day_5,
   .day_6 { 
   font: 25px serif;
   }
   table, td {
   border: 1px solid #666;
   }
   td {
   padding: 5px;
   }
   </style>
   </head>
   <body>
   <table>
   <tr><td></td><td>
     <a href="">nik-1 <span class="day_0"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-2 <span class="day_1"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-3 <span class="day_2"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-4 <span class="day_3"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-5 <span class="day_4"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-6 <span class="day_5"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-7 <span class="day_6"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-8 <span class="day_0"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-9 <span class="day_5"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-10 <span class="day_2"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-11 <span class="day_6"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-12 <span class="day_3"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-13 <span class="day_0"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-14 <span class="day_4"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-15 <span class="day_1"></span></a>
   </td><td></td></tr>
   <tr><td></td><td>
     <a href="">nik-16 <span class="day_0"></span></a>
   </td><td></td></tr>
   <tr><td colspan="3" style="color: #090;">
     если время (<span class="day_x"></span>) окрашено этим цветом, то сейчас 1-ый отрезок времени...
   </td></tr>
   <tr><td colspan="3" style="color: #f00;">
     если время (<span class="day_x"></span>) окрашено этим цветом, то сейчас 2-ой отрезок времени...
   </td></tr>
   <tr><td colspan="3" style="color: #00f;">
     если время (<span class="day_x"></span>) окрашено этим цветом, то сейчас 3-ий отрезок времени...
   </td></tr>
   <tr><td colspan="3" style="color: #099;">
     если время (<span class="day_x"></span>) окрашено этим цветом, то сейчас 4-ый отрезок времени...
   </td></tr>
   </table>
 
<script>
var elems = document.querySelectorAll('[class^="day"]'),
      days = ['воскресенье', 'понедельник', 'вторник', 'среда', 'четверг', 'пятница', 'суббота'];
 
function checkMin(m) {
    var color = '';
    if (m >= 0 && m < 1440) color = '#090';
    else if (m >= 1440 && m < 5510) color = '#f00';
    else if (m >= 5510 && m < 5755) color = '#00f';
    else if (m >= 5755 && m < 10080) color = '#099';
    return color;
}
 
function two_digit(n) {
    var str = "";
    if (n <= 9) str = "0";
    str = str + n;
    return str;
  }
 
function sad() {
    var s = new Date();
    
    var wdays = ["Вс","Пн","Вт","Ср","Чт","Пт","Сб"];
    var hours = two_digit(s.getHours());
    var min = two_digit(s.getMinutes());
    var sec = two_digit(s.getSeconds());
  
    return wdays[s.getDay()] + ", " + hours + ":" + min + ":" + sec;
  }
 
function renewal(){
for (var i = 0; i < elems.length; i++) {
    var elem = elems[i];
    var index = elem.className.replace(/[^\d]+/g, ''),
        WD = days[ index ],
        date = new Date(),
        Min = date.getHours() * 60 + date.getMinutes(),
        today = date.getDay(),
        startPoint = index < today ? (today - index) : index == today ? 0 : (today - index + 7),
        amount = startPoint * 1440 + Min;
    elem.innerHTML = sad();
    elem.style.color = checkMin(amount);
    elem.title = 'Прошло ' + startPoint + ' дн';
}
}
 
renewal();
</script>
</body>
</html>

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

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

уже нашли все нужные элементы...

@Eva Rosalene · 04.05.2023, 05:17

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

обновляя раз в минуту в 00сек

Если обновлять подойдёт раз в секунду, то всё максмально просто: setInterval(renewal, 1000)

@бел ка · 04.05.2023, 06:27 **[ТС]**

JavaScript
1
2
3
4
5
6
7
function clock(s) {
  setTimeout(function () {
  document.querySelectorAll('[class^="day"]').innerHTML = sad();
  clock(60);
  }, s * 1000);
  }
  clock(60 - new Date().getSeconds());

вот приблизительно как нужно обновлять, но у меня не получается заставить эту функцию работать, как ни пыталась постоянно ошибки в консоли :-(

@Eva Rosalene · 04.05.2023, 06:42

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

вот приблизительно как нужно обновлять, но у меня не получается заставить эту функцию работать, как ни пыталась постоянно ошибки в консоли :-(

Какие ошибки?

@бел ка · 04.05.2023, 09:19 **[ТС]**

Eva Rosalene, время не обновляется, смотри на скриншоте, справа вверху текущее время, а в таблице время загрузки страницы...

@Eva Rosalene · 04.05.2023, 11:40

бел ка, а в консоли-то что?

Новые блоги и статьи Все статьи Все блоги /
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. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	29.04.2023, 09:58
	бел ка, берите нормальный js код и конвертируйте здесь в понятный вашему телефону. 0

@eniqx 74 / 53 / 24 Регистрация: 10.06.2015 Сообщений: 162
	29.04.2023, 11:48
	не знаю как вы, а я сдаюсь) А почему вы пишите на js код для мобильных телефонов, причем, как я понимаю, старых версий? React-native, flutter, dart не подходят? Либо вам надо создать новую тему, где вам подскажут люди, которые хорошо разбираются в мобильной разработке. Ответ на ваш вопрос был получен, код на js отрабатывает без проблем. То что он не работает не мобильных устройствах, я думаю это уже вопрос не по этой части 1

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

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	30.04.2023, 20:52
	бел ка, я всё же за Babel. Пробуйте разные версии, должно получиться. Вот ещё тут онлайн конвертер. Почему возникла ошибка с from, я не знаю... 1

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	03.05.2023, 08:07 [ТС]
	никто не знает как добавить обновление элементов? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	03.05.2023, 13:03 [ТС]
	никто не знает как добавить обновление элементов? 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	04.05.2023, 09:19 [ТС]
	Eva Rosalene, время не обновляется, смотри на скриншоте, справа вверху текущее время, а в таблице время загрузки страницы... Миниатюры 0

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	04.05.2023, 11:40
	бел ка, а в консоли-то что? 0

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

Решение