changing image depending on the day

Question

I want to add a functionality to my site that changes the images shown depending on the day. I haven't been able to quite wrap my head around it as I'm a bit of a novice. My images are stored in images/week2/image_day_4. I am going to try to use a couple incrementing variables to access the image values, so if the day is day 4 in week 2 of membership the code should read something like

"images/week_" + week + "/image_day_" + day;

every day since membership started, i'll increment day.

Is there a better way to do this?

[http://www.w3schools.com/jsref/jsref_obj_date.asp](http://www.w3schools.com/jsref/jsref_obj_date.asp) might be a good place to start. It won't return the week of the month but rather the day of the week. — badAdviceGuy, Jan 22 '14 at 20:32
You should not use or link to [w3schools](http://www.w3fools.com). It's not a reliable source of information and we don't want to encourage its use. I recommend using the [Mozilla Developer Network](https://developer.mozilla.org/en-US/) instead. — John Conde, Jan 22 '14 at 20:33
I removed my original answer that involved PHP since you didn't tag it in your answer. Are you trying to solve it only with Javascript or considering more efficient ways that involve server side scripting? — dev7, Jan 22 '14 at 22:22

score 2 · Accepted Answer · answered Jan 22 '14 at 20:34

2

So if I understand that correctly, every day for some prolonged period of time of membership will display a different image. Why do you need week then? One solution would be to just keep track of total days and create a basic JS object of key value pairs. Keys could be the number of days, and value could be the url of the image. For example:

JS Usage:

var obj = {
    key1: value1,
    key2: value2
};

JS Example:

var membershipImages = {
    1: "images/day1.jpg",
    2: "images/thatThing.png"
};

Then after you calculate a user's day of membership, all you would need to do is pull out the url:

someObject.setSomeProperty(membershipImages.getProperty("1"));

answered Jan 22 '14 at 20:34

ElliotSchmelliot

7,322
4
41
64

This seems like the most useful option to me. Boss is just looking for some extra functionality and he was thinking of the month in a week/day context. I think he eventually wants to extend it to the first 6 months and thats why he wanted to use that format. If I create a JS object, are they limited in length? Could i hold 180 different images/coupons? Or would it be wise to break it down into months, and just have a switch case that puts you into the correct month? – Zak L Feb 04 '14 at 19:19
1

You can have a very, very big JS objects. I wouldn't worry about that too much in this situation. If you are really concerned about performance though, yes, you could break these objects up into months. – ElliotSchmelliot Feb 04 '14 at 21:31

score 1 · Answer 2 · edited May 23 '17 at 12:28

According to this documentation and this thread, you could use :

function getWeekNumber(d) {
    // Copy date so don't modify original
    d = new Date(+d);
    d.setHours(0, 0, 0);
    // Set to nearest Thursday: current date + 4 - current day number
    // Make Sunday's day number 7
    d.setDate(d.getDate() + 4 - (d.getDay() || 7));
    // Get first day of year
    var yearStart = new Date(d.getFullYear(), 0, 1);
    // Calculate full weeks to nearest Thursday
    var weekNo = Math.ceil((((d - yearStart) / 86400000) + 1) / 7)
    // Return array of year and week number
    return weekNo;
}

var path = "images/week_" + getWeekNumber(new Date()) + "/image_day_" + new Date().getDay();
alert(path);

JSFiddle

EDIT : The new Date() statement can be easily converted to use the membership starting date.

Well done! This looks like it could work. My boss has currently had me working on a different project, but when we slow down, he will return to this. — Zak L, Feb 04 '14 at 19:20

changing image depending on the day

2 Answers2