Javascript - как отображать новые фотографии и текст для каждого дня недели - PullRequest
Новая
       6

Javascript - как отображать новые фотографии и текст для каждого дня недели

0 голосов
/ 12 ноября 2018

Я работаю над небольшим проектом Javascript, чтобы отобразить день недели.У меня есть эта часть, но я также хотел бы иметь фотографию, чтобы также представлять каждый день недели.Есть ли способ использовать текст и фотографию вместе в элементе массива?Я долго искал, и единственные примеры, которые я могу найти, - это получить случайное фото приложение, которое мне не нужно.

My Day Tracker Project 

var d = new Date();
var days = ["Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"];

document.getElementById("demo").innerHTML = days[d.getDay()];

Ответы [ 4 ]

0 голосов
/ 13 ноября 2018

Вы можете получить название дня на языке хоста по умолчанию, используя параметр weekday , равный Date.prototype.toLocaleString и установив язык на undefined , например 

console.log(new Date().toLocaleString(undefined, {weekday:'long'}));

Как уже говорили другие, получение изображения может быть выполнено с массивом из 7 ссылок на изображения (индексы от 0 до 6) и настройкой изображения на основе номера дня от getDay .

0 голосов
/ 12 ноября 2018

Вы можете обновить ваш массив, чтобы он выглядел так: 

var days = 
[

{name: "Monday",    img: "https://image.ibb.co/caPP3V/all.jpg"},
{name: "Tuesday",   img: "https://image.ibb.co/btn2OV/dontgrowup.jpg"},
{name: "Wednesday", img: "https://image.ibb.co/kQoHOV/everything-Sux.jpg"},
{name: "Thursday",  img: "https://image.ibb.co/c2UP3V/enjoy.jpg"},
{name: "Friday",    img: "https://image.ibb.co/ifbFAA/college.jpg.jpg"},
{name: "Saturday",  img: "https://image.ibb.co/fe7Yxq/hyper.jpg"},
{name: "Sunday",    img: "https://image.ibb.co/dKtj3V/cooltobeyou.jpg"}

]

Затем, чтобы показать день недели, вам нужно будет добавить .name в конце 

document.getElementById("demo").innerHTML = days[d.getDay()].name;

Чтобы показать изображение на этот день, просто создайте img в html 

<img id="image">

И затем вы можете обновить src этого изображения аналогичным образом 

document.getElementById("image").src= days[d.getDay()].img;

Надеюсь, это поможет!

0 голосов
/ 12 ноября 2018

Измените структуру массива, добавив свойства изображения, как показано ниже. 

  var days = [
     {
       day: "day name",
       image: "image path"
     }
  ];

Рабочий раствор 

    var d = new Date();
    var days = [
      {
        day: "Sunday",
        image:
          "http://wearesunday.com/wp-content/uploads/2015/01/sunday-logo.png"
      },
      {
        day: "Monday",
        image:
          "https://www.monday.vc/assets/share-mondayvc-259d07fc0eb8e761596a059e81111291e487be9fa24579cb49411c22190b3a97.png"
      },
      {
        day: "Tuesday",
        image:
          "https://goodlucksymbols.com/wp-content/uploads/2016/10/Tuesday-Symbolism.jpg"
      },
      {
        day: "Wednesday",
        image:
          "https://www.thefactsite.com/wp-content/uploads/2017/07/wednesday-facts.jpg"
      },
      {
        day: "Thursday",
        image:
          "https://www.thefactsite.com/wp-content/uploads/2017/07/wednesday-facts.jpg"
      },
      {
        day: "Friday",
        image:
          "https://ihcapetown.com/wp-content/uploads/2018/02/friday-vintage-floral-lettering_23-2147659455.jpg"
      },
      {
        day: "Saturday",
        image:
          "https://cdn.pixabay.com/photo/2015/04/04/19/29/saturday-706914_960_720.jpg"
      }
    ];

    document.getElementById("demo").innerHTML = days[d.getDay()].day;
    document.getElementById("container").style.background =
      "url('" + days[d.getDay()].image + "') no-repeat center";
      html,
      body {
        margin: 0;
        padding: 0;
      }

      p {
        color: red;
        font-size: 25px;
        text-align: center;
        padding: 10px;
        background: #fff;
      }

      .container {
        width: 100vw;
        height: 100vh;
      }
<div class="container" id="container"><p id="demo"></p></div>

Отказ от ответственности: Все изображения, использованные здесь, взяты из изображений Google.

0 голосов
/ 12 ноября 2018

Просто создайте новый массив для фотографий: 

var photos = [
  'https://placeimg.com/640/480/animals',
  'https://placeimg.com/640/480/arch',
  'https://placeimg.com/640/480/nature',
  'https://placeimg.com/640/480/people',
  'https://placeimg.com/640/480/tech',
  'https://placeimg.com/640/480/any',
  'https://placeimg.com/640/480/any'
];

Добавьте пустой тег изображения: 

<img id="image">

Настройте атрибут src: 

document.getElementById("image").src = photos[d.getDay()];

рабочий код

...