如何每天使用javascript更改文本内容? [英] How can I change text content every day with javascript?

问题描述

我正在制作一种脚本，以每天显示具有不同图像和标题的不同内容.我已经有图像循环可以每天显示不同的图片，但是我需要帮助来对标题进行相同的操作.

I am making sort of a script to show different content everyday with a different image and title. I already got the image loop to show every day a different picture but I need help to do the same with the title.

这是为了使折扣交易的动态页面每天都不同，但是一周后会重复一次，所以我只需要显示7张图片和7个标题即可.

It is for making like a dynamic page of a discount deals which is different every day but repeats itself after one week so I only need to have 7 pictures and 7 titles to show.

这是我每天仅循环图像的代码.

Here is my code for only the loop of the images every day.

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中显示它的方式

and this is how i want to display it in 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来完成，感谢您在阅读本文时为您提供的帮助.

I know it can be done with javascript, thanks for trying to help if you are reading this.

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>

推荐答案

去这里！

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

首先获取日期

var d = new Date();

然后得到一天

var n = d.getDay();

然后，您可以创建一个包含标题的数组.不需要低于以上

Then you can make an array with your titles. Doesn't need to be below the above

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

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

And then just change the title by replacing the content in the div with id title

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

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

It's 'n-1' because arrays start at 0

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

You can actually get away with using 1 less variable. https://jsfiddle.net/bja94uLz/2/

这篇关于如何每天使用javascript更改文本内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！