Как к дате добавить "n" дней?

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

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

есть какая то дата например 10.02.2024, надо получить несколько дат,

дата1 = дата + 5 дней

дата2 = дата + 73 дня

дата3 = дата - 19 дней

дата4 = дата - 75 дней

как это сделать?

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

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
    <meta charset="UTF-8">
    <title>Chinese Zodiac</title>
    <style>
        @import url(https://db.onlinewebfonts.com/c/20a04794234e8f0981f0400c51ba02cd?family=OpticalBDB+Normal);orUse font-face declaration Fonts.(http | https)
        @font-face {
        font-family: "OpticalBDB Normal";
        src: url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.eot");
        src: url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.eot?#iefix")format("embedded-opentype"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.woff2")format("woff2"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.woff")format("woff"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.ttf")format("truetype"),
        url("https://db.onlinewebfonts.com/t/20a04794234e8f0981f0400c51ba02cd.svg#OpticalBDB Normal")format("svg");
        }
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
    </style>
</head>
<body>
 
<input type="date" id="desiredDate" min="1863-01-01" max="2299-12-31" />
<br/>
<div id="info"></div>
 
  <script>
    var listColors = [
      "зелёно", "зелёно", "красно", "красно", "жёлто", "жёлто", "бело", "бело", "сине", "сине"];
    var listEnd = [
      "й", "го", "го", "го","го", "й","й", "й", "й", "го", "й", "й"];
    var listAnimal = [
      "крысы", "быка", "тигра", "кролика", "дракона", "змеи", "лошади", "козы", "обезьяны", "петуха", "собаки", "свиньи" ];
    var dates = [
      { month: "01",
        day: [
          {"21":
            ["1890", "1966"] },
          {"22":
            ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
          {"23":
            ["1917", "1928", "1974", "1993", "2012", "2031"] },
          {"24":
            ["1887", "1936", "1955", "2001", "2039"] },
          {"25":
            ["1868", "1906", "1925", "1944", "1963", "1982", "2020"] },
          {"26":
            ["1876", "1895", "1914", "1933", "2009", "2028"] },
          {"27":
            ["1865", "1941", "1952", "1971", "1990"] },
          {"28":
            ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
          {"29":
            ["1873", "1903", "1949", "1987", "2006", "2025"] },
          {"30":
            ["1881", "1892", "1911", "1930", "1968", "2044"] },
          {"31": 
            ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
            ]
        },
        { month: "02",
          day: [
          {"1":
            ["1919", "2003", "2022", "2041"] },
          {"2":
            ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
          {"3":
            ["1916", "1954", "1973", "2011", "2030"] },
          {"4":
            ["1886", "1905", "1935", "1992", "2038"] },
          {"5":
            ["1867", "1924", "1943", "1962", "1981", "2019"] },
          {"6":
            ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
          {"7":
            ["1978", "1997", "2008"] },
          {"8":
            ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
          {"9":
            ["1872", "1891", "1967", "1986", "2005"] },
          {"10":
            ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
          {"11":
            ["1869", "1918", "1937", "1975", "2032"] },
          {"12":
            ["1888", "1956", "2021", "2040"] },
          {"13":
            ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
          {"14":
            ["1915", "1934", "1953", "2010"] },
          {"15":
            ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
          {"16":
            ["1904", "1923", "1980", "1999", "2018"] },
          {"17":
            ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
          {"18":
            ["1863", "1882", "1912", "1958", "1977", "2007"] },
          {"19":
            ["1871", "1901", "1939", "1996", "2015", "2034"] },
          {"20":
            ["1920", "1985"] },
            ]
        }
    ];
 
   function srch(arr, dat) {
     var p = dat.split('-')[0];
       function run(a, z, b) {
         if(b.length === 6) return b;
           for(var i = 0; i < a.length; i++) {
             for(var j = 0; j < a[i].day.length; j++) {
               for(var o in a[i].day[j]) {
                 for(var r = 0; r < a[i].day[j][o].length; r++) {
                  if(a[i].day[j][o][r] == z) {
                    b.push(o, a[i].month, z);
                  return run(a, String(++p), b);
                }
              }
            }
          }
        }
      }
      return run(arr, p, []);
  }
 
function ChineseZodiac() {
  var result = srch(dates, this.value);
  var oneDataDay = parseInt(result[0]);
  var oneDataMonth = result[1];
  var oneDataYear = result[2];
  var endDataDay = parseInt(result[3]) - 1;
  var endDataMonth = result[4];
  var endDataYear = result[5];
 
  var oneData = oneDataDay + '.' + oneDataMonth + '.' + oneDataYear;
  var endData = endDataDay + '.' + endDataMonth + '.' + endDataYear;
  var cineseYear = oneData + '-' + endData;
 
  
  var currentDate = this.value ? new Date(this.value) : new Date();
  var currentYear = currentDate.getFullYear();
 
  var colorIndex = (currentYear - 1564) % 10;
  var color = listColors[colorIndex];
 
  var endIndex = (currentYear - 1564) % 12;
  var end = listEnd[endIndex];
 
  var animalIndex = (currentYear - 1564) % 12;
  var animal = listAnimal[animalIndex];
 
  var chineseNumYear = currentYear + 2697;
  var cycleNum = Math.floor(chineseNumYear / 60) + 1;
  var yearCycle = (chineseNumYear % 60 === 0 ? 6 : chineseNumYear % 60) + " год в 60-летнем цикле.";
 
  var infoElement = document.getElementById("info");
  infoElement.innerHTML = "год " + color + end + " " + animal + "." + "<br/>" + oneData + '-' + endData + "<br/>" + chineseNumYear + " г." + "<br/>" + cycleNum + " цикл" + "<br/>" + yearCycle;
}
 
 
    var input = document.getElementById('desiredDate');
 
    input.value = new Date().getFullYear() + '-' + ((new Date().getMonth() < 9) ? '0' : '') + (new Date().getMonth() + 1) + '-' + ((new Date().getDate() < 10) ? '0' : '') + new Date().getDate();
    input.addEventListener('change', ChineseZodiac);
    input.dispatchEvent(new Event('change'));
  </script>
 </body>
</html>

в этом скрипте получаем даты,

JavaScript
1
2
3
4
5
6
7
8
9
10
var result = srch(dates, this.value);
  var oneDataDay = parseInt(result[0]);
  var oneDataMonth = result[1];
  var oneDataYear = result[2];
  var endDataDay = parseInt(result[3]) - 1;
  var endDataMonth = result[4];
  var endDataYear = result[5];
 
  var oneData = oneDataDay + '.' + oneDataMonth + '.' + oneDataYear;
  var endData = endDataDay + '.' + endDataMonth + '.' + endDataYear;

как дальше получить даты национальных китайских праздников, +/- дней от этих дат?

@kidASM · 08.02.2024, 15:40

Цифры в таблицы совместимости указывают с какой версии данная функция поддерживается. В данном случае, toLocaleDateString() в Chrome Android полностью поддерживается с версии номер 25.

@бел ка · 12.02.2024, 23:06 **[ТС]**

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

@voraa · 12.02.2024, 23:25

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

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

В таком случае, у них многие бы страницы не открывались или открывались с кучей ошибок. В конце концов человек бы заинтересовался - а почему собственно?
Вполне возможно, что есть еще люди, у кого есть ламповый телевизор или приемник. Вот только лампы для них уже не производятся.
Обычно про каждую возможность в html, js или css смотрят - поддерживает ее более 97-98% используемых браузеров - значит можно пользоваться. Оставшихся, скорее всего, это не интересует.

@бел ка · 12.02.2024, 23:31 **[ТС]**

как правильно присвоить класс элементам спан в этом скрипте

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE HTML>
 <html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>Chinese Zodiac</title>
  <style>
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "ITC Benguiat Std Medium Condensed";
            font-family: "ITC Benguiat Std Book Condensed";
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
        
        span.tree {
        color: hsl(120,100%,30%);
        } /* дерево */
        span.fire {
        color: hsl(345,100%,50%);
        } /* огонь */
        span.earth {
        color: hsl(51, 100%, 50%);
        } /* земля*/
        span.metallic {
        color: hsl(0, 0%, 75%);
        } /* металл*/
        span.water {
        color: hsl(215,100%,50%);
        } /* вода */
    </style>
</head>
<body>
 
  <input type="date" id="desiredDate" min="1564-01-01" max="2299-12-31"/>
  <br/>
  <div id="info"></div>
 
  <script>
    document.getElementById('desiredDate').valueAsDate = new Date();
 
    var listClass = ["tree", "fire", "earth", "metallic", "water"];
    
    var dates = [
          { month: "01",
            day: [
              {"21":
                ["1890", "1966"] },
              {"22":
                ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
              {"23":
                ["1917", "1928", "1974", "1993", "2012", "2031"] },
              {"24":
                ["1887", "1936", "1955", "2001", "2039"] },
              {"25":
                ["1868", "1906", "1925", "1944", "1963", "1982", "2020"] },
              {"26":
                ["1876", "1895", "1914", "1933", "2009", "2028"] },
              {"27":
                ["1865", "1941", "1952", "1971", "1990"] },
              {"28":
                ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
              {"29":
                ["1873", "1903", "1949", "1987", "2006", "2025"] },
              {"30":
                ["1881", "1892", "1911", "1930", "1968", "2044"] },
              {"31": 
                ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
                ]
            },
            { month: "02",
              day: [
              {"1":
                ["1919", "2003", "2022", "2041"] },
              {"2":
                ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
              {"3":
                ["1916", "1954", "1973", "2011", "2030"] },
              {"4":
                ["1886", "1905", "1935", "1992", "2038"] },
              {"5":
                ["1867", "1924", "1943", "1962", "1981", "2000", "2019"] },
              {"6":
                ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
              {"7":
                ["1978", "1997", "2008"] },
              {"8":
                ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
              {"9":
                ["1872", "1891", "1967", "1986", "2005"] },
              {"10":
                ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
              {"11":
                ["1869", "1918", "1937", "1975", "2032"] },
              {"12":
                ["1888", "1956", "2002", "2021", "2040"] },
              {"13":
                ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
              {"14":
                ["1915", "1934", "1953", "2010"] },
              {"15":
                ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
              {"16":
                ["1904", "1923", "1980", "1999", "2018"] },
              {"17":
                ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
              {"18":
                ["1863", "1882", "1912", "1958", "1977", "2007"] },
              {"19":
                ["1871", "1901", "1939", "1996", "2015", "2034"] },
              {"20":
                ["1920", "1985"] },
                ]
            }
        ];
 
    function srch(arr, dat) {
      var p = dat.split('-')[0];
        var cnt = [-1, 1], h = -1;
          function run(a, z, b) {
            if (b.length === 9) return b;
              for (var i = 0; i < a.length; i++) {
                for (var j = 0; j < a[i].day.length; j++) {
                  for (var o in a[i].day[j]) {
                    for (var r = 0; r < a[i].day[j][o].length; r++) {
                      if (a[i].day[j][o][r] == z) {
                      b.push(o, a[i].month, z);
                      return run(a, String(+p + cnt[++h]), b);
                    }
                  }
                }
              }
            }
          }
        return run(arr, p, []);
      }
 
    function showResult(e) {  
      var result = srch(dates, this.value);
 
      var currentDate = new Date(result[2], result[1]-1, result[0]);
      var previouseDate = new Date(result[5], result[4]-1, result[3]);
      var followingtDate = new Date(result[8], result[7]-1, result[6]);
 
      var LastDayYear = new Date(currentDate);
      LastDayYear.setDate(LastDayYear.getDate() - 1);
 
      var LastDayPreviousYear = new Date(followingtDate);
      LastDayPreviousYear.setDate(LastDayPreviousYear.getDate() - 1);
 
      var dateFormater = new Intl.DateTimeFormat();
  
      var nowDate = new Date(this.value);
 
      if (currentDate >= nowDate) {
        document.getElementById('info').innerHTML = "<span class=''>" + dateFormater.format(currentDate) + 
          '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      } else {
        document.getElementById('info').innerHTML = "<span class=''>" +  dateFormater.format(previouseDate) + 
          '-' + dateFormater.format(LastDayYear) + "</span>" + "<br>" +
          "<span class=''>" + dateFormater.format(currentDate) + '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      }
    }
 
    var input = document.getElementById('desiredDate');
 
    input.valueAsDate = new Date()
    input.addEventListener('change', showResult);
    input.dispatchEvent(new Event('change'));
 
  </script>
  <br><br>
  <span class="tree">дерево - зелёный</span><br>
  <span class="fire">огонь - красный</span><br>
  <span class="earth">земля - жёлтый</span><br>
  <span class="metallic">металл - белый</span><br>
  <span class="water">вода - синий, <span style="color: hsl(0,0%,0%);">чёрный</span></span><br>
 </body>
</html>
];

JavaScript
1
2
3
4
5
6
7
   var listClass = ["tree", "fire", "earth", "metallic", "water"];
   
   var listClassIndex = Math.floor((desiredYear - -0126) % 10 / 2 );
   var class = listClass[listClassIndex]; // дата введённая пользователем
   
   var listClassIndex_1 = Math.floor((desiredYear - -0125) % 10 / 2 );
   var class_1 = listClass[listClassIndex_1];// предыдущая дата введённая пользователем,

@voraa · 12.02.2024, 23:40

Не понятен вопрос. Вроде этим спанам и так классы присвоены.

@бел ка · 12.02.2024, 23:46 **[ТС]**

voraa, 172-179 строки скрипта

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

JavaScript
1
2
3
4
5
6
7
8
9
if (currentDate >= nowDate) {
        document.getElementById('info').innerHTML = "<span class=''>" + dateFormater.format(currentDate) + 
          '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      } else {
        document.getElementById('info').innerHTML = "<span class=''>" +  dateFormater.format(previouseDate) + 
          '-' + dateFormater.format(LastDayYear) + "</span>" + "<br>" +
          "<span class=''>" + dateFormater.format(currentDate) + '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      }
    }

@Usaga · 13.02.2024, 10:00

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

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

Это контрпродуктивный подход. Таким людям, с вероятностью 99.9% и твой сайт не будет интересен. Поэтому имеет смысл установить нижнюю планку поддержки браузеров. А не то можно закончить тем, что и поддержку Netscape Navigator тянуть. Не, ну а что? По любому где-то есть полтора землекопа, которым это надо...

@voraa · 13.02.2024, 10:45

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

voraa, 172-179 строки скрипта

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

@бел ка · 13.02.2024, 11:08 **[ТС]**

voraa, сорри, наверное надо было сформулировать вопрос по другому...

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

@voraa · 13.02.2024, 11:20

Я то откуда знаю, что должно быть в этой переменной.

@бел ка · 13.02.2024, 15:37 **[ТС]**

voraa,
desiredYear = 2024
desiredYear_1 = 2023
годам которые нашли в массиве, ну или равны году даты введённой пользоваетелем, и году предыдущей даты...

@бел ка · 14.02.2024, 22:42 **[ТС]**

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

из инпут, или из массива, или из тех дат, что нашли в массиве и распарсили ?

@voraa · 15.02.2024, 08:07

Откуда угодно, лишь бы правильно было.

Добавлено через 33 минуты
Дата китайского нового года в текущем году в currentDate

@бел ка · 15.02.2024, 16:57 **[ТС]**

voraa,
result[2] и result[5] значения года? или result[0] и result[3]

JavaScript
1
2
3
4
5
6
7
var listClass = ["tree", "fire", "earth", "metallic", "water"];
   
   var listClassIndex = Math.floor((desiredYear - -0126) % 10 / 2 );
   var class = listClass[listClassIndex]; // дата введённая пользователем
   
   var listClassIndex_1 = Math.floor((desiredYear - -0125) % 10 / 2 );
   var class_1 = listClass[listClassIndex_1];// предыдущая дата введённая пользователем

Добавлено через 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE HTML>
 <html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>Chinese Zodiac</title>
  <style>
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "ITC Benguiat Std Medium Condensed";
            font-family: "ITC Benguiat Std Book Condensed";
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
        
        span.tree {
        color: hsl(120,100%,30%);
        } /* дерево */
        span.fire {
        color: hsl(345,100%,50%);
        } /* огонь */
        span.earth {
        color: hsl(51, 100%, 50%);
        } /* земля*/
        span.metallic {
        color: hsl(0, 0%, 75%);
        } /* металл*/
        span.water {
        color: hsl(215,100%,50%);
        } /* вода */
    </style>
</head>
<body>
 
  <input type="date" id="desiredDate" min="1564-01-01" max="2299-12-31"/>
  <br/>
  <div id="info"></div>
 
  <script>
    document.getElementById('desiredDate').valueAsDate = new Date();
 
    var listClass = ["tree", "fire", "earth", "metallic", "water"];
    
    var dates = [
          { month: "01",
            day: [
              {"21":
                ["1890", "1966"] },
              {"22":
                ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
              {"23":
                ["1917", "1928", "1974", "1993", "2012", "2031"] },
              {"24":
                ["1887", "1925", "1936", "1955", "2001", "2039"] },
              {"25":
                ["1868", "1906", "1944", "1963", "1982", "2020"] },
              {"26":
                ["1876", "1895", "1914", "1933", "2009", "2028"] },
              {"27":
                ["1865", "1941", "1952", "1971", "1990"] },
              {"28":
                ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
              {"29":
                ["1873", "1903", "1949", "1987", "2006", "2025"] },
              {"30":
                ["1881", "1892", "1911", "1930", "1968", "2044"] },
              {"31": 
                ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
                ]
            },
            { month: "02",
              day: [
              {"1":
                ["1919", "2003", "2022", "2041"] },
              {"2":
                ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
              {"3":
                ["1916", "1954", "1973", "2011", "2030"] },
              {"4":
                ["1886", "1905", "1935", "1992", "2038"] },
              {"5":
                ["1867", "1924", "1943", "1962", "1981", "2000", "2019"] },
              {"6":
                ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
              {"7":
                ["1978", "1997", "2008"] },
              {"8":
                ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
              {"9":
                ["1872", "1891", "1967", "1986", "2005"] },
              {"10":
                ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
              {"11":
                ["1869", "1918", "1937", "1975", "2032"] },
              {"12":
                ["1888", "1956", "2002", "2021", "2040"] },
              {"13":
                ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
              {"14":
                ["1915", "1934", "1953", "2010"] },
              {"15":
                ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
              {"16":
                ["1904", "1923", "1980", "1999", "2018"] },
              {"17":
                ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
              {"18":
                ["1863", "1882", "1912", "1958", "1977", "2007"] },
              {"19":
                ["1871", "1901", "1939", "1996", "2015", "2034"] },
              {"20":
                ["1920", "1985"] },
                ]
            }
        ];
 
    function srch(arr, dat) {
      var p = dat.split('-')[0];
        var cnt = [-1, 1], h = -1;
          function run(a, z, b) {
            if (b.length === 9) return b;
              for (var i = 0; i < a.length; i++) {
                for (var j = 0; j < a[i].day.length; j++) {
                  for (var o in a[i].day[j]) {
                    for (var r = 0; r < a[i].day[j][o].length; r++) {
                      if (a[i].day[j][o][r] == z) {
                      b.push(o, a[i].month, z);
                      return run(a, String(+p + cnt[++h]), b);
                    }
                  }
                }
              }
            }
          }
        return run(arr, p, []);
      }
 
    function showResult(e) {  
      var result = srch(dates, this.value);
 
      var currentData = new Date(result[2], result[1]-1, result[0]);
      var previouseDate = new Date(result[5], result[4]-1, result[3]);
      var followingtDate = new Date(result[8], result[7]-1, result[6]);
 
      var LastDayYear = new Date(currentData);
      LastDayYear.setDate(LastDayYear.getDate() - 1);
 
      var LastDayPreviousYear = new Date(followingtDate);
      LastDayPreviousYear.setDate(LastDayPreviousYear.getDate() - 1);
 
      var dateFormater = new Intl.DateTimeFormat();
  
      var nowDate = new Date(this.value);
      
      var desiredYear = currentData.getFullYear();
      
      var listClassIndex = Math.floor((desiredYear - -0126) % 10 / 2 );
      var class_0 = listClass[listClassIndex];
      
      var listClassIndex_1 = Math.floor((desiredYear - -0125) % 10 / 2 );
      var class_1 = listClass[listClassIndex_1];
      
      if (currentData >= nowDate) {
        document.getElementById('info').innerHTML = "<span class='class_0'>" + dateFormater.format(currentData) + 
          '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      } else {
        document.getElementById('info').innerHTML = "<span class='class_1'>" +  dateFormater.format(previouseDate) + 
          '-' + dateFormater.format(LastDayYear) + "</span>" + "<br>" +
          "<span class='class_0'>" + dateFormater.format(currentData) + '-' + dateFormater.format(LastDayPreviousYear) + "</span>";
      }
    }
 
    var input = document.getElementById('desiredDate');
 
    input.valueAsDate = new Date()
    input.addEventListener('change', showResult);
    input.dispatchEvent(new Event('change'));
 
  </script>
  <br><br>
  <span class="tree">дерево - зелёный</span><br>
  <span class="fire">огонь - красный</span><br>
  <span class="earth">земля - жёлтый</span><br>
  <span class="metallic">металл - белый</span><br>
  <span class="water">вода - синий, <span style="color: hsl(0,0%,0%);">чёрный</span></span><br>
 </body>
</html>

вроде так, но цвет спанов не изменился...

Добавлено через 3 минуты
вставила строки 172-178...

@voraa · 15.02.2024, 17:20

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
      if (currentData >= nowDate) {
        document.getElementById('info').innerHTML = '<span class="' + class_0 + '">'
            + dateFormater.format(currentData) + 
            '-' + dateFormater.format(LastDayPreviousYear) + '</span>';
      } else {
        document.getElementById('info').innerHTML = '<span class="' + class_1 + '">'
            +  dateFormater.format(previouseDate) + 
            '-' + dateFormater.format(LastDayYear) + '</span><br>' +
            '<span class="' + class_0 + '">' + dateFormater.format(currentData) + 
            '-' + dateFormater.format(LastDayPreviousYear) + '</span>';
      }
    }

@бел ка · 15.02.2024, 20:38 **[ТС]**

да ну нафик, а сейчас что не так, и самое интересное, ошибок 0

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE HTML>
 <html lang="ru-RU">
 <head>
  <meta charset="UTF-8">
  <title>Chinese Zodiac</title>
  <style>
        
        #desiredDate {
            outline: none;
            background-color: hsl(120,100%,97%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,25%);
            border-radius: 15px/10px;
            font: bold 24px serif;
            padding: 5px 20px;
            margin-bottom: 20px;
            letter-spacing: 3px;
            font-family: "ITC Benguiat Std Medium Condensed";
            font-family: "ITC Benguiat Std Book Condensed";
            font-family: "OpticalBDB Normal";
            
        }
        #info {
            white-space: nowrap;
            background-color: hsl(120,100%,98%);
            color: hsl(120,100%,25%);
            border: 1px solid hsl(120,100%,30%);
            border-radius: 15px/10px;
            font: bold 16px serif;
            padding: 10px 20px;
        }
        
        span.tree {
        color: hsl(120,100%,30%);
        } /* дерево */
        span.fire {
        color: hsl(345,100%,50%);
        } /* огонь */
        span.earth {
        color: hsl(51, 100%, 50%);
        } /* земля*/
        span.metallic {
        color: hsl(0, 0%, 75%);
        } /* металл*/
        span.water {
        color: hsl(215,100%,50%);
        } /* вода */
    </style>
</head>
<body>
 
  <input type="date" id="desiredDate" min="1564-01-01" max="2299-12-31"/>
  <br/>
  <div id="info"></div>
 
  <script>
    document.getElementById('desiredDate').valueAsDate = new Date();
 
    var listClass = ["tree", "fire", "earth", "metallic", "water"];
    
    var dates = [
          { month: "01",
            day: [
              {"21":
                ["1890", "1966"] },
              {"22":
                ["1879", "1898", "1909", "1947", "2004", "2023", "2042"] },
              {"23":
                ["1917", "1928", "1974", "1993", "2012", "2031"] },
              {"24":
                ["1887", "1925", "1936", "1955", "2001", "2039"] },
              {"25":
                ["1868", "1906", "1944", "1963", "1982", "2020"] },
              {"26":
                ["1876", "1895", "1914", "1933", "2009", "2028"] },
              {"27":
                ["1865", "1941", "1952", "1971", "1990"] },
              {"28":
                ["1884", "1922", "1960", "1979", "1998", "2017", "2036"] },
              {"29":
                ["1873", "1903", "1949", "1987", "2006", "2025"] },
              {"30":
                ["1881", "1892", "1911", "1930", "1968", "2044"] },
              {"31": 
                ["1870", "1889", "1900", "1938", "1957", "1976", "1995", "2014", "2033"] },
                ]
            },
            { month: "02",
              day: [
              {"1":
                ["1919", "2003", "2022", "2041"] },
              {"2":
                ["1878", "1897", "1908", "1927", "1946", "1965", "1984"] },
              {"3":
                ["1916", "1954", "1973", "2011", "2030"] },
              {"4":
                ["1886", "1905", "1935", "1992", "2038"] },
              {"5":
                ["1867", "1924", "1943", "1962", "1981", "2000", "2019"] },
              {"6":
                ["1875", "1894", "1913", "1932", "1951", "1970", "1989", "2027"] },
              {"7":
                ["1978", "1997", "2008"] },
              {"8":
                ["1864", "1883", "1902", "1921", "1940", "1959", "2016", "2035"] },
              {"9":
                ["1872", "1891", "1967", "1986", "2005"] },
              {"10":
                ["1880", "1899", "1910", "1929", "1948", "1994", "2013", "2024", "2043"] },
              {"11":
                ["1869", "1918", "1937", "1975", "2032"] },
              {"12":
                ["1888", "1956", "2002", "2021", "2040"] },
              {"13":
                ["1877", "1896", "1907", "1926", "1945", "1964", "1983", "2029"] },
              {"14":
                ["1915", "1934", "1953", "2010"] },
              {"15":
                ["1866", "1885", "1942", "1961", "1972", "1991", "2037"] },
              {"16":
                ["1904", "1923", "1980", "1999", "2018"] },
              {"17":
                ["1874", "1893", "1931", "1950", "1969", "1988", "2026"] },
              {"18":
                ["1863", "1882", "1912", "1958", "1977", "2007"] },
              {"19":
                ["1871", "1901", "1939", "1996", "2015", "2034"] },
              {"20":
                ["1920", "1985"] },
                ]
            }
        ];
 
    function srch(arr, dat) {
      var p = dat.split('-')[0];
        var cnt = [-1, 1], h = -1;
          function run(a, z, b) {
            if (b.length === 9) return b;
              for (var i = 0; i < a.length; i++) {
                for (var j = 0; j < a[i].day.length; j++) {
                  for (var o in a[i].day[j]) {
                    for (var r = 0; r < a[i].day[j][o].length; r++) {
                      if (a[i].day[j][o][r] == z) {
                      b.push(o, a[i].month, z);
                      return run(a, String(+p + cnt[++h]), b);
                    }
                  }
                }
              }
            }
          }
        return run(arr, p, []);
      }
 
    function showResult(e) {  
      var result = srch(dates, this.value);
    
      var currentData = new Date(result[2], result[1]-1, result[0]);
      var previouseDate = new Date(result[5], result[4]-1, result[3]);
      var followingtDate = new Date(result[8], result[7]-1, result[6]);
 
      var LastDayYear = new Date(currentData);
      LastDayYear.setDate(LastDayYear.getDate() - 1);
      
      var LastDayPreviousYear = new Date(followingtDate);
      LastDayPreviousYear.setDate(LastDayPreviousYear.getDate() - 1);
      
    
      function format() {
        var date = new Date();
        var day = date.getDate();
        var month = date.getMonth() + 1;
        var year = date.getFullYear();
    
        if (month < 10) {
        month = '0' + month;
      }
    
    var formatteddate = day + '.' + month + '.' + year;
    
    var nowDate = new Date(this.value);
    
    var desiredYear = currentData.getFullYear();
    
    var listClassIndex = Math.floor((desiredYear - -0126) % 10 / 2 );
    var class_0 = listClass[listClassIndex];
    
    var listClassIndex_1 = Math.floor((desiredYear - -0125) % 10 / 2 );
    var class_1 = listClass[listClassIndex_1];
    
    if (currentData >= nowDate) {
    document.getElementById('info').innerHTML = '<span class="' + class_0 + '">' + formattedDate.format(currentData) + 
    '-' + formattedDate.format(LastDayPreviousYear) + "</span>";
    } else {
    document.getElementById('info').innerHTML = '<span class="' + class_1 + '">' +  formattedDate.format(previouseDate) + 
    '-' + formattedDate.format(LastDayYear) + "</span>" + "<br>" +
    '<span class="' + class_0 + '">' + formattedDate.format(currentData) + '-' + formattedDate.format(LastDayPreviousYear) + "</span>";
    }
    }
    
    var input = document.getElementById('desiredDate');
    
    input.valueAsDate = new Date()
    input.addEventListener('change', showResult);
    input.dispatchEvent(new Event('change'));
    }
  </script>
  <br><br>
  <span class="tree">дерево - зелёный</span><br>
  <span class="fire">огонь - красный</span><br>
  <span class="earth">земля - жёлтый</span><br>
  <span class="metallic">металл - белый</span><br>
  <span class="water">вода - синий, <span style="color: hsl(0,0%,0%);">чёрный</span></span><br>
 </body>
</html>

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

@voraa · 15.02.2024, 21:43

Я показывал, как форматировать даты.

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

в основном для телефонов, где-то 40 версии хрома и тому подобных...

Форматирование дат, которое я показывал, работает с 24-го Хрома.

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

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

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

@Usaga · 16.02.2024, 07:03

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

и самое интересное, ошибок 0

Учись пользоваться отладчиком. Ошибки бывают и логические, когда в консоли никаких жалоб, а просто код работает не так как ты ожидаешь. ОТЛАДЧИК.

@voraa · 16.02.2024, 07:42

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

а просто интересно понять почему не работает get методы...

Ткните меня носом, где там есть get методы?
И со скобками {} разберитесь.
Вы но нотепаде пишите? Любой нормальный редактор показывает парные скобки.

Новые блоги и статьи Все статьи Все блоги /
сукцессия 29. Переход от одних деревьев на другие делать более или менее вероятностным? anaschu 12.07.2026 Насколько смена типов микоризы — исключительное событие в двухвековой сукцессии? Оценка вероятности в пространстве параметров В текущей версии модели успешно реализован ключевой механизм. . .	сукцессия 27. Думаю, как переделывать уже написанную статью с планами на сукцессию. anaschu 12.07.2026 Анализ соответствия модели требованиям Реализованные компоненты: Механизм закисления почвы через протонную помпу Конкуренция между типами микориз pH как триггер сукцессии C/ P соотношение. . .	Сукцессия 26. Мат модель создана. anaschu 12.07.2026 Модель смены растительных сукцессий посредством управления грибами работает внутри небольшой ячейки почвы, восстанавливающейся после пожара, где ненадолго бывшее царство хвойных снова захватили. . .	Решил проблему с ошибкой пагинации сообщений с сервера на алгоритме обхода дерева "Эстафета хвоста". Hrethgir 12.07.2026 Проблема была в том, что удалялась именно новая кнопка, а не старая. Ни один ИИ не обнаружил это, а сам я смог только когда с работой стало попроще и когда заставил работать будущее автономное. . .
сукцессия 25. Хронология ошибок anaschu 12.07.2026 # От 50-тонного гриба до устойчивого леса: хроника ошибок при построении модели вековой сукцессии микоризы ## О чём эта статья В процессе построения ОДУ-модели (система дифференциальных. . .	сукцессия 24. Промежуточное общее описание модели anaschu 12.07.2026 Хендофф: модель АМ→ЭКМ сукцессии микоризы (ризосфера, 50 лет) Содержание проекта Симуляция вековой (50 лет) экологической сукцессии в почве леса Основные участники: АМ-гриб, ЭКМ-гриб,. . .	сукцессия 23. Более физиологичная физиология, более экологичная экология, более диффурные диффуры. anaschu 12.07.2026 Что реально нашли и починили за эти 5 часов Правило Линдемана (КПД конверсии сахара в тело, kEff) — раньше 100% полученного углерода шло прямо в биомассу гриба; теперь только kEff=0. 5 (после. . .	сукцессия 22. От артефактов к физиологии: калибровка агентной модели грибной сукцессии для воспроизведения сезонной динамики и pH-плато anaschu 11.07.2026 Аннотация В данной работе представлена калибровка агентной модели динамики грибных сообществ (fungal-succession), направленная на устранение нефизичных артефактов (коллапс биомассы, мгновенное. . .

@kidASM 425 / 314 / 115 Регистрация: 28.08.2013 Сообщений: 869
	08.02.2024, 15:40
	Цифры в таблицы совместимости указывают с какой версии данная функция поддерживается. В данном случае, toLocaleDateString() в Chrome Android полностью поддерживается с версии номер 25. 0

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

@voraa 1296 / 1282 / 190 Регистрация: 21.01.2024 Сообщений: 5,941
	12.02.2024, 23:40
	Не понятен вопрос. Вроде этим спанам и так классы присвоены. 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	13.02.2024, 11:08 [ТС]
	voraa, сорри, наверное надо было сформулировать вопрос по другому... надо ли создавать новую переменную desiredYear, или чем заменить это значение... 0

@voraa 1296 / 1282 / 190 Регистрация: 21.01.2024 Сообщений: 5,941
	13.02.2024, 11:20
	Я то откуда знаю, что должно быть в этой переменной. 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	13.02.2024, 15:37 [ТС]
	voraa, desiredYear = 2024 desiredYear_1 = 2023 годам которые нашли в массиве, ну или равны году даты введённой пользоваетелем, и году предыдущей даты... 0

@бел ка -11 / 6 / 0 Регистрация: 23.02.2023 Сообщений: 431
	14.02.2024, 22:42 [ТС]
	я совсем запуталась уже, откуда лучше взять значение года введённого пользователем, и значение предыдущего года? из инпут, или из массива, или из тех дат, что нашли в массиве и распарсили ? 0

@voraa 1296 / 1282 / 190 Регистрация: 21.01.2024 Сообщений: 5,941
	15.02.2024, 08:07
	Откуда угодно, лишь бы правильно было. Добавлено через 33 минуты Дата китайского нового года в текущем году в currentDate 0

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