如何每天使用javascript更改文本內容？

Question

我正在製作一種腳本，每天用不同的圖像和標題顯示不同的內容。我已經有了圖像循環來顯示每天不同的圖片，但我需要幫助才能對標題做同樣的處理。

它是爲了製作像每天不同的折扣優惠的動態頁面，但一週後重復，因此我只需要顯示7張圖片和7個標題。

這裏是我的代碼，每天只有圖像的循環。

var dailyPhotos; 
var today, img; 
    dailyPhotos = function() { 
    today = new Date(); 
    weekday = today.getDay(); 
    showImages = [ ]; 
    myPhotos = [ "{{root}}assets/img/sunday.jpg", "{{root}}assets/img/monday.jpg", "{{root}}assets/img/tuesday.jpg", "{{root}}assets/img/wednesday.jpg", "{{root}}assets/img/thirsday.png", "{{root}}assets/img/friday.jpg", "{{root}}assets/img/saterday.jpg" ]; // You must specify the path or file name of your images that will be loaded in a weekday basis. 
     if (document.images) { 
     for (var x = 0; x < myPhotos.length; x++) { 
     showImages[ x ] = new Image(); 
     showImages[ x ].src = myPhotos[ x ]; 
     } img = ((document.getElementById) ? document.getElementById("yourImageId") : document.images.yourImageId); // Specify the id of the image that will get raplaced daily. 
      img.src = showImages[ weekday ].src; 
      img.alt = myPhotos[ weekday ]; 
    } return false; // If the browser can't display images, then EXIT FUNCTION. 
    }; 
window.onload = dailyPhotos; 

，這是我多麼希望在HTML

<div class="row"> 
     <div class="column large-6 medium-6 small-12"> 
      <h4> THIS IS WHERE I WANT THE TITLE TO BE DISPLAYED </h4> 
      <p> IF I CAN DISPLAY P TEKST WITH IT I WOULD HAVE IT IN HERE </p> 
      <a href="More details medium-6 small-12"></a> 
     </div> 
     <div class="column large-6"><img id="yourImageId" src="tuesdayPhoto.jpg" alt="DEMO" /> THIS IS WHERE THE IMAGE IS DISPLAYED </div> 
    </div> 

，以顯示它，我知道它可以用JavaScript來完成，感謝試圖幫助，如果你正在讀這一點。

var dailyPhotos; 
 
var today, img; 
 
    dailyPhotos = function() { 
 
    today = new Date(); 
 
    weekday = today.getDay(); 
 
    showImages = [ ]; 
 
    myPhotos = [ "{{root}}assets/img/sunday.jpg", "{{root}}assets/img/monday.jpg", "{{root}}assets/img/tuesday.jpg", "{{root}}assets/img/wednesday.jpg", "http://s.cdpn.io/37045/wedding-1.jpg", "{{root}}assets/img/friday.jpg", "{{root}}assets/img/saterday.jpg" ]; // You must specify the path or file name of your images that will be loaded in a weekday basis. 
 
     if (document.images) { 
 
     for (var x = 0; x < myPhotos.length; x++) { 
 
     showImages[ x ] = new Image(); 
 
     showImages[ x ].src = myPhotos[ x ]; 
 
     } img = ((document.getElementById) ? document.getElementById("yourImageId") : document.images.yourImageId); // Specify the id of the image that will get raplaced daily. 
 
      img.src = showImages[ weekday ].src; 
 
      img.alt = myPhotos[ weekday ]; 
 
    } return false; // If the browser can't display images, then EXIT FUNCTION. 
 
    }; 
 
window.onload = dailyPhotos;

<div class="row"> <div class="column large-6 medium-6 small-12"> <h4> THIS IS WHERE I WANT THE TITLE TO BE DISPLAYED </h4> <p> IF I CAN DISPLAY P TEKST WITH IT I WOULD HAVE IT IN HERE </p> <a href="More details medium-6 small-12"></a> </div> <div class="column large-6"> <img id="yourImageId" src="tuesdayPhoto.jpg" alt="DEMO" /> THIS IS WHERE THE IMAGE IS DISPLAhttp://stackoverflow.com/posts/43251456/edit#YED </div> </div>

Answer 1

在這裏你去！

https://jsfiddle.net/bja94uLz/1/

首先獲得日期

var d = new Date(); 

然後得到一天

var n = d.getDay(); 

然後你就可以與你的標題的數組。並不需要低於上述

var titles = ['title 1', 'title 2', 'title 3', 'title 4', 'title 5', 'title 6', 'title 7']; 

然後只需用ID標題替換div的內容更改標題

document.getElementById("title").innerHTML = titles[n-1]; 

它的「N-1」，因爲數組從0開始

你實際上可以避開使用1個較少的變量。 https://jsfiddle.net/bja94uLz/2/

Answer 2

試試這個

text = ((document.getElementById) ? document.getElementById("text"): document.images.yourImageId); 
text.innerHTML = myText[weekday]; 

---

<div id="text"></div> 

的jsfiddle：https://jsfiddle.net/durga598/LcxLy421/