纯前端如何实现某个时间显示某张图片？

Question

项目中有个需求是某个时间显示某张bannner，比如：

8点显示 banner1
10点显示 banner2
12点显示 banner3
14点显示 banner4
16点显示 banner5
18点显示 banner6

我能想到的就是 setinterva,但是这个方法感觉好low，有没有更好的方法吗？

Answer 1

不考虑性能，仅供参考。

Answer 2

引用楼上烽火连天博一笑的答案：

在用户打开你的网页时，第一时间判断当前时间，比如现在是9点那就显示8点到9.59的图片，是10点就显示10点到11.59的图片。

在此基础之上获取此时距离下一张图片要显示的时间差diffTime，设置计时器的时间为diffTime，

setTimeout(function(){
    // do something
    setInterval(function(){
        // do something
    },2*60*60*1000)
},diffTime)

Answer 3

我帮你想到一种办法，我认为应该是最简单的方法了。在用户打开你的网页时，第一时间判断当前时间，比如现在是9点那就显示8点到9.59的图片，是10点就显示10点到11.59的图片。用到方法date.而且这种方法对性能和加载速度毫无形象，比interval好得多！欢迎采纳。