当前位置:首页 > 建站技巧 > 网页定时展示代码

网页定时展示代码

GuanlinSir2年前 (2022-11-04)建站技巧1079
※ 声明:本站为非商业性博客,内容均为本站网友收集于互联网公开分享,仅限于学习和探讨的目的,不得将上述内容用于非法或商业途径,版权争议与本站无关,如有冒犯,请留言删除!

网页定时展示代码:

var PlayList={
    list:{
	
'06:00':'播放内容一',
		
'11:00':'播放内容二',

		
'23:59':'  ',
 },
    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('播放').innerHTML=cur
};

网页实现方式:<span id="播放"></span>

※ 感谢您的支持,如果喜欢本内容,请打赏本站!谢谢!
打赏 支付宝打赏 微信打赏

扫描二维码推送至手机访问。

版权声明:本文由 鹦鹉台 发布,如需转载请注明出处。

本文链接:http://zimtv.cn/tool/网页定时展示代码.html

分享给朋友:

“网页定时展示代码” 的相关文章

FontAwesome动态旋转图标类(fa-spin&fa-pulse)

FontAwesome动态旋转图标类(fa-spin&fa-pulse)

一、总结       fa-spin类:将"fa-spinner"这个图标旋转起来,形成一个连续流畅的旋转动画效果。 &nbs...

为你的主题加上loading效果

为你的主题加上loading效果

第一步: 新建一个loading样式css 将以下代码放进去 然后引用这个文件#Loadanimation{     background-col...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。