如何为一周中的每一天显示新的照片和文字？

Question

我正在做一个小的 Javascript 项目来显示星期几。 我把那部分记下来了，但我还想要一张照片来代表一周中的每一天。 有没有办法在数组项中同时使用文本和照片？ 我已经搜索了一段时间，我能找到的唯一示例是获取随机照片应用程序，这不是我需要的。

我的一天追踪器项目

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

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

Answer 1

只需为照片创建一个新数组：

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

工作代码

Answer 2

您可以将数组更新为如下所示：

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;

要显示当天的图像，只需在 html 中创建一个 img

<img id="image">

然后您可以以类似的方式更新该图像的 src

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

希望这可以帮助！

Answer 3

更改您的数组结构以添加如下所示的图像属性。

  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>

免责声明：此处使用的所有图片均来自谷歌图片。

Answer 4

您可以使用Date.prototype.toLocaleString的weekday选项并将语言设置为undefined ，以主机默认语言获取日期名称，例如

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

正如其他人所说，可以使用包含 7 个图像引用（索引 0 到 6）的数组并根据getDay 中的天数设置图像来获取图像。

Answer 5

https://keywordimg.com/640x480/any将始终为任何关键字返回随机图像

var daysimages = 
[

{name: "Monday",    img: "https://keywordimg.com/640x480/monday"},
{name: "Tuesday",   img: "https://keywordimg.com/640x480/tuedy"},
{name: "Wednesday", img: "https://keywordimg.com/640x480/wednesday"},
{name: "Thursday",  img: "https://keywordimg.com/640x480/thursday"},
{name: "Friday",    img: "https://keywordimg.com/640x480/fiday"},
{name: "Saturday",  img: "https://keywordimg.com/640x480/saturday"},
{name: "Sunday",    img: "https://keywordimg.com/640x480/sunday"}

]


document.getElementById("demodays").innerHTML = daysimages[d.getDay()].name;

显示当天图像的代码：

<img id="daysimage">

编辑代码以显示日期：

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

Answer 6

https://keywordimage.com/是一项免费（通过捐赠）的在线服务，无需代码/托管即可完成此操作。

将https://keywordimage.com/image.php?q=Beanies中的“beanies”替换为您的关键字，您将获得来自 google 的第一个图像结果作为输出

如果您使用超过 50 个请求，请考虑捐赠http://buymeacoffee.com/keywordimage