Как к дате добавить "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 методы?
И со скобками {} разберитесь.
Вы но нотепаде пишите? Любой нормальный редактор показывает парные скобки.

Новые блоги и статьи Все статьи Все блоги /
Установка нескольких штампов электронной подписи в строго определенных местах файла docx ВладимирСамохин 19.07.2026 (В!) Работа с Электронной подписью - это неотъемлемая часть современного документооборота. Но что делать, если нужно поставить несколько штампов электронной подписи в строго определенных местах. . .	сукцессия 35. Научная статья о проделанной работе anaschu 19.07.2026 Написал в формате латекс и пдф	Вангую, что это не пройдёт модерацию, и на неделе я запущу свой сервер. Hrethgir 19.07.2026 Эта публикация сейчас в песочнице и ждёт приглашения. https:/ / habr. com/ ru/ sandbox/ 295048/ начало и оглавление - Как «пернатого» заставить осваивать новые горизонты опыта через масштабирование. . .	сукцессия 33. открытые вопросы от клауде anaschu 19.07.2026 "Что накопилось за эту часть А — тринадцать правок, из которых шесть пришли из ваших вопросов и каждая оказалась реальной ошибкой, а не калибровкой: односторонний симбиоз, отсутствующий листопад,. . .
32 сукцессия anaschu 19.07.2026 сукцессия 28‑мерное ядро стабилизировано Коллеги, фиксирую разбор инженерных правок и их изоморфную проекцию на экономику, меметику и половой отбор. Модель теперь не «подкручивает» сходимость —. . .	сукцессия 31: модель микоризы - это модель ещё нескольких явлений, социальных и экономических anaschu 18.07.2026 Теория «Всего»: апдейт v1. 1. 2 — 28‑мерное ядро стабилизировано Коллеги, фиксирую разбор инженерных правок и их изоморфную проекцию на экономику, меметику и половой отбор. Модель теперь не. . .	сукцессия 30. Массив проверяющих друг друга моделей anaschu 18.07.2026 Архитектура сети взаимопроверяющих моделей микоризной сукцессии (v2. 0) Развитие тензорного ОДУ-ядра и создание кросс-платформенного калибровочного полигона Уважаемые коллеги! В продолжение. . .	Грибы - это женщины, деревья - это мужчины. Анти инь янь для союза мужчины и женщины. anaschu 18.07.2026 ГЛАВНЫЙ НАУЧНО-ФИЛОСОФСКИЙ ВЫВОД: Сексуально-Репродуктивный Капитализм против Государства Моногамии Коллеги, мы вышли на финишную прямую 20-мерного ОДУ-моделирования вековой сукцессии (ветка. . .

@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 / 1283 / 190 Регистрация: 21.01.2024 Сообщений: 5,949
	12.02.2024, 23:40
	Не понятен вопрос. Вроде этим спанам и так классы присвоены. 0

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

@voraa 1296 / 1283 / 190 Регистрация: 21.01.2024 Сообщений: 5,949
	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 / 1283 / 190 Регистрация: 21.01.2024 Сообщений: 5,949
	15.02.2024, 08:07
	Откуда угодно, лишь бы правильно было. Добавлено через 33 минуты Дата китайского нового года в текущем году в currentDate 0

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