Team:AUC TURKEY/Test

From 2013hs.igem.org

(Difference between revisions)
Line 2: Line 2:
<html>
<html>
<head>
<head>
-
     <style type="text/css">
+
     <style type="text/css">
-
    #holder {
+
#holder {
-
        position: relative;  /* leave as "relative" to keep timer centered on your
+
position: relative;  /* leave as "relative" to keep timer centered on  
-
                                page, or change to "absolute" then change the
+
your page, or change to "absolute" then change
-
                                values of the "top" and "left" properties to  
+
the values of the "top" and "left" properties to  
-
                                position the timer */
+
position the timer */
-
        top: 10px;            /* change to position the timer */
+
top: 10px;            /* change to position the timer; must also change
-
        left: 0px;           /* change to position the timer; must also change
+
position to "absolute" above */
-
                                position to "absolute" above */
+
left: 0px;       /* change to position the timer; must also change
-
        width: 270px;
+
position to "absolute" above */
-
        height: 60px;
+
width: 270px;
-
        border: none;
+
height: 60px;
-
        margin: 0px auto;
+
border: none;
-
    }
+
margin: 0px auto;
 +
}
-
    #title, #note {
+
#title, #note {
-
        color: lime;           /* this determines the color of the DAYS, HRS, MIN, SEC
+
color: lime;       /* this determines the color of the DAYS, HRS, MIN,  
-
                                  labels under the timer and the color of the note
+
SEC labels under the timer and the color of the  
-
                                  that displays after reaching the target date and
+
note that displays after reaching the target date
-
                                  time; if using the blue digital images, change to  
+
and time; if using the blue digital images,
-
                                  #52C6FF; for the red images, change to #FF6666; for  
+
change to #52C6FF; for the red images,
-
                                  the white images, change to #BBBBBB; for the yellow  
+
change to #FF6666; for the white images,
-
                                  images, change to #FFFF00 */
+
change to #BBBBBB; for the yellow images,
-
    }
+
change to #FFFF00 */
 +
}
-
    #note {
+
#note {
-
        position: relative;
+
position: relative;
-
        top: 6px;
+
top: 6px;
-
        height: 20px;
+
height: 20px;
-
        width: 260px;
+
width: 260px;
-
        margin: 0 auto;
+
margin: 0 auto;
-
        padding: 0px;
+
padding: 0px;
-
        text-align: center;  
+
text-align: center;  
-
        font-family: Arial;  
+
font-family: Arial;  
-
        font-size: 18px;
+
font-size: 18px;
-
        font-weight: bold;    /* options are normal, bold, bolder, lighter */
+
font-weight: bold;    /* options are normal, bold, bolder, lighter */
-
        font-style: normal;  /* options are normal or italic */
+
font-style: normal;  /* options are normal or italic */
-
        z-index: 1;
+
z-index: 1;
-
    }
+
}
-
    .title {
+
.title {
-
        border: none;
+
border: none;
-
        padding: 0px;
+
padding: 0px;
-
        margin: 0px;
+
margin: 0px;
-
        width: 30px;
+
width: 30px;
-
        text-align: center;
+
text-align: center;
-
        font-family: Arial;
+
font-family: Arial;
-
        font-size: 10px;
+
font-size: 10px;
-
        font-weight: normal;    /* options are normal, bold, bolder, lighter */
+
font-weight: normal;    /* options are normal, bold, bolder, lighter */
-
        background-color: transparent;  
+
background-color: transparent;  
-
    }
+
}
-
    #timer {
+
#timer {
-
        position: relative;  
+
position: relative;  
-
        top: 0px;  
+
top: 0px;  
-
        left: 0px;  
+
left: 0px;  
-
        margin: 5px auto;  
+
margin: 5px auto;  
-
        text-align: center;  
+
text-align: center;  
-
        width: 260px;
+
width: 260px;
-
        height: 26px;
+
height: 26px;
-
        border: none;
+
border: none;
-
        padding: 10px 5px 20px 5px;  
+
padding: 10px 5px 20px 5px;  
-
        background: #000000;   /* may change to another color, or to "transparent" */
+
background: #000000;     /* may change to another color, or to "transparent" */
-
        border-radius: 20px;
+
border-radius: 20px;
-
        box-shadow: 0 0 10px #000000; /* change to "none" if you don't want a shadow */
+
box-shadow: 0 0 10px #000000; /* change to "none" if you don't want a shadow */
-
    }
+
}
-
    </style>
+
</style>
-
    <script type="text/javascript">
+
<script type="text/javascript">
-
    /*
+
/*
-
    Count down until any date script-
+
Count down until any date script-
-
    By JavaScript Kit (www.javascriptkit.com)
+
By JavaScript Kit (www.javascriptkit.com)
-
    Over 200+ free scripts here!
+
Over 200+ free scripts here!
-
    Modified by Robert M. Kuhnhenn, D.O.  
+
Modified by Robert M. Kuhnhenn, D.O.  
-
    (www.rmkwebdesign.com/Countdown_Timers/)
+
(www.rmkwebdesign.com/Countdown_Timers/)
-
    on 5/30/2006 to count down to a specific date AND time,
+
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
+
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.
+
time zone offset, and on 7/12/2012 to digital numbers.
-
    */
+
*/
-
    /*   
+
/*   
-
    Change the items noted in light blue below to create your countdown target
+
CHANGE THE ITEMS BELOW TO CREATE YOUR COUNTDOWN TARGET DATE AND ANNOUNCEMENT
-
    date and announcement once the target date and time are reached.
+
ONCE THE TARGET DATE AND TIME ARE REACHED.
-
    */
+
*/
-
    var note="Winter has arrived!";   /* -->Enter what you want the script to  
+
var note="Winter has arrived!"; /* -->Enter what you want the script to  
-
                                            display when the target date and time  
+
      display when the target date and time  
-
                                            are reached, limit to 25 characters */
+
      are reached, limit to 25 characters */
-
    var year=2012;      /* -->Enter the count down target date YEAR */
+
var year=2012;      /* -->Enter the count down target date YEAR */
-
    var month=12;      /* -->Enter the count down target date MONTH */
+
var month=12;      /* -->Enter the count down target date MONTH */
-
    var day=21;        /* -->Enter the count down target date DAY */
+
var day=21;        /* -->Enter the count down target date DAY */
-
    var hour=6;        /* -->Enter the count down target date HOUR (24 hour  
+
var hour=6;        /* -->Enter the count down target date HOUR (24 hour clock) */
-
                              clock) */
+
var minute=12;      /* -->Enter the count down target date MINUTE */
-
    var minute=12;      /* -->Enter the count down target date MINUTE */
+
var tz=-5;          /* -->Offset for your timezone in hours from UTC (see  
-
    var tz=-5;          /* -->Offset for your timezone in hours from UTC (see  
+
  http://wwp.greenwichmeantime.com/index.htm to find  
-
                              http://wwp.greenwichmeantime.com/index.htm to find  
+
  the timezone offset for your location) */
-
                              the timezone offset for your location) */
+
-
    //-->    DO NOT CHANGE THE CODE BELOW!    <--
+
//-->    DO NOT CHANGE THE CODE BELOW!    <--
-
    d1 = new Image(); d1.src = "digital-numbers/1.png";
+
d1 = new Image(); d1.src = "digital-numbers/1.png";
-
    d2 = new Image(); d2.src = "digital-numbers/2.png";
+
d2 = new Image(); d2.src = "digital-numbers/2.png";
-
    d3 = new Image(); d3.src = "digital-numbers/3.png";
+
d3 = new Image(); d3.src = "digital-numbers/3.png";
-
    d4 = new Image(); d4.src = "digital-numbers/4.png";
+
d4 = new Image(); d4.src = "digital-numbers/4.png";
-
    d5 = new Image(); d5.src = "digital-numbers/5.png";
+
d5 = new Image(); d5.src = "digital-numbers/5.png";
-
    d6 = new Image(); d6.src = "digital-numbers/6.png";
+
d6 = new Image(); d6.src = "digital-numbers/6.png";
-
    d7 = new Image(); d7.src = "digital-numbers/7.png";
+
d7 = new Image(); d7.src = "digital-numbers/7.png";
-
    d8 = new Image(); d8.src = "digital-numbers/8.png";
+
d8 = new Image(); d8.src = "digital-numbers/8.png";
-
    d9 = new Image(); d9.src = "digital-numbers/9.png";
+
d9 = new Image(); d9.src = "digital-numbers/9.png";
-
    d0 = new Image(); d0.src = "digital-numbers/0.png";
+
d0 = new Image(); d0.src = "digital-numbers/0.png";
-
    bkgd = new Image(); bkgd.src = "digital-numbers/bkgd.gif";
+
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");
+
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
-
    function countdown(yr,m,d,hr,min){
+
function countdown(yr,m,d,hr,min){
-
        theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
+
theyear=yr;themonth=m;theday=d;thehour=hr;theminute=min;
-
        var today=new Date();
+
var today=new Date();
-
        var todayy=today.getYear();
+
var todayy=today.getYear();
-
        if (todayy < 1000) {todayy+=1900;}
+
if (todayy < 1000) {todayy+=1900;}
-
        var todaym=today.getMonth();
+
var todaym=today.getMonth();
-
        var todayd=today.getDate();
+
var todayd=today.getDate();
-
        var todayh=today.getHours();
+
var todayh=today.getHours();
-
        var todaymin=today.getMinutes();
+
var todaymin=today.getMinutes();
-
        var todaysec=today.getSeconds();
+
var todaysec=today.getSeconds();
-
        var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
+
var todaystring1=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec;
-
        var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
+
var todaystring=Date.parse(todaystring1)+(tz*1000*60*60);
-
        var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
+
var futurestring1=(montharray[m-1]+" "+d+", "+yr+" "+hr+":"+min);
-
        var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
+
var futurestring=Date.parse(futurestring1)-(today.getTimezoneOffset()*(1000*60));
-
        var dd=futurestring-todaystring;
+
var dd=futurestring-todaystring;
-
        var dday=Math.floor(dd/(60*60*1000*24)*1);
+
var dday=Math.floor(dd/(60*60*1000*24)*1);
-
        var dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*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 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);
+
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){
+
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=0){
-
            document.getElementById('note').innerHTML=note;
+
document.getElementById('note').innerHTML=note;
-
            document.getElementById('note').style.display="block";
+
document.getElementById('note').style.display="block";
-
            document.getElementById('countdown').style.display="none";
+
document.getElementById('countdown').style.display="none";
-
            clearTimeout(startTimer);
+
clearTimeout(startTimer);
-
            return;
+
return;
-
        }
+
}
-
        else {
+
else {
-
            document.getElementById('note').style.display="none";
+
document.getElementById('note').style.display="none";
-
            document.getElementById('timer').style.display="block";
+
document.getElementById('timer').style.display="block";
-
            startTimer = setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",500);
+
startTimer = setTimeout("countdown(theyear,themonth,theday,thehour,theminute)",500);
-
        }
+
}
-
        convert(dday,dhour,dmin,dsec);
+
convert(dday,dhour,dmin,dsec);
-
    }
+
}
-
    function convert(d,h,m,s) {
+
function convert(d,h,m,s) {
-
        if (!document.images) return;
+
if (!document.images) return;
-
        if (d <= 9) {
+
if (d <= 9) {
-
            document.images.day1.src = bkgd.src;
+
document.images.day1.src = bkgd.src;
-
            document.images.day2.src = bkgd.src;
+
document.images.day2.src = bkgd.src;
-
            document.images.day3.src = eval("d"+d+".src");
+
document.images.day3.src = eval("d"+d+".src");
-
        }
+
}
-
        else if (d <= 99) {
+
else if (d <= 99) {
-
            document.images.day1.src = bkgd.src;
+
document.images.day1.src = bkgd.src;
-
            document.images.day2.src = eval("d"+Math.floor(d/10)+".src");
+
document.images.day2.src = eval("d"+Math.floor(d/10)+".src");
-
            document.images.day3.src = eval("d"+(d%10)+".src");
+
document.images.day3.src = eval("d"+(d%10)+".src");
-
        }
+
}
-
        else {
+
else {
-
            document.images.day1.src = eval("d"+Math.floor(d/100)+".src");
+
document.images.day1.src = eval("d"+Math.floor(d/100)+".src");
-
            var day = d.toString();
+
var day = d.toString();
-
            day = day.substr(1,1);
+
day = day.substr(1,1);
-
            day = parseInt(day);
+
day = parseInt(day);
-
            document.images.day2.src = eval("d"+day+".src");
+
document.images.day2.src = eval("d"+day+".src");
-
            document.images.day3.src = eval("d"+(d%10)+".src");
+
document.images.day3.src = eval("d"+(d%10)+".src");
-
        }
+
}
-
        if (h <= 9) {
+
if (h <= 9) {
-
            document.images.h1.src = d0.src;
+
document.images.h1.src = d0.src;
-
            document.images.h2.src = eval("d"+h+".src");
+
document.images.h2.src = eval("d"+h+".src");
-
        }
+
}
-
        else {
+
else {
-
            document.images.h1.src = eval("d"+Math.floor(h/10)+".src");
+
document.images.h1.src = eval("d"+Math.floor(h/10)+".src");
-
            document.images.h2.src = eval("d"+(h%10)+".src");
+
document.images.h2.src = eval("d"+(h%10)+".src");
-
        }
+
}
-
        if (m <= 9) {
+
if (m <= 9) {
-
            document.images.m1.src = d0.src;
+
document.images.m1.src = d0.src;
-
            document.images.m2.src = eval("d"+m+".src");
+
document.images.m2.src = eval("d"+m+".src");
-
        }
+
}
-
        else {
+
else {
-
            document.images.m1.src = eval("d"+Math.floor(m/10)+".src");
+
document.images.m1.src = eval("d"+Math.floor(m/10)+".src");
-
            document.images.m2.src = eval("d"+(m%10)+".src");
+
document.images.m2.src = eval("d"+(m%10)+".src");
-
        }
+
}
-
        if (s <= 9) {
+
if (s <= 9) {
-
            document.images.s1.src = d0.src;
+
document.images.s1.src = d0.src;
-
            document.images.s2.src = eval("d"+s+".src");
+
document.images.s2.src = eval("d"+s+".src");
-
        }
+
}
-
        else {
+
else {
-
            document.images.s1.src = eval("d"+Math.floor(s/10)+".src");
+
document.images.s1.src = eval("d"+Math.floor(s/10)+".src");
-
            document.images.s2.src = eval("d"+(s%10)+".src");
+
document.images.s2.src = eval("d"+(s%10)+".src");
-
        }
+
}
-
    }
+
}
-
    </script>
+
</script>
</head>
</head>
<body onload="countdown(year,month,day,hour,minute)">
<body onload="countdown(year,month,day,hour,minute)">
     <div id="holder">
     <div id="holder">
-
        <div id="timer">
+
<div id="timer">
-
            <div id="note"></div>
+
<div id="note"></div>
-
            <div id="countdown">
+
<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="day1">
-
                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="day2">
+
<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 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 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="h1">
-
                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="h2">
+
<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 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="m1">
-
                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="m2">
+
<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 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="s1">
-
                <img height=21 src="digital-numbers/bkgd.gif" width=16 name="s2">
+
<img height=21 src="digital-numbers/bkgd.gif" width=16 name="s2">
-
                <div id="title">
+
<div id="title">
-
                    <div class="title" style="position: absolute; top: 36px; left: 42px">DAYS</div>
+
<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: 105px">HRS</div>
-
                    <div class="title" style="position: absolute; top: 36px; left: 156px">MIN</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 class="title" style="position: absolute; top: 36px; left: 211px">SEC</div>
-
                </div>
+
</div>
-
            </div>
+
</div>
-
        </div>
+
</div>
-
    </div>
+
</div>
</body>
</body>
</html>
</html>
<forum_subtle/>
<forum_subtle/>

Revision as of 14:13, 11 June 2013



DAYS
HRS
MIN
SEC
<forum_subtle/>

Retrieved from "http://2013hs.igem.org/Team:AUC_TURKEY/Test"