Team:Kyoto/TimeLimit
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <script type="text/javascript"> function update() { var date = new Date(); // freeze 20130928 00:00 @ MIT date = } </script> <style type="text/css"> #top-section { ...") |
|||
(10 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
function update() { | function update() { | ||
- | |||
// freeze 20130928 00:00 @ MIT | // freeze 20130928 00:00 @ MIT | ||
- | date = | + | freeze = new Date(2013, 8, 28, 4, 0, 0); |
+ | |||
+ | var date = new Date(); | ||
+ | var utc = new Date( | ||
+ | date.getUTCFullYear(), | ||
+ | date.getUTCMonth(), | ||
+ | date.getUTCDate(), | ||
+ | date.getUTCHours(), | ||
+ | date.getUTCMinutes(), | ||
+ | date.getUTCSeconds()); | ||
+ | var time = freeze.getTime() - utc.getTime(); | ||
+ | time = Math.floor(time / 1000); | ||
+ | var wrapper = document.getElementById("limit"); | ||
+ | if (time < 0) { | ||
+ | wrapper.style.color = "#f00"; | ||
+ | wrapper.innerHTML = "Time Up!"; | ||
+ | return; | ||
+ | } else if (time <= 1 * 3600) { | ||
+ | wrapper.style.color = "#f00"; | ||
+ | } else if (time <= 24 * 3600) { | ||
+ | wrapper.style.color = "#ff0"; | ||
+ | } | ||
+ | var second = ('0' + (time % 60)).slice(-2); | ||
+ | time = Math.floor(time / 60); | ||
+ | var minute = ('0' + (time % 60)).slice(-2); | ||
+ | time = Math.floor(time / 60); | ||
+ | var hour = ('0' + (time)).slice(-2); | ||
+ | wrapper.innerHTML = hour + ':' + minute + ':' + second; | ||
} | } | ||
+ | |||
+ | function resize() { | ||
+ | var wrapper = document.getElementById("limit"); | ||
+ | var top = 300; | ||
+ | if (window.innerHeight != undefined) { | ||
+ | top = window.innerHeight / 2; | ||
+ | } else if (document.documentElement.clientWidth != undefined) { | ||
+ | top = document.documentElement.clientWidth / 2; | ||
+ | } | ||
+ | wrapper.style.top = top + "px"; | ||
+ | |||
+ | var width = 1000; | ||
+ | if (window.innerWidth != undefined) { | ||
+ | width = window.innerWidth; | ||
+ | } else if (document.documentElement.clientWidth != undefined) { | ||
+ | width = document.documentElement.clientWidth; | ||
+ | } | ||
+ | if (width < 1000) { | ||
+ | wrapper.style.width = width + "px"; | ||
+ | wrapper.style.marginLeft = (-width / 2) + "px"; | ||
+ | var size = width / 5; | ||
+ | wrapper.style.fontSize = size + "px"; | ||
+ | wrapper.style.lineHeight = size + "px"; | ||
+ | wrapper.style.height = size + "px"; | ||
+ | wrapper.style.marginTop = (-size/2) + "px"; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | window.onload = function() { | ||
+ | resize(); | ||
+ | update(); | ||
+ | setInterval(function() { | ||
+ | update(); | ||
+ | }, 200); | ||
+ | }; | ||
+ | |||
+ | window.onresize = function() { | ||
+ | resize(); | ||
+ | }; | ||
</script> | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | #top- | + | #limit { |
+ | position: fixed; | ||
+ | width: 1000px; | ||
+ | height: 200px; | ||
+ | left: 50%; | ||
+ | top: 300px; | ||
+ | margin-left: -500px; | ||
+ | margin-top: -100px; | ||
+ | font-size: 200px; | ||
+ | line-height: 200px; | ||
+ | text-align: center; | ||
+ | color: #ddd; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | background-color: #000; | ||
+ | } | ||
+ | #p-logo, #search-controls, #footer-box, #catlinks, .left-menu, .firstHeading { | ||
display: none; | display: none; | ||
} | } | ||
- | + | #top-section { | |
- | + | height: 0px; | |
- | + | } | |
- | <div id=" | + | #content { |
+ | border: none; | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | </style> | ||
+ | <div id="limit"></div> | ||
</html> | </html> |
Latest revision as of 14:55, 26 September 2013