JS电视节目时间表，自动跳转

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS电视节目时间表</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#show{
    float:left;display:inline;
    border:1px solid #333;
    border-top:10px solid #8A0045;
    padding:10px;
    font: 12px/1.5 verdana;
    background:#FF0080;
    color:#fff;
}
#show h2{margin:0;padding:0;}
</style>
</head>
<body>
<div id="show"></div>
</body>
<script type="text/javascript">
//<![CDATA[
var PlayList={
    list:{
          '6:00':'新闻',
          '9:00':'畅游天下',
          '12:00':'音乐时间',
          '14:00':'新闻播报',
          '17:00':'车型天下',
          '19:00':'情感路',
          '21:00':'音乐时间'
    },
    live:function (it){//开始计时
        clearInterval(it.timer);//清除上次计时任务
        var date=new Date(this.time).toString();//取得服务器时间字符串
        this.db=[];
        for(var k in this.list){//转换为数组
           this.db.push({
                time:new Date(date.replace(/\d+:\d+(:\d+)/,k+'$1')),//转换为标准时间
                title:this.list[k]
           })
        }
        this.db.sort(function (a,b){//排序节目表
           return a.time-b.time
        });
        it.timer=setInterval(function() {//频发计时
            it.time+=1000;
            var cur,next,find;
            for (var i = 0, j = it.db.length; i < j; i++) {//查找当前节目
                var o=it.db[i];
                if (o.time>it.time) {find=true;break}//如果有一个节目时间大于当前时间，即找到下一个节目
            }
            if(!find)i=0;//如果没有节目比现在时间大，意味着在音乐时间
            next=it.db[i].title;//取得下一个节目标题
            cur=i>0?it.db[i-1].title:'音乐时间';//取得当前节目标题
            it.onInterval(new Date(it.time),cur,next)
        },1000);
        setTimeout(function() {
            it.index()
        },1000*60*10);//10分钟后校验服务器时间
    },
    index:function (){//初始化
       this.update(function (time){
           this.time=time;
           this.live(this)
       },this) 
    },
    update:function (end,context){//取得服务器时间
        var o = !-[1,] ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest;
        o.open('HEAD', '/', true);
        o.onreadystatechange=function (){
            if (o.readyState==4 && o.status==200)
                end.call(context,Date.parse(o.getResponseHeader('Date')))
        }
        o.send(null)        
    },
    onInterval:Function()//间隔事件
};
PlayList.index();
PlayList.onInterval=function (now,cur,next){
    document.getElementById('show').innerHTML='<h2>'+
        now.toLocaleTimeString()+
        '</h2> 正在播放: '+cur+'<br/>即将播出: '+next
};
 //]]>
</script>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JS电视节目时间表，自动跳转

分类

日期时间

描述

JS电视节目时间表，自动跳转，JS会根据时间自动载入数组中的内容，自动对应播出节目表，代码并不是100%完美，但可以做为一个参考实例。