前言:最近我有个朋友项目有个需求,跟俄罗斯世界杯有关,不同的日期的不同时间点需要切换对应的图片和内容,比如: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 丹麦 相关
	}
}
//一个定时器搞定多个时间点执行不同的代码

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」