Showing message per day daily till the end of message using HTML and Javascript

Question

I have the following code to display a message daily,

<!doctype html>
<html>

<head>

<script type="text/javascript">

var msg = new Array();
Stamp = new Date();
today = Stamp.getDate();

msg[1] = "msg 1";
msg[2] = "msg 2";
msg[3] = "msg 3";
msg[4] = "msg 4";
msg[5] = "msg 5";
msg[6] = "msg 6";
msg[7] = "msg 7";
msg[8] = "msg 8";
msg[9] = "msg 9";
msg[10] = "msg 10";
msg[11] = "msg 11";
msg[12] = "msg 12";
msg[13] = "msg 13";
msg[14] = "msg 14";
msg[15] = "msg 15";
msg[16] = "msg 16";
msg[17] = "msg 17";
msg[18] = "msg 18";
msg[19] = "msg 19";
msg[20] = "msg 20";
msg[21] = "msg 21";
msg[22] = "msg 22";
msg[23] = "msg 23";
msg[24] = "msg 24";
msg[25] = "msg 25";
msg[26] = "msg 26";
msg[27] = "msg 27";
msg[28] = "msg 28";
msg[29] = "msg 29";
msg[30] = "msg 30";
msg[31] = "msg 31";
msg[32] = "msg 32";
msg[33] = "msg 33";
msg[34] = "msg 34";
.
.
.
.
msg[6000] = "end msg";


function writeMessage() { 
document.write(msg[today]);
}

</script>
</head>

<body>

<strong>Daily Message:</strong>  

<script>
writeMessage();
</script>

</body>

It displays message for all the days and then starts from first for the next month. What i want is to continue to display the next message, for example msg 32 should be displayed in the next month and so on till I come to the end message. Could you help me in modifying my code logic to achieve what I want?

JS array is zero-based, `msg` would be better starts with index 0. — Leo, Dec 01 '14 at 05:17

Robby Cornelissen · Accepted Answer · 2014-12-01T05:08:02.757

3

If it doesn't matter where you start in your array, you can do something like this:

var daysSinceEpoch = Math.floor(new Date().getTime() / (24 * 60 * 60 * 1000));
var index = daysSinceEpoch % msg.length;

document.write(msg[index]);

If you have a fixed start date, you can do:

var startDate = ... // initialize your startDate
var daysSinceStart = Math.floor((new Date().getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000));
var index = daysSinceStart % msg.length;

document.write(msg[index]);

edited Dec 01 '14 at 05:08

answered Dec 01 '14 at 05:01

Robby Cornelissen

91,784
22
134
156

1

It matters for me from where I start in my array. – Dec 01 '14 at 05:05
1

You have initialized the `startDate` variable as noted in the comment, right? – Robby Cornelissen Dec 01 '14 at 05:24
1

I don't have fix startDate. What I meant before was it matters for me where I start the message from i.e 0 and end to 6000. I tried your code without startDate but I get 'undefined' value while displaying the message. – Dec 01 '14 at 05:31
2

Are you sure that all your 6000 messages are defined? Also, if you want to start at 0, and end at 6000, you will need some date that corresponds to 0. That date can be the beginning of this year, the user's subscription date, whatever, but you'll need a date. – Robby Cornelissen Dec 01 '14 at 05:32
1

Yes all my messages are defined. – Dec 01 '14 at 05:35
2

Well, what value of `index` do you get? I get 4405 today. What's the message at `msg[4405]`? – Robby Cornelissen Dec 01 '14 at 05:41
1

I get the value of index as NAN – Dec 01 '14 at 05:53
2

You put my first code snippet in your `writeMessage()` method right? – Robby Cornelissen Dec 01 '14 at 05:56
1

No it was outside writeMessage(). I have included it in writeMessage() now and it is displaying the index value. I want to test it for other days. Can you help on this? – Dec 01 '14 at 05:59
2

To test for other days, you can just add/subtract a random number of days to/from `daysSinceEpoch` – Robby Cornelissen Dec 01 '14 at 06:01
1

And what if a day reaches the 6000 message. Will it reset to the msg 0 in next day? – Dec 01 '14 at 06:03
1

Yes indeed. Will start from 0 again. – Robby Cornelissen Dec 01 '14 at 06:04

score 1 · Answer 2 · answered Dec 01 '14 at 04:56

1

I think you should have a "START" date. and then calculate the days between "START" date and "today". then use the "days" you just calculated as the array index to display your message.

answered Dec 01 '14 at 04:56

Freedom

803
10
26

1

I don't have a fix Start Date. – Dec 01 '14 at 05:05
1

@Javed how about using localStorage to store the start date when your app first run? – Freedom Dec 01 '14 at 05:54

score 1 · Answer 3 · edited May 23 '17 at 10:09

Changed my answer around as per suggestions, I believe this version works. Taken from reference here

Used alert(today); to call the day value from popup to confirm it worked:

enter image description here

<!doctype html>
<html>

<head>

<script type="text/javascript">

var msg = new Array();
var now = new Date();
var start = new Date(now.getFullYear(), 0, 0);
var diff = now - start;
var oneDay = 1000 * 60 * 60 * 24;
var today = Math.floor(diff / oneDay);

msg[1] = "msg 1";
msg[2] = "msg 2";
msg[3] = "msg 3";
msg[4] = "msg 4";
msg[5] = "msg 5";
msg[6] = "msg 6";
msg[7] = "msg 7";
msg[8] = "msg 8";
msg[9] = "msg 9";
msg[10] = "msg 10";
msg[11] = "msg 11";
msg[12] = "msg 12";
msg[13] = "msg 13";
msg[14] = "msg 14";
msg[15] = "msg 15";
msg[16] = "msg 16";
msg[17] = "msg 17";
msg[18] = "msg 18";
msg[19] = "msg 19";
msg[20] = "msg 20";
msg[21] = "msg 21";
msg[22] = "msg 22";
msg[23] = "msg 23";
msg[24] = "msg 24";
msg[25] = "msg 25";
msg[26] = "msg 26";
msg[27] = "msg 27";
msg[28] = "msg 28";
msg[29] = "msg 29";
msg[30] = "msg 30";
msg[31] = "msg 31";
msg[32] = "msg 32";
msg[33] = "msg 33";
msg[34] = "msg 34";
.
.
.
.
msg[6000] = "end msg";


function writeMessage() { 
document.write(msg[today]);
}

</script>
</head>

<body>

<strong>Daily Message:</strong>  

<script>
writeMessage();
</script>

</body>

That will only use the 7 first messages. – Robby Cornelissen Dec 01 '14 at 05:06 — Robby Cornelissen, Dec 01 '14 at 05:06
Now it will only use the first 365 messages. – Robby Cornelissen Dec 01 '14 at 05:30 — Robby Cornelissen, Dec 01 '14 at 05:30

Jonny Henly · Answer 4 · 2014-12-01T05:12:26.170

1

Have a 2d Array for your messages where the first index is the month and the second index is the day.

var msg = new Array(12);
msg[0] = new Array(31); // January
msg[1] = new Array(28); // February

...

msg[0][0] = "January 1st's message";
msg[0][1] = "January 2nd's message";
...
msg[0][30] = "January 31st's message";
msg[1][0] = "February 1st's message";
...

month = stamp.getMonth();
today = Stamp.getDate() - 1;

function writeMessage() { 
    document.write(msg[month][today]);
}

edited Dec 01 '14 at 05:12

answered Dec 01 '14 at 05:04

Jonny Henly

4,023
4
26
43

2

My total number of messages is 6000+. Will 2d Array be sufficient for that? – Dec 01 '14 at 05:12
2

You will need a 3d array, first index being the year, second being the month and third being the day. – Jonny Henly Dec 01 '14 at 05:14
2

You will also need to know which years have leap years... However typing out 6000 messages into each index is not the way to approach this – Jonny Henly Dec 01 '14 at 05:18
1

I think 3d Array will become more complicated. Is there any other way? – Dec 01 '14 at 05:23
2

I believe Robby Cornelissen's answer is probably the best approach – Jonny Henly Dec 01 '14 at 05:24

Showing message per day daily till the end of message using HTML and Javascript

4 Answers4