Question

到目前为止，我的代码正在运行，但仅适用于白天的照片。我忘了为用户的位置输入夜间照片。因此，当它说晚上好，天气条件清晰的天空，那么背景应该变成晴朗的天空和夜晚的照片，而不是像我一样的阳光照片。如何根据位置和一天中的时间将我的背景更改为用户的天气？这是我的codepen的链接，只是你希望看到它在行动。 https://codepen.io/Brown95/pen/MvvBLK

var weatherImage = "";

  var imagePhoto = {

    thunder: "https://s-media-cache-ak0.pinimg.com/originals/2e/43/73/2e4373184057ab029b5ca15aca484b09.jpg",
    rainy: "https://i.ytimg.com/vi/q76bMs-NwRk/maxresdefault.jpg",
    cloudy: "https://static1.squarespace.com/static/57523357c2ea515ccf6c1adb/58dcea75bebafb06e997da9c/58dcece61e5b6cf38585d46b/1490873606398/mostly+cloudy.jpg",
    snow: "https://static.bhphotovideo.com/explora/sites/default/files/Correct.jpg",
    clear: "https://mota.ru/upload/wallpapers/2010/05/14/08/01/22099/mota_ru_0051405-2560x1600.jpg",
    drizzle: "https://s-media-cache-ak0.pinimg.com/736x/e4/43/f5/e443f59b4f03dd487d090a279c2f08ab--rain-drops-water-drops.jpg",
    haze: "https://ak3.picdn.net/shutterstock/videos/3578564/thumb/1.jpg",
    tornado: "https://i.ytimg.com/vi/5QnsRXUbsK4/maxresdefault.jpg",
    cold: "https://static.pexels.com/photos/374/snow-dawn-sunset-winter.jpg",
    windy: "https://ak9.picdn.net/shutterstock/videos/4337360/thumb/1.jpg",
    hail: "https://s-media-cache-ak0.pinimg.com/236x/7c/60/3d/7c603d9183ff32c92330780a2ebdcfca--rainy-weather-rainy-days.jpg",
    sunny: "https://i.ytimg.com/vi/rG9fev-m0ag/maxresdefault.jpg"
};


function selectImage (id){

    if (id >= 200 && id <= 232){
        weatherImage = imagePhoto.thunder;
    }else if(id >= 300 && id <= 321){
        weatherImage = imagePhoto.drizzle;
    }else if (id >= 500 && id <= 531){
        weatherImage = imagePhoto.rainy;
    }else if (id >= 600 && id <= 622){
        weatherImage = imagePhoto.snow;
    }else if (id >= 701 && id <= 721 ){
        weatherImage = imagePhoto.haze;
    }else if (id === 800){
        weatherImage = imagePhoto.clear;
    }else if (id >= 801 && id <= 804){
        weatherImage = imagePhoto.cloudy;
    }else if (id >= 900 && id <= 902){
        weatherImage = imagePhoto.tornado;
    }else if (id === 903){
        weatherImage = imagePhoto.cold;
    }else if (id === 904){
        weatherImage = imagePhoto.sunny;
    }else if (id === 905){
        weatherImage = imagePhoto.windy;
    }else if (id === 906){
        weatherImage = imagePhoto.hail;
    }else{
        weatherImage = imagePhoto.windy;
    }

    $('body').css('background-image', 'url(' + weatherImage + ')');


}

Answer 1

这是获取当前DateTime的方法：

＆＃13;

console.log(new Date());

＆＃13;

在w3c上，您会发现许多功能可以从日期中检索特定数据：

https://www.w3schools.com/jsref/jsref_obj_date.asp

如何更改背景以匹配用户的天气状况和一天中的时间？

1 个答案: