如何讓我的兩個JavaScript一起工作？

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，@詹姆斯索普和@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(); }行，並在第二個腳本的window.onload賦值中添加dT();。

所以，你會碰到這樣的：

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