Question

您好我正在尝试将我的时钟和倒数计时器放在同一页面上，以便人们/用户可以看到我完成游戏的时间，并且他们也可以使用倒数计时器获得正确的时间。这是代码。它们都是分开工作，但是当它们都放在.php页面上时，只有底部的一个（倒数计时器）有效，如果我对计时器进行JQuery.noconflict，时钟可以工作但倒计时不起作用。

<!-- Clock Part 1 - Holder for Display of Clock -->

<span id="tP">&nbsp;</span>

<!-- Clock Part 1 - Ends Here -->



<!-- Clock Part 2 - Put Anywhere AFTER Part 1 -->

<script type="text/javascript">
// Clock Script Generated By Maxx Blade's Clock v2.0d
// http://www.maxxblade.co.uk/clock
function tS(){ x=new Date(); x.setTime(x.getTime()); return x; } 
function lZ(x){ return (x>9)?x:'0'+x; } 
function tH(x){ if(x==0){ x=12; } return (x>12)?x-=12:x; } 
function dE(x){ if(x==1||x==21||x==31){ return 'st'; } if(x==2||x==22){ return 'nd'; } if(x==3||x==23){ return 'rd'; } return 'th'; } 
function y2(x){ x=(x<500)?x+1900:x; return String(x).substring(2,4) } 
function dT(){ window.status=''+eval(oT)+''; document.title=''+eval(oT)+''; document.getElementById('tP').innerHTML=eval(oT); setTimeout('dT()',1000); } 
function aP(x){ return (x>11)?'pm':'am'; } 
var dN=new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat'),mN=new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'),oT="dN[tS().getDay()]+' '+tS().getDate()+dE(tS().getDate())+' '+mN[tS().getMonth()]+' '+y2(tS().getYear())+' '+':'+':'+' '+tH(tS().getHours())+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())+aP(tS().getHours())";
if(!document.all){ window.onload=dT; }else{ dT(); }
</script>

<!-- Clock Part 2 - Ends Here  -->





<script type="text/javascript">
//###################################################################
// Author: ricocheting.com
// Version: v3.0
// Date: 2014-09-05
// Description: displays the amount of time until the "dateFuture" entered below.

var CDown = function() {
    this.state=0;// if initialized
    this.counts=[];// array holding countdown date objects and id to print to {d:new Date(2013,11,18,18,54,36), id:"countbox1"}
    this.interval=null;// setInterval object
}

CDown.prototype = {
    init: function(){
        this.state=1;
        var self=this;
        this.interval=window.setInterval(function(){self.tick();}, 1000);
    },
    add: function(date,id){
        this.counts.push({d:date,id:id});
        this.tick();
        if(this.state==0) this.init();
    },
    expire: function(idxs){
        for(var x in idxs) {
            this.display(this.counts[idxs[x]], "Sorry, hopfully we are open in a couple minutes");
            this.counts.splice(idxs[x], 1);
        }
    },
    format: function(r){
        var out="";
        if(r.d != 0){out += r.d +" "+((r.d==1)?"Day":"Days")+", ";}
        if(r.h != 0){out += r.h +" "+((r.h==1)?"Hour":"Hours")+", ";}
        out += r.m +" "+((r.m==1)?"Min":"Mins")+", ";
        out += r.s +" "+((r.s==1)?"Sec":"Secs")+", ";

        return out.substr(0,out.length-2);
    },
    math: function(work){
        var y=w=d=h=m=s=ms=0;

        ms=(""+((work%1000)+1000)).substr(1,3);
        work=Math.floor(work/1000);//kill the "milliseconds" so just secs

        y=Math.floor(work/31536000);//years (no leapyear support)
        w=Math.floor(work/604800);//weeks
        d=Math.floor(work/86400);//days
        work=work%86400;

        h=Math.floor(work/3600);//hours
        work=work%3600;

        m=Math.floor(work/60);//minutes
        work=work%60;

        s=Math.floor(work);//seconds

        return {y:y,w:w,d:d,h:h,m:m,s:s,ms:ms};
    },
    tick: function(){
        var now=(new Date()).getTime(),
            expired=[],cnt=0,amount=0;

        if(this.counts)
        for(var idx=0,n=this.counts.length; idx<n; ++idx){
            cnt=this.counts[idx];
            amount=cnt.d.getTime()-now;//calc milliseconds between dates

            // if time is already past
            if(amount<0){
                expired.push(idx);
            }
            // date is still good
            else{
                this.display(cnt, this.format(this.math(amount)));
            }
        }

        // deal with any expired
        if(expired.length>0) this.expire(expired);

        // if no active counts, stop updating
        if(this.counts.length==0) window.clearTimeout(this.interval);

    },
    display: function(cnt,msg){
        document.getElementById(cnt.id).innerHTML=msg;
    }
};

window.onload=function(){
    var cdown = new CDown();
                    //Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan) 
    cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};
</script>

<h2> Time until ^^<<>> opens!</h2>
<div id="countbox1"></div>

解决了问题 感谢@Scronide，@ James Thorpe和@Ultimater。我将所有方法都放在适当位置并将它们分开并使用@Scronide最终方法。再次感谢。

Answer 1

他们都分配给window.onload，所以第二个是覆盖第一个的功能。

如果您使用的是jquery，而不是分配给window.onload，则可以使用：

/* first component */

//initialisation for first component
$(function() {
    dT();
});

/* second component */

//initialisation for second component
$(function() {
    var cdown = new CDown();
    //Year,Month,Day,Hour,Min,Sec\\ (Jan - 0 Fed - 1 ++ Dec - 11, 12 is replaced with 0 for Jan) 
    cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
});

Answer 2

两者都使用window.onload。只需将两个功能合二为一。

Answer 3

这些脚本都不使用任何jQuery，因此它不是jQuery冲突。问题是他们都将函数设置为window.onload，因此最后一个脚本将始终覆盖它之前的那个。

我建议从时钟脚本末尾删除if(!document.all){ window.onload=dT; }else{ dT(); }行，并在第二个脚本的dT();分配中添加window.onload。

所以你会有类似的东西：

window.onload=function(){
  dT();
  var cdown = new CDown();
  cdown.add(new Date(2014,9,29,12,18,0), "countbox1");
};

如何让我的两个JavaScripts一起工作？

3 个答案: