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

发布时间：2018-08-14 20:30:08 所属栏目：PHP教程来源：站长网

导读：JS电视节目时间表，定时自动跳转特效。此类代码一般用于影视网站使用，更直接的说适用于直播网站，到了时间就自动打开节目，自动跳转效果，JS会根据时间自动载入数组中的内容，自动对应播出节目表，代码并不是100%完美，但可以做为一个参考实例。示例： !

　　JS电视节目时间表，定时自动跳转特效。此类代码一般用于影视网站使用，更直接的说适用于直播网站，到了时间就自动打开节目，自动跳转效果，JS会根据时间自动载入数组中的内容，自动对应播出节目表，代码并不是100%完美，但可以做为一个参考实例。

　　示例：

<!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=gbk" /> <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> <div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

PHP 避免重复提交与检	任何使用PHP和XML进行
聊聊PHP开发团队的管理	大型系统上PHP令人不爽