从现在开始动态显示日期2天

Question

I'm trying to set up the Date +2 days from now a few times on my page.

So here is the code that I'm using:

<span class="spanDate"></span><br> at 8pm EST</div>

var dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'];

var months = ['January','February','March','April','May','June','July', 'August','September','October','November','December'];

var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*48));

document.getElementsByClassName("spanDate").innerHTML = dayName[tomorrow.getDay()] + ", " + months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
</script>`

Questions:

1. why doesn't it work for me?

2. should I use document.getElementsByID instead? (I want to use the span multiple times on the page)

Thanks for your help!!

Answer 1

Use this:

var dayName = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday','Saturday'];
var months = ['January','February','March','April','May','June','July', 'August','September','October','November','December'];

var tomorrow = new Date();
tomorrow.setTime(tomorrow.getTime() + (1000*3600*48));
var dt = dayName[tomorrow.getDay()] + ", " + months[tomorrow.getMonth()] + " " + tomorrow.getDate()+ ", " + tomorrow.getFullYear();
//add [0]
document.getElementsByClassName('spanDate')[0].innerHTML = dt;

because this:

document.getElementsByClassName("spanDate").innerHTML

returns a nodeList not an element.

EDIT:

If you have 5 span elements in your document where you want to show this date you can do it the classic way:

document.getElementsByClassName('spanDate')[0].innerHTML = dt;
document.getElementsByClassName('spanDate')[1].innerHTML = dt;
document.getElementsByClassName('spanDate')[2].innerHTML = dt;
document.getElementsByClassName('spanDate')[3].innerHTML = dt;
document.getElementsByClassName('spanDate')[4].innerHTML = dt;

or use a loop of any kind that will iterate through the nodes like this example:

var e = document.getElementsByClassName('spanDate');
for(i=0; i < e.length; i++) {
    e[i].innerHTML = dt;
}

Cheers!

Answer 2

If you were to use Moment.js, you could "simplify" your code as follows:

var el = document.getElementsByClassName("spanDate")[0],
    tomorrow = moment().add(2, "d");

el.innerHTML = tomorrow.format("DD, MM, YYYY");

You'll notice that I added [0] after the getElementsByClassName("spanDate") , that's because the method getElementsByClassName returns an HTML collection ( array-like structure ). Once you have that collection, you need to extract the element that you want to modify ( in this case the first one we found [0] ).

Answer 3

要回答第二个问题：最好不要在同一页面中多次使用相同的id 。