前言:最近我有个朋友项目有个需求,跟俄罗斯世界杯有关,不同的日期的不同时间点需要切换对应的图片和内容,比如:06-30 22:00 法国对阵阿根廷,当天只有一场比赛,在页面UI上,没有到22:00显示的对阵图片和内容是法国对阵阿根廷,到22:00比赛开始,切换图片和内容,这个简单,开一个定时器就搞定:
//首先执行一次避免打开页面短暂空白
countTime()
//执行定时器
setInterval(countTime,1000);
//定时器里的回调函数
function countTime(){
//指定时间
var targetStamp=(new Date('2018-06-30 22:00:00'.replace(/-/g, '/')).getTime()/1000)-(Date.parse(new Date())/1000)
if(targetStamp<=0){
//到了 2018-06-30 22:00:00 执行的代码
}
}//new Date('2018-06-30 22:00:00'.replace(/-/g, '/')).getTime()是为了兼容IOS
了解详情请移步JS-Date文章
如果在小组赛里一天3场比赛,是否一个定时器可以办到呢?答案是可以的,举个例子,拿2018-06-16号比赛为例:
2018-06-16 02:00:00 葡萄牙VS西班牙
2018-06-16 18:00:00 法国VS澳大利亚
2018-06-16 21:00:00 阿根廷VS冰岛
2018-06-17 00:00:00 秘鲁VS丹麦
未到2018-06-16 02:00:00默认图片肯定是 葡萄牙VS西班牙相关
//首先执行一次避免打开页面短暂空白
countTime()
//执行定时器
setInterval(countTime,1000);
//定时器里的回调函数
function countTime(){
//指定时间1
var targetStamp1=(new Date('2018-06-16 02:00:00'.replace(/-/g, '/')).getTime()/1000)-(Date.parse(new Date())/1000)
//指定时间2
var targetStamp2=(new Date('2018-06-16 18:00:00'.replace(/-/g, '/')).getTime()/1000)-(Date.parse(new Date())/1000)
//指定时间3
var targetStamp3=(new Date('2018-07-17 21:00:00'.replace(/-/g, '/')).getTime()/1000)-(Date.parse(new Date())/1000)
if(targetStamp1<=0&&targetStamp2>0&&targetStamp3>0){
//切换成 法国 VS 澳大利亚 相关
}else if(targetStamp1<=0&&targetStamp2<=0&&targetStamp3>0){
//切换成 阿根廷 VS 冰岛 相关
}else if(targetStamp1<=0&&targetStamp2<=0&&targetStamp3<=0){
//切换成 秘鲁 VS 丹麦 相关
}
}
//一个定时器搞定多个时间点执行不同的代码
「两年博客,如果觉得我的文章对您有用,请帮助本站成长」
共有 0 条评论 - 不同的时间点执行不同的代码