Fatal编程技术网
  • javascript/
  • Javascript 在同一网页上有两个倒计时计时器

Javascript 在同一网页上有两个倒计时计时器

javascript html css twitter-bootstrap

Javascript 在同一网页上有两个倒计时计时器,javascript,html,css,twitter-bootstrap,ticker,Javascript,Html,Css,Twitter Bootstrap,Ticker,我的页面上有一个使用javascript的倒计时计时器（我发现了一个模板/我自己没有编写代码）。我把它放在一个在大中型显示器上看起来不错的位置，但是我正试图让它在一个移动大小的显示器上正常显示。我认为这样做的一个好方法是创建第二个相同的ticker，并将其正确地放置在mobile size显示屏上，必要时使用引导类隐藏/显示ticker。然而，当页面加载时，大屏幕上的ticker正在工作，但当我将窗口缩小到小尺寸时，第二个ticker将正确显示，但javascript和功能不起作用/数字的图像不

我的页面上有一个使用javascript的倒计时计时器（我发现了一个模板/我自己没有编写代码）。我把它放在一个在大中型显示器上看起来不错的位置，但是我正试图让它在一个移动大小的显示器上正常显示。我认为这样做的一个好方法是创建第二个相同的ticker，并将其正确地放置在mobile size显示屏上，必要时使用引导类隐藏/显示ticker。然而，当页面加载时，大屏幕上的ticker正在工作，但当我将窗口缩小到小尺寸时，第二个ticker将正确显示，但javascript和功能不起作用/数字的图像不会显示。也许我可以使用一个可以改变移动屏幕大小位置的自动售票机作为替代

以下是工作股票代码：

有一个body onload函数：

 <body onload="countdown(year,month,day,hour,minute)">
以下是将股票代码添加到页面正文的代码：

<div id="holder" class="hidden-xs">
<div id="timer">
    <div id="note"></div>
    <div id="countdown">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day2">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day3">
        <img height=21 id="colon1" src="digital-numbers/colon.png" width=9 name="d1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="h1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="h2">
        <img height=21 id="colon2" src="digital-numbers/colon.png" width=9 name="g1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="m1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="m2">
        <img height=21 id="colon3" src="digital-numbers/colon.png" width=9 name="j1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="s1">
        <img height=21 src="digital-numbers/bkgd.gif" width=16 name="s2">
        <div id="title">
            <div class="title" style="position: absolute; top: 36px; left: 42px">DAYS</div>
            <div class="title" style="position: absolute; top: 36px; left: 105px">HRS</div>
            <div class="title" style="position: absolute; top: 36px; left: 156px">MIN</div>
            <div class="title" style="position: absolute; top: 36px; left: 211px">SEC</div>
        </div>
    </div>
</div>


天
高分辨率分光计
闵
秒

以下是JS：

<script type="text/javascript">     
/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
Modified by Robert M. Kuhnhenn, D.O. 
(www.rmkwebdesign.com/Countdown_Timers/)
on 5/30/2006 to count down to a specific date AND time,
on 10/20/2007 to a new format, on 1/10/2010 to include
time zone offset, and on 7/12/2012 to digital numbers.
*/

/*  
CHANGE THE ITEMS BELOW TO CREATE YOUR COUNTDOWN TARGET DATE AND            ANNOUNCEMENT 
ONCE THE TARGET DATE AND TIME ARE REACHED.
*/
var note="Warrior Games 2015 Have Arrived!";    /* -->Enter what you    want the script to 
                  display when the target date and time 
                  are reached, limit to 25 characters */
var year=2015;      /* -->Enter the count down target date YEAR */
var month=06;       /* -->Enter the count down target date MONTH */
var day=19;         /* -->Enter the count down target date DAY */
var hour=0;         /* -->Enter the count down target date HOUR (24 hour     clock) */
var minute=0;      /* -->Enter the count down target date MINUTE */
var tz=-4;          /* -->Offset for your timezone in hours from UTC (see 
          http://wwp.greenwichmeantime.com/index.htm to find 
          the timezone offset for your location) */

//-->    DO NOT CHANGE THE CODE BELOW!    <--   
d1 = new Image(); d1.src = "digital-numbers/1.png";
d2 = new Image(); d2.src = "digital-numbers/2.png";
d3 = new Image(); d3.src = "digital-numbers/3.png";
d4 = new Image(); d4.src = "digital-numbers/4.png";
d5 = new Image(); d5.src = "digital-numbers/5.png";
d6 = new Image(); d6.src = "digital-numbers/6.png";
d7 = new Image(); d7.src = "digital-numbers/7.png";
d8 = new Image(); d8.src = "digital-numbers/8.png";
d9 = new Image(); d9.src = "digital-numbers/9.png";
d0 = new Image(); d0.src = "digital-numbers/0.png";
bkgd = new Image(); bkgd.src = "digital-numbers/bkgd.gif";

var montharray=new     Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"    );

function countdown(yr,m,d,hr,min){
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
var today=new Date();
var todayy=today.getYear();
if (todayy < 1000) {todayy+=1900;}
var todaym=today.getMonth();
var todayd=today.getDate();
var todayh=today.getHours();
var todaymin=today.getMinutes();
var todaysec=today.getSeconds();
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
var dd=futurestring-todaystring;
var dday=Math.floor(dd/(60*60*1000*24)*1);
var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1);
var dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
var dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
    document.getElementById('note').innerHTML=note;
    document.getElementById('note').style.display="block";
    document.getElementById('countdown').style.display="none";
    clearTimeout(startTimer);
    return;
}
else {
    document.getElementById('note').style.display="none";
    document.getElementById('timer').style.display="block";
    startTimer = setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",500);
}
convert(dday,dhour,dmin,dsec);
}

function convert(d,h,m,s) {
if (!document.images) return;
if (d <= 9) {
    document.images.day1.src = bkgd.src;
    document.images.day2.src = bkgd.src;
    document.images.day3.src = eval("d"+d+".src");
}
else if (d <= 99) {
    document.images.day1.src = bkgd.src;
    document.images.day2.src = eval("d"+Math.floor(d/10)+".src");
    document.images.day3.src = eval("d"+(d%10)+".src");
}
else {
    document.images.day1.src = eval("d"+Math.floor(d/100)+".src");
    var day = d.toString();
    day = day.substr(1,1);
    day = parseInt(day);
    document.images.day2.src = eval("d"+day+".src");
    document.images.day3.src = eval("d"+(d%10)+".src");
}
if (h <= 9) {
    document.images.h1.src = d0.src;
    document.images.h2.src = eval("d"+h+".src");
}
else {
    document.images.h1.src = eval("d"+Math.floor(h/10)+".src");
    document.images.h2.src = eval("d"+(h%10)+".src");
}
if (m <= 9) {
    document.images.m1.src = d0.src;
    document.images.m2.src = eval("d"+m+".src");
}
else {
    document.images.m1.src = eval("d"+Math.floor(m/10)+".src");
    document.images.m2.src = eval("d"+(m%10)+".src");
}
if (s <= 9) {
    document.images.s1.src = d0.src;
    document.images.s2.src = eval("d"+s+".src");
}
else {
    document.images.s1.src = eval("d"+Math.floor(s/10)+".src");
    document.images.s2.src = eval("d"+(s%10)+".src");
}
}
</script>


/*
倒计时到任何日期-
通过JavaScript工具包（www.javascriptkit.com）
超过200+免费脚本在这里！
由Robert M.Kuhnhenn D.O.修改。
（www.rmkwebdesign.com/Countdown\u Timers/）
于2006年5月30日倒计时至特定日期和时间，
2007年10月20日改为新格式，2010年1月10日改为
时区偏移，并在2012年12月7日转换为数字。
*/
/*  
更改以下项目以创建倒计时目标日期和公告
一旦达到目标日期和时间。
*/
var note=“战士游戏2015已经到来！”；/*-->输入您希望脚本显示的内容
显示目标日期和时间的时间
已达到，限制为25个字符*/
风险值年份=2015年；/*-->输入每年的倒计时目标日期*/
变量月份=06；/*-->输入每月的倒计时目标日期*/
var日=19；/*-->输入倒计时目标日期*/
变量小时=0；/*-->输入倒计时目标日期小时数（24小时制）*/
变量分钟=0；/*-->输入倒计时目标日期分钟*/
var tz=-4；/*-->以小时为单位的时区与UTC的偏移量（请参见
http://wwp.greenwichmeantime.com/index.htm 发现
您所在位置的时区偏移）*/

//-->不要更改下面的代码！您有2个
？代码在第二个div上不起作用，因为javascript代码尝试只查找id为<代码>倒计时否的div元素的第一个。我有一个不同的div用于第二个ticker对于另一条路线，是否可以只使用一个ticker，但移动其位置以适应不同的屏幕大小？第二个ticker的div id是什么？