|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <!-- styles for countdown -->
| |
| − | <style>
| |
| − | body {
| |
| − | text-align: right;
| |
| − | /* background: #00ECB9;*/
| |
| − | font-family: sans-serif;
| |
| − | font-weight: 100;
| |
| − | }
| |
| | | | |
| − | h1 {
| |
| − | margin-right: 30px;
| |
| − | color: black;
| |
| − | font-weight: 0;
| |
| − | font-size: 10px;
| |
| − | /* margin: 20px 0px 10px;*/
| |
| − | }
| |
| − |
| |
| − | #clockdiv {
| |
| − | font-family: sans-serif;
| |
| − | color: #fff;
| |
| − | display: inline-block;
| |
| − | font-weight: 10;
| |
| − | text-align: center;
| |
| − | font-size: 10px;
| |
| − | }
| |
| − |
| |
| − | #clockdiv>div {
| |
| − | padding: 5px;
| |
| − | border-radius: 3px;
| |
| − | /* background: #00BF96;*/
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | #clockdiv div>span {
| |
| − | padding: 5px;
| |
| − | border-radius: 3px;
| |
| − | background: black;
| |
| − | display: inline-block;
| |
| − | }
| |
| − |
| |
| − | .smalltext {
| |
| − | color: black;
| |
| − | padding-top: 5px;
| |
| − | font-size: 10px;
| |
| − | }
| |
| − | </style>
| |
| − | <!-- end of style for countdown -->
| |
| | </head> | | </head> |
| | | | |
| Line 59: |
Line 13: |
| | <img src="https://static.igem.org/mediawiki/2016/8/84/T--Freiburg--Logo.png" style="width:300px"/> | | <img src="https://static.igem.org/mediawiki/2016/8/84/T--Freiburg--Logo.png" style="width:300px"/> |
| | </a> | | </a> |
| − |
| |
| − | <h1 style="font-size: 10px; margin-right:30px;">Wiki Freeze Countdown</h1>
| |
| − | <div id="clockdiv">
| |
| − | <div>
| |
| − | <span class="days"></span>
| |
| − | <div class="smalltext">Days</div>
| |
| − | </div>
| |
| − | <div>
| |
| − | <span class="hours"></span>
| |
| − | <div class="smalltext">Hours</div>
| |
| − | </div>
| |
| − | <div>
| |
| − | <span class="minutes"></span>
| |
| − | <div class="smalltext">Minutes</div>
| |
| − | </div>
| |
| − | <div>
| |
| − | <span class="seconds"></span>
| |
| − | <div class="smalltext">Seconds</div>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| | </p> | | </p> |
| | | | |
| | | | |
| | | | |
| − | <script>
| |
| − | console.log("hello js");
| |
| − |
| |
| − | function getTimeRemaining(endtime) {
| |
| − | var t = Date.parse(endtime) - Date.parse(new Date());
| |
| − | var seconds = Math.floor((t / 1000) % 60);
| |
| − | var minutes = Math.floor((t / 1000 / 60) % 60);
| |
| − | var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
| |
| − | var days = Math.floor(t / (1000 * 60 * 60 * 24));
| |
| − | return {
| |
| − | 'total': t,
| |
| − | 'days': days,
| |
| − | 'hours': hours,
| |
| − | 'minutes': minutes,
| |
| − | 'seconds': seconds
| |
| − | };
| |
| − | }
| |
| − |
| |
| − | function initializeClock(id, endtime) {
| |
| − | var clock = document.getElementById(id);
| |
| − | var daysSpan = clock.querySelector('.days');
| |
| − | var hoursSpan = clock.querySelector('.hours');
| |
| − | var minutesSpan = clock.querySelector('.minutes');
| |
| − | var secondsSpan = clock.querySelector('.seconds');
| |
| − |
| |
| − | function updateClock() {
| |
| − | var t = getTimeRemaining(endtime);
| |
| − |
| |
| − | daysSpan.innerHTML = t.days;
| |
| − | hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
| |
| − | minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
| |
| − | secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
| |
| − |
| |
| − | if (t.total <= 0) {
| |
| − | clearInterval(timeinterval);
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | updateClock();
| |
| − | var timeinterval = setInterval(updateClock, 1000);
| |
| − | }
| |
| − |
| |
| − | // var deadline = new Date(Date.parse(new Date()) + 31 * 24 * 60 * 60 * 1000);
| |
| − | var deadline = new Date(2016,9,19,0,0,0,0)
| |
| | | | |
| − | initializeClock('clockdiv', deadline);
| |
| − | </script>
| |
| | | | |
| | </body> | | </body> |
| | | | |
| | </html> | | </html> |
