关注前端 | 前端博客
当前位置: JavaScript > 不同的时间点执行不同的代码

不同的时间点执行不同的代码

2018-07-08 分类:JavaScript 作者:管理员 阅读(77)

前言:最近我有个朋友项目有个需求,跟俄罗斯世界杯有关,不同的日期的不同时间点需要切换对应的图片和内容,比如: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) 打赏

感谢您让我添加个鸡腿!

支付宝
微信
0

感谢您让我添加个鸡腿!

支付宝
微信

上一篇:

下一篇:

共有 0 条评论 - 不同的时间点执行不同的代码

博客简介

一位不知名的前端工程师,专注全栈技术,分享各种所遇问题与个人心得,梦想成为一位知名大神!

最近更新

精彩评论

服务热线:
 177****6038

 QQ在线交流

 旺旺在线