Team:AUC TURKEY/Test
From 2013hs.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{AUC_Turkey}} | {{AUC_Turkey}} | ||
+ | <html> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | #holder { | ||
+ | position: relative; /* leave as "relative" to keep timer centered on your | ||
+ | page, or change to "absolute" then change the | ||
+ | values of the "top" and "left" properties to | ||
+ | position the timer */ | ||
+ | top: 10px; /* change to position the timer */ | ||
+ | left: 0px; /* change to position the timer; must also change | ||
+ | position to "absolute" above */ | ||
+ | width: 270px; | ||
+ | height: 60px; | ||
+ | border: none; | ||
+ | margin: 0px auto; | ||
+ | } | ||
- | + | #title, #note { | |
+ | color: lime; /* this determines the color of the DAYS, HRS, MIN, SEC | ||
+ | labels under the timer and the color of the note | ||
+ | that displays after reaching the target date and | ||
+ | time; if using the blue digital images, change to | ||
+ | #52C6FF; for the red images, change to #FF6666; for | ||
+ | the white images, change to #BBBBBB; for the yellow | ||
+ | images, change to #FFFF00 */ | ||
+ | } | ||
- | + | #note { | |
- | + | position: relative; | |
- | + | top: 6px; | |
- | + | height: 20px; | |
- | + | width: 260px; | |
- | + | margin: 0 auto; | |
- | + | padding: 0px; | |
- | + | text-align: center; | |
- | + | font-family: Arial; | |
- | + | font-size: 18px; | |
- | + | font-weight: bold; /* options are normal, bold, bolder, lighter */ | |
- | + | font-style: normal; /* options are normal or italic */ | |
- | + | z-index: 1; | |
+ | } | ||
+ | .title { | ||
+ | border: none; | ||
+ | padding: 0px; | ||
+ | margin: 0px; | ||
+ | width: 30px; | ||
+ | text-align: center; | ||
+ | font-family: Arial; | ||
+ | font-size: 10px; | ||
+ | font-weight: normal; /* options are normal, bold, bolder, lighter */ | ||
+ | background-color: transparent; | ||
+ | } | ||
- | + | #timer { | |
+ | position: relative; | ||
+ | top: 0px; | ||
+ | left: 0px; | ||
+ | margin: 5px auto; | ||
+ | text-align: center; | ||
+ | width: 260px; | ||
+ | height: 26px; | ||
+ | border: none; | ||
+ | padding: 10px 5px 20px 5px; | ||
+ | background: #000000; /* may change to another color, or to "transparent" */ | ||
+ | border-radius: 20px; | ||
+ | box-shadow: 0 0 10px #000000; /* change to "none" if you don't want a shadow */ | ||
+ | } | ||
+ | </style> | ||
- | + | <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 noted in light blue below to create your countdown target | ||
+ | date and announcement once the target date and time are reached. | ||
+ | */ | ||
+ | var note="Winter has arrived!"; /* -->Enter what you want the script to | ||
+ | display when the target date and time | ||
+ | are reached, limit to 25 characters */ | ||
+ | var year=2012; /* -->Enter the count down target date YEAR */ | ||
+ | var month=12; /* -->Enter the count down target date MONTH */ | ||
+ | var day=21; /* -->Enter the count down target date DAY */ | ||
+ | var hour=6; /* -->Enter the count down target date HOUR (24 hour | ||
+ | clock) */ | ||
+ | var minute=12; /* -->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! <-- | |
+ | 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> | ||
+ | </head> | ||
+ | <body onload="countdown(year,month,day,hour,minute)"> | ||
+ | <div id="holder"> | ||
+ | <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> | ||
+ | </div> | ||
+ | </body> | ||
+ | </html> | ||
<forum_subtle/> | <forum_subtle/> |
Revision as of 14:11, 11 June 2013