用JS控制某个时间段内的页面内容

|

最近做论坛活动，遇到一个需求，对方要求在某一个时段内将首页的某区域出现视频播放，并且不允许超时后让用户继续观看。

这是一个很简单的需求，只要在打开页面的时候，判断当前时间是否在开始时间和结束时间之间即可。

不过，这里有一个细节，假设一个用户从一开始就打开页面，然后一直观看超过了结束时间，那么按照之前的一次性监测是无法关闭他的视频观看权力的。

经过一番构思，我的做法是：页面开始时判断当前时间是否在允许的时间段内，然后计算出一个与结束时间的差值，用计数器去按时激活它关闭。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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>

Related posts

3条评论

发表评论