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

它＆＃39; n-1＆＃39;因为数组从0开始

你实际上可以使用少一个变量。 https://jsfiddle.net/bja94uLz/2/

Answer 2

试试这个

contains($checkboxes_input, 'Four')

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

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

如何使用javascript每天更改文字内容？

2 个答案: