|
|
Line 20: |
Line 20: |
| | | |
| | | |
- | <html>
| |
- | <head>
| |
- | <style type="text/css">
| |
- | .background {
| |
- | border-style: none;
| |
- | width: 62px;
| |
- | height: 58px;
| |
- | }
| |
- | .numbers {
| |
- | border-style: none;
| |
- | background-color: #292929;
| |
- | padding: 0px;
| |
- | width: 62px;
| |
- | height: 42px;
| |
- | text-align: center;
| |
- | font-family: Arial;
| |
- | font-size: 34px;
| |
- | font-weight: normal; /* options are normal, bold, bolder, lighter */
| |
- | color: #FFFFFF; /* change color using the hexadecimal color codes for HTML */
| |
- | }
| |
- | .title { /* the styles below will affect the title under the numbers, i.e., “Days”, “Hours”, etc. */
| |
- | border: none;
| |
- | padding: 0px;
| |
- | margin: 0px 3px;
| |
- | width: 62px;
| |
- | text-align: center;
| |
- | font-family: Arial;
| |
- | font-size: 10px;
| |
- | font-weight: normal; /* options are normal, bold, bolder, lighter */
| |
- | color: #999999; /* change color using the hexadecimal color codes for HTML */
| |
- | background-color: #000000;
| |
- | }
| |
- | #form { /* the styles below will affect the outer border of the countdown timer */
| |
- | width: 400px;
| |
- | height: 80px;
| |
- | border-style: ridge; /* options are none, dotted, dashed, solid, double, groove, ridge, inset, outset */
| |
- | border-width: 2px;
| |
- | border-color: #666666; /* change color using the hexadecimal color codes for HTML */
| |
- | background-color: #000000;
| |
- | padding: 5px;
| |
- | }
| |
- | .line {
| |
- | width: 62px;
| |
- | height: 2px;
| |
- | z-index: 15;
| |
- | }
| |
- | </style>
| |
- | </head>
| |
| | | |
- | <body>
| |
- | <div id="form">
| |
- | <div class="numbers" id="count2" style="position: absolute; top: 10px; height: 60px; padding: 15px 0 0 10px; background-color: #000000; z-index: 20;"></div>
| |
| | | |
- | <img src="../Style_1d_files/bkgdimage.gif" class="background" style="position: absolute; left: 69px; top: 12px;"/>
| |
- | <img src="../Style_1d_files/line.jpg" class="line" style="position: absolute; left: 69px; top: 40px;"/>
| |
- | <div class="numbers" id="dday" style="position: absolute; left: 69px; top: 21px;" ></div>
| |
| | | |
- | <img src="../Style_1d_files/bkgdimage.gif" class="background" style="position: absolute; left: 141px; top: 12px;"/>
| |
- | <img src="../Style_1d_files/line.jpg" class="line" style="position: absolute; left: 141px; top: 40px;"/>
| |
- | <div class="numbers" id="dhour" style="position: absolute; left: 141px; top: 21px;" ></div>
| |
| | | |
- | <img src="../Style_1d_files/bkgdimage.gif" class="background" style="position: absolute; left: 213px; top: 12px;"/> | + | <html> |
- | <img src="../Style_1d_files/line.jpg" class="line" style="position: absolute; left: 213px; top: 40px;"/>
| + | <div style="DISPLAY: inline; FONT-SIZE: 18pt; LEFT: 100px; WIDTH: 800px; POSITION: absolute; TOP: 200px;"> |
- | <div class="numbers" id="dmin" style="position: absolute; left: 213px; top: 21px;" ></div> | + | <!-- NOTES : Countdown Timer can be positioned via the above LEFT: nnn px and TOP: nnn px attributes --> |
- | | + | <script type="text/javascript"> |
- | <img src="../Style_1d_files/bkgdimage.gif" class="background" style="position: absolute; left: 285px; top: 12px;"/> | + | function mesiqg8(theyear,themonth,theday,thehour,themin,thesec) |
- | <img src="../Style_1d_files/line.jpg" class="line" style="position: absolute; left: 285px; top: 40px;"/>
| + | {yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec} |
- | <div class="numbers" id="dsec" style="position: absolute; left: 285px; top: 21px;" ></div> | + | mesiqg8(2010,11,5,18,00,59) |
- | | + | var occasion = "iGEM" |
- | <div class="title" id="days" style="position: absolute; left: 66px; top: 73px;" >Days</div>
| + | var message_on_occasion= "" |
- | <div class="title" id="hours" style="position: absolute; left: 138px; top: 73px;" >Hours</div>
| + | var countdownwidth='800px' |
- | <div class="title" id="minutes" style="position: absolute; left: 210px; top: 73px;" >Minutes</div>
| + | var countdownbgcolor='transparent' |
- | <div class="title" id="seconds" style="position: absolute; left: 282px; top: 73px;" >Seconds</div> | + | var opentags='<font face="Garamond" color="black"><Larger><b>' |
| + | var closetags='<b></larger></font>' |
| + | var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec") |
| + | var crosscount='' |
| + | </script> |
| + | <script type="text/javascript" src="http://www.autocalculator.org/Scripts/HTML-Countdown.js"></script> |
| </div> | | </div> |
| | | |
- | <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.
| |
- | on 5/30/2006 to count down to a specific date AND time,
| |
- | and on 1/10/2010 to include time zone offset.
| |
- | */
| |
| | | |
- | /* Change the items below to create your countdown target date and announcement once the target date and time are reached. */ | + | </html> |
- | var current="Winter is here!" //—>enter what you want the script to display when the target date and time are reached, limit to 20 characters
| + | |
- | var year=2010 //—>Enter the count down target date YEAR
| + | |
- | var month=11 //—>Enter the count down target date MONTH
| + | |
- | var day=5 //—>Enter the count down target date DAY
| + | |
- | var hour=18 //—>Enter the count down target date HOUR (24 hour clock)
| + | |
- | var minute=38 //—>Enter the count down target date MINUTE
| + | |
- | var tz=-5 //—>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! <—
| |
- | 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('count2').innerHTML=current;
| |
- | document.getElementById('count2').style.display="inline";
| |
- | document.getElementById('count2').style.width="390px";
| |
- | document.getElementById('dday').style.display="none";
| |
- | document.getElementById('dhour').style.display="none";
| |
- | document.getElementById('dmin').style.display="none";
| |
- | document.getElementById('dsec').style.display="none";
| |
- | document.getElementById('days').style.display="none";
| |
- | document.getElementById('hours').style.display="none";
| |
- | document.getElementById('minutes').style.display="none";
| |
- | document.getElementById('seconds').style.display="none";
| |
- | return;
| |
- | }
| |
- | else {
| |
- | document.getElementById('count2').style.display="none";
| |
- | document.getElementById('dday').innerHTML=dday;
| |
- | document.getElementById('dhour').innerHTML=dhour;
| |
- | document.getElementById('dmin').innerHTML=dmin;
| |
- | document.getElementById('dsec').innerHTML=dsec;
| |
- | setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",1000);
| |
- | }
| |
- | }
| |
- |
| |
- | countdown(year,month,day,hour,minute)
| |
- |
| |
- | </script>
| |
- | </body>
| |
- | </html>
| |
| | | |
| | | |