JavaScriptを使用してテキストコンテンツを毎日変更するにはどうすればよいですか？

Question

私は、異なるイメージとタイトルで毎日異なるコンテンツを表示するスクリプトの並べ替えを作っています。私はすでにイメージループを毎日別の写真を表示するようにしていますが、私はそのタイトルで同じことをするのに助けが必要です。

毎日違う値引きのダイナミックなページのようにしていますが、1週間後にそれ自身を繰り返すので、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; 

が、これは私が、私はそれはあなたがこれを読んでいる場合は支援しようとするために、JavaScriptで感謝を行うことができます知っている

<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> 

HTML

でそれを表示する方法です。ここに行く

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 n = d.getDay(); 

を取得し、日付

var d = new Date(); 

を取得します。上記

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

下にする必要があり、その後、ちょうどそれが「N-1」の配列は0から始まりますので、

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

IDのタイトルとのdivにコンテンツを交換することにより、タイトルを変更しません

変数を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/