如何使两个JavaScript协同工作？

Question

Hello I am trying to have my clock and my countdown timer on the same page so people/users can see when I am done with my game and for them to have the correct time with the countdown timer also. Here is the code. They both work separately but when the are both put on a .php page only the bottom one (countdown timer) works and if I do JQuery.noconflict to the timer the clock works but the countdown doesn't.

<!-- 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>

Fixed the problem Thanks to @Scronide , @James Thorpe , and @Ultimater. I put all of your methods into place and kept them separate and used @Scronide final method. Thanks again.

Answer 1

They're both assigning to window.onload so the second is overwriting the function of the first.

If you are using jquery, instead of assigning to window.onload , you can instead use:

/* 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

Both use window.onload. Simply join the two functions into one.

Answer 3

Neither of these scripts use any jQuery, so it isn't a jQuery conflict. The problem is that they are both setting a function to window.onload , so the last script will always override the one before it.

I suggest removing the if(!document.all){ window.onload=dT; }else{ dT(); } if(!document.all){ window.onload=dT; }else{ dT(); } if(!document.all){ window.onload=dT; }else{ dT(); } line from the end of the clock script and adding dT(); inside the window.onload assignment from the second script.

So you would have something like:

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