最近做论坛活动,遇到一个需求,对方要求在某一个时段内将首页的某区域出现视频播放,并且不允许超时后让用户继续观看。
这是一个很简单的需求,只要在打开页面的时候,判断当前时间是否在开始时间和结束时间之间即可。
不过,这里有一个细节,假设一个用户从一开始就打开页面,然后一直观看超过了结束时间,那么按照之前的一次性监测是无法关闭他的视频观看权力的。
经过一番构思,我的做法是:页面开始时判断当前时间是否在允许的时间段内,然后计算出一个与结束时间的差值,用计数器去按时激活它关闭。
<script type="text/javascript">
/**
*作者:AlexBlair
*日期:2009-12-26
*/
/**
* 用途:初始化
* 描述:获取开始时间、结束时间、当前时间三个元素,并初始化计数器参数AlexBlair_StopTime
* AlexBlair_StopTime 计数器参数,记录激活关闭视频所需的毫秒数
* AlexBlair_SetupTime[0] 开始时间
* AlexBlair_SetupTime[1] 结束时间
*/
var AlexBlair_StopTime=-1;
var AlexBlair_SetupTime=[];
AlexBlair_SetupTime.push(
//start[0]
{Year:'2009',Month:'11',Date:'25',Hours:'20',Minutes:'00',Seconds:'0'},
//end[1]
{Year:'2009',Month:'11',Date:'26',Hours:'1',Minutes:'08',Seconds:'50'}
);
/**
* 用途:获取关闭所需毫秒数
* 描述:通过对开始时间、结束时间、当前时间三个元素的计算设置计数器参数AlexBlair_StopTime
* 输入:无
* 输出:AlexBlair_StopTime
*/
function AlexBlair_GetStopTime() {
var NowDate=new Date(),StopDate=new Date(),StartDate=new Date(),temparr=[];
//=======
temparr.push("StartDate","StopDate");
//0=StartDate
//1=StopDate
for (i=0;i<2;i++){
eval(temparr[i]).setFullYear(AlexBlair_SetupTime[i].Year,AlexBlair_SetupTime[i].Month,AlexBlair_SetupTime[i].Date);
eval(temparr[i]).setHours(AlexBlair_SetupTime[i].Hours);
eval(temparr[i]).setMinutes(AlexBlair_SetupTime[i].Minutes);
eval(temparr[i]).setSeconds(AlexBlair_SetupTime[i].Seconds);
};
//进行对比
//开始时间小于当前时间,且结束时间大于当前时间则为允许执行的时间
if ((StartDate.getTime()-NowDate.getTime())<0
&& (StopDate.getTime()-NowDate.getTime())>0){
AlexBlair_StopTime=StopDate.getTime()-NowDate.getTime();
};
temparr = null;
NowDate = null;
StopDate = null;
StartDate = null;
};
/**
* 用途:显示视频
* 描述:展示视频内容,激活计数器
* 输入:无
* 输出:用于视频的自定义HTML相关代码
*/
function AlexBlair_ShowVideo() {
AlexBlair_GetStopTime();
if (AlexBlair_StopTime>0){
var HTML="<B>IS OK!</B>";
document.getElementById("ss").innerHTML=HTML;
HTML=null;
setTimeout("AlexBlair_StopVideo();",AlexBlair_StopTime);
}else{
AlexBlair_StopVideo();
};
};
/**
* 用途:结束视频
* 描述:结束视频内容,停止计数器,初始化计数器变量
* 输入:无
* 输出:取消视频后的自定义HTML相关代码
*/
function AlexBlair_StopVideo() {
var AlexBlair_StopTime=-1;
var HTML="<b>all is over!</b>";
document.getElementById("ss").innerHTML=HTML;
HTML=null;
};
//调用AlexBlair_ShowVideo
AlexBlair_ShowVideo();
</script>
/**
*作者:AlexBlair
*日期:2009-12-26
*/
/**
* 用途:初始化
* 描述:获取开始时间、结束时间、当前时间三个元素,并初始化计数器参数AlexBlair_StopTime
* AlexBlair_StopTime 计数器参数,记录激活关闭视频所需的毫秒数
* AlexBlair_SetupTime[0] 开始时间
* AlexBlair_SetupTime[1] 结束时间
*/
var AlexBlair_StopTime=-1;
var AlexBlair_SetupTime=[];
AlexBlair_SetupTime.push(
//start[0]
{Year:'2009',Month:'11',Date:'25',Hours:'20',Minutes:'00',Seconds:'0'},
//end[1]
{Year:'2009',Month:'11',Date:'26',Hours:'1',Minutes:'08',Seconds:'50'}
);
/**
* 用途:获取关闭所需毫秒数
* 描述:通过对开始时间、结束时间、当前时间三个元素的计算设置计数器参数AlexBlair_StopTime
* 输入:无
* 输出:AlexBlair_StopTime
*/
function AlexBlair_GetStopTime() {
var NowDate=new Date(),StopDate=new Date(),StartDate=new Date(),temparr=[];
//=======
temparr.push("StartDate","StopDate");
//0=StartDate
//1=StopDate
for (i=0;i<2;i++){
eval(temparr[i]).setFullYear(AlexBlair_SetupTime[i].Year,AlexBlair_SetupTime[i].Month,AlexBlair_SetupTime[i].Date);
eval(temparr[i]).setHours(AlexBlair_SetupTime[i].Hours);
eval(temparr[i]).setMinutes(AlexBlair_SetupTime[i].Minutes);
eval(temparr[i]).setSeconds(AlexBlair_SetupTime[i].Seconds);
};
//进行对比
//开始时间小于当前时间,且结束时间大于当前时间则为允许执行的时间
if ((StartDate.getTime()-NowDate.getTime())<0
&& (StopDate.getTime()-NowDate.getTime())>0){
AlexBlair_StopTime=StopDate.getTime()-NowDate.getTime();
};
temparr = null;
NowDate = null;
StopDate = null;
StartDate = null;
};
/**
* 用途:显示视频
* 描述:展示视频内容,激活计数器
* 输入:无
* 输出:用于视频的自定义HTML相关代码
*/
function AlexBlair_ShowVideo() {
AlexBlair_GetStopTime();
if (AlexBlair_StopTime>0){
var HTML="<B>IS OK!</B>";
document.getElementById("ss").innerHTML=HTML;
HTML=null;
setTimeout("AlexBlair_StopVideo();",AlexBlair_StopTime);
}else{
AlexBlair_StopVideo();
};
};
/**
* 用途:结束视频
* 描述:结束视频内容,停止计数器,初始化计数器变量
* 输入:无
* 输出:取消视频后的自定义HTML相关代码
*/
function AlexBlair_StopVideo() {
var AlexBlair_StopTime=-1;
var HTML="<b>all is over!</b>";
document.getElementById("ss").innerHTML=HTML;
HTML=null;
};
//调用AlexBlair_ShowVideo
AlexBlair_ShowVideo();
</script>
地址:http://www.alexblair.org/user-alexblair-post-923.html
来自:aの碎碎念
※aの碎碎念是记录生活灵感的地方,碎碎念拒绝直接全文转载,转载请发布文章简介与固定链接。
※ 灵感需要碰撞,您的点击或评论就是莫大的支持;
看来也是前端的人啊
呵呵,握手~~刚起步~~
骨头祝博主新年快乐,2010年大发“`