Question 188592 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Time-based rotation script

I have a script which retrieves the next value of the constant "rotation" every 30 minutes starting from a specific starting value and time.

The script displays only the current value and the following three upcoming values.

Here is the script and the corresponding JSFiddle:

if ($('[id^=test]').length) {

    function addHours(date, hours) {
        var copy = new Date(date);
        copy.setTime(copy.getTime() + (hours * 30 * 30 * 1000));
        return copy;
    }

    function next(value) {
        return {
            index: (value.index + 1) % rotation.length,
            date: addHours(value.date, 2),
        };
    }

    const known = { id: 193210, ts: "2023-06-14T07:30:00Z" };
    const rotation = [
        { id: 193210, name: "Pfliep " },
        { id: 186827, name: "Magmaton" },
        { id: 193251, name: "Schroffi" },
        { id: 193227, name: "Ronsak der Dezimierer" },
        { id: 193240, name: "Flussläufer Tamopo" },
        { id: 193132, name: "Amethyzar der Glitzernde" },
        { id: 193234, name: "Eldoren der Wiedergeborene" },
        { id: 193149, name: "Skag der Werfer" },
        { id: 193173, name: "Mikrin der tobenden Winde" },
    ];

const now33 = new Date();
const now2 = addHours(now33, + 6);
const now3 = addHours(now33, - 2);
const end = addHours(now33, rotation.length * 2);

    var cur = {
        index: rotation.findIndex(li => li.id == known.id),
        date: Date.parse(known.ts),
    };

while (cur.date < now3)

    cur = next(cur);

    const out = document.getElementById("test");

    while (cur.date < end && cur.date < now2 && cur.date > now3) {

        const li = document.createElement("li");
        li.className = 'test';

        var link = document.createElement('a');
        link.textContent = `${rotation[cur.index].name}`;
        link.href = 'dadada';
        link.class = 'dadada';

        li.innerText = `${rotation[cur.index].name} (${cur.date.toLocaleString()})`;

        var id = `${rotation[cur.index].id}`;
        var title2 = `${rotation[cur.index].name}`;
        var link = "https://de.wowhead.com/npc=";
        var ClassName = "weeklytext";
        var ClassName2 = "weeklytext2";
        var ClassName3 = "peinigertime";
    
        var options = { hour: 'numeric', minute: 'numeric' };
        var date33 = `${ cur.date.toLocaleString('en-GB', options)}`;


        $("<li class="" + ClassName2 + ""><div class="" + ClassName3 + ""> " + date33 + "</div> <a class="" + ClassName  +"" href="" + link + + id +"">" + title2  +"</a></li>").appendTo(out);
        cur = next(cur);

    }
}

Now I want to add an exception. When the script reaches the value with the id "193234" the next value should appear after one hour, instead of the 30 minutes.

Something like:

if (next(cur)["index"] == "7") {
    function addHours(date, hours) {
        var copy = new Date(date);
        copy.setTime(copy.getTime() + (hours * 60 * 60 * 1000));
        return copy;
    }
}

However, I am not sure how to implement it correctly. Any suggestions?

Tags:

2

Answers


  1. 0

    Pass the index of the rotation to addHours() instead of the hours, and set 30 or 60 min depending on the index.
    The following sample code sets 60 min if the index is 6 (for the id "193234"), otherwise 30 min.

    function addHours(date, index) {
    var min = 30;
    if (index == 6) {
        min = 60;
    }
    var delay = min * 60 * 1000;
    var copy = new Date(date);
    copy.setTime(copy.getTime() + delay);
    return copy;
}

function next(value) {
    return {
        index: (value.index + 1) % rotation.length,
        date: addHours(value.date, value.index),
    };
}
    Login or Signup to reply.
  2. 0

    Like this? The time is hardcoded so that Eldoren is the first

        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <title>Document</title>
      </head>
      <script>
        $(function () {
          if ($("[id^=test]").length) {
            function addHours(date, hours) {
              var copy = new Date(date);
              copy.setTime(copy.getTime() + hours * 30 * 30 * 1000);
              return copy;
            }
    
            function addMinutes(date, minutes) {
              return new Date(date.getTime() + minutes * 60000);
            }
    
            function next(value) {
              return {
                index: (value.index + 1) % rotation.length,
                date: addHours(value.date, 2),
              };
            }
    
            const known = { id: 193210, ts: "2023-06-14T07:30:00Z" };
            const rotation = [
              { id: 193210, name: "Pfliep " },
              { id: 186827, name: "Magmaton" },
              { id: 193251, name: "Schroffi" },
              { id: 193227, name: "Ronsak der Dezimierer" },
              { id: 193240, name: "Flussläufer Tamopo" },
              { id: 193132, name: "Amethyzar der Glitzernde" },
              { id: 193234, name: "Eldoren der Wiedergeborene" },
              { id: 193149, name: "Skag der Werfer" },
              { id: 193173, name: "Mikrin der tobenden Winde" },
            ];
    
            const now33 = new Date("2023-06-17 07:30:01"); // just to Eldoren be the first, change back to new Date();
            const now2 = addHours(now33, +6);
            const now3 = addHours(now33, -2);
            const end = addHours(now33, rotation.length * 2);
    
            var cur = {
              index: rotation.findIndex((li) => li.id == known.id),
              date: Date.parse(known.ts),
            };
    
            while (cur.date < now3) {
              cur = next(cur);
            }
    
            const out = document.getElementById("test");
    
            let increaseMinutes = 0;
    
            while (cur.date < end && cur.date < now2 && cur.date > now3) {
              const li = document.createElement("li");
              li.className = "test";
    
              var link = document.createElement("a");
              link.textContent = `${rotation[cur.index].name}`;
              link.href = "dadada";
              link.class = "dadada";
    
              li.innerText = `${rotation[cur.index].name} (${cur.date.toLocaleString()})`;
    
              var id = `${rotation[cur.index].id}`;
              var title2 = `${rotation[cur.index].name}`;
              var link = "https://de.wowhead.com/npc=";
              var ClassName = "weeklytext";
              var ClassName2 = "weeklytext2";
              var ClassName3 = "peinigertime";
    
              var options = { hour: "numeric", minute: "numeric" };
    
              var date33 = `${addMinutes(cur.date, increaseMinutes).toLocaleString("en-GB", options)}`;
    
              if (id == 193234) {
                increaseMinutes = 30;
              } else if (increaseMinutes > 0) {
                increaseMinutes += 30;
              }
    
              $(
                '<li class="' +
                  ClassName2 +
                  '"><div class="' +
                  ClassName3 +
                  '"> ' +
                  date33 +
                  '</div> <a class="' +
                  ClassName +
                  '" href="' +
                  link +
                  +id +
                  '">' +
                  title2 +
                  "</a></li>"
              ).appendTo(out);
              cur = next(cur);
            }
          }
        });
      </script>
    
      <body>
        <div id="test"></div>
      </body>
    </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search