show a given number every day of the week, then get back to day 1 in JS

user_19745244 0
Viewed 33

I need to make a given number in a div, the numbers are different for every day of the week, but at the end of the last day of the week, the number should be the one from the first day. I tried to make this script, but I only can show the day 1 number, day 2, 4 etc. doesn't change at all, what am I doing wrong?

Btw I have a few divs, and the numbers must be different for each div, so I use Content.makeNumber = function (day1, day2, day3, day4, day5, day6, day7 for it. And the number should be up even after reload, so I take date from localStorage

const Content = {};

Content.makeNumber = function (day1, day2, day3, day4, day5, day6, day7) {
    let date = localStorage.getItem("date");
    const week = 60*60*24*7;
    if (date === null) {
        const now = Date.now();
        localStorage.setItem('date', 'now');
        localStorage.setItem('dateWeekEnd', 'now' + 'week');
        return day1;
    } else {

    }
    date = Number(localStorage.getItem('date'));
    const dateNow = Number(localStorage.getItem('dateWeekEnd'));
    const dateCount = (dateNow - date) / week;
    let res
    switch (dateCount) {
        case 1:
            res = day1;
            break;
        case 2:
            res = day2;
            break;
        case 3:
            res = day3;
            break;
        case 4:
            res = day4;
            break;
        case 5:
            res = day5;
            break;
        case 6:
            res = day6;
            break;
        case 7:
            res = day7;
            break;
        default:
            res = day1;
            break;
    }
    return res;
};

export default Content;
vue.js html javascript
2 Answers

JavaScript's date has a getDay function that returns a number from 1 to 7, you could use that.

Alternatively, the modulo (%) will also work for you

switch (dateCount % 7 + 1) {
...
}

might work for you

for(let i = 0; i <= 32; i ++){
  console.log(i, " becomes: ", i % 7 + 1)
}

user_1975460

You're calling Date.now() only if the "date" variable from local storage is set. When you do this, you set "dateWeekEnd" in localstorage and don't update it again. This causes it to not change.

I think what you want is to replace

const dateNow = Number(localStorage.getItem('dateWeekEnd'));

with

const dateNow = Date.now()

so that it's updated based off the current date.

We also want to change the math on DateCount a bit. It should be

const dateCount = Math.floor(((dateNow - date) / week)*7)%7;

because (dateNow-date) gives us how many milliseconds have passed since date, dividing by week tells us what portion of a week has passed. Multiply by 7 to get the day. Floor it to get an integer instead of a decimal. Take it modulo 7 so it loops back to 0 if it reaches 7. Then dateCount is an integer from 0-6. To keep your current switch statement, add 1 to make it 1-7.

However, I'd recommend using an array to store the day words, and using dateCount as an index of that array to avoid the long switch statements. Altogether this gives us

const Content = {};

Content.makeNumber = function (dateWords) {
    let date = localStorage.getItem("date");
    const week = 60*60*24*7;
    if (date === null) {
        const now = Date.now();
        localStorage.setItem('date', 'now');
        localStorage.setItem('dateWeekEnd', 'now' + 'week');
    }
    date = Number(localStorage.getItem('date'));
    const dateNow = Date.now();
    const dateCount = Math.floor(((dateNow - date) / week)*7)%7;
    let res = dateWords[dateCount]
    return res;
};

export default Content;

where dateWords is an array containing [day1, day2, ... day7]

To clean it further, consider how replacing the week variable with a day variable would change the math, and whether you need to set the dateWeekEnd in localstorage.

user_197453300
Related