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

Новые блоги и статьи Все статьи Все блоги /
Установка статуса документа по условию Maks 05.07.2026 Алгоритм из решения ниже реализован на нетиповом документе "НарядПутевка" разработанного в КА2. Задача: в табличной части "Материалы" документа при записи автоматически устанавливать статус. . .	Сезонность и суточность закисления почв anaschu 04.07.2026 200 часов это все равно моловато. Есть ситуации, но нестандартные, когда смена происходит за 5 лет. Но обычно это 50 лет и более. Наверное, закисление почвы происходит сезонно в средней. . .	В чем ценность человеческого опыта в глобальном смысле? kumehtar 03.07.2026 Возможно, ценность человека не в том, что он однажды достигает мудрости, а в том, что он становится носителем карты пути. Он знает не только истину, но и последовательность внутренних изменений,. . .	интеграция AnyLogic с самописным REST API и переход на Odoo anaschu 03.07.2026 Успешная интеграция AnyLogic с самописным REST API и переход на промышленную Odoo WMS Сегодня проделал огромный путь от простой симуляции физических процессов до построения полноценной. . .
Поиск всех путей на ориентированном графе. Linux dcc0 02.07.2026 Переработка старого кода из моей статьи. Через несколько переработок от PHP кода к C89 (надеюсь, 89). Но довольно запутанно получилось. Код для Linux. Но если убрать time и то, что с ним. . .	Сам себя обучал rest api anaschu 02.07.2026 Педагогический лайфхак: Почему чистый REST API для ученика намного круче, чем готовые библиотеки Когда мы отказались от капризного JAR-файла AnyLogic и переписали код на стандартный HttpClient,. . .	rest api anylogic - выполнение модели на своём русском сайте anaschu 02.07.2026 Как подружиться с AnyLogic Cloud API, победить провайдеров и развернуться Java-бэкенд в Docker на бесплатном хостинге: Двухдневный лог борьбы Всем привет! Хочу поделиться свежим (и довольно. . .	Где деньги лежат kumehtar 02.07.2026 Это - японская подводная лодка I-52 (тип C2, кодовое имя Momi) вышла из Японии в марте 1944 года с миссией в оккупированную немцами Францию (Лорьян). Это была одна из «Янаги»-миссий по обмену. . .

@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,935
	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,935
	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,935
	15.02.2024, 08:07
	Откуда угодно, лишь бы правильно было. Добавлено через 33 минуты Дата китайского нового года в текущем году в currentDate 0

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