javascript - 如何使用 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'];

然后通过将div中的内容替换为id title来更改标题

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

它是 'n-1' 因为数组从 0 开始

您实际上可以少用 1 个变量。 https://jsfiddle.net/bja94uLz/2/