Team:Kyoto/TimeLimit

From 2013.igem.org

(Difference between revisions)
m
 
(4 intermediate revisions not shown)
Line 2: Line 2:
<script type="text/javascript">
<script type="text/javascript">
function update() {
function update() {
-
  var hour = document.getElementById("hour");
 
-
  var minute = document.getElementById("minute");
 
-
  var second = document.getElementById("second");
 
-
 
   // freeze 20130928 00:00 @ MIT
   // freeze 20130928 00:00 @ MIT
   freeze = new Date(2013, 8, 28, 4, 0, 0);
   freeze = new Date(2013, 8, 28, 4, 0, 0);
Line 19: Line 15:
   var time = freeze.getTime() - utc.getTime();
   var time = freeze.getTime() - utc.getTime();
   time = Math.floor(time / 1000);
   time = Math.floor(time / 1000);
 +
    var wrapper = document.getElementById("limit");
   if (time < 0) {
   if (time < 0) {
-
    var wrapper = document.getElementById("limit_wrapper");
 
     wrapper.style.color = "#f00";
     wrapper.style.color = "#f00";
     wrapper.innerHTML = "Time Up!";
     wrapper.innerHTML = "Time Up!";
     return;
     return;
   } else if (time <= 1 * 3600) {
   } else if (time <= 1 * 3600) {
-
    var wrapper = document.getElementById("limit_wrapper");
 
     wrapper.style.color = "#f00";
     wrapper.style.color = "#f00";
   } else if (time <= 24 * 3600) {
   } else if (time <= 24 * 3600) {
-
    var wrapper = document.getElementById("limit_wrapper");
 
     wrapper.style.color = "#ff0";
     wrapper.style.color = "#ff0";
   }
   }
-
   second.innerHTML = ('0' + (time % 60)).slice(-2);
+
   var second = ('0' + (time % 60)).slice(-2);
   time = Math.floor(time / 60);
   time = Math.floor(time / 60);
-
   minute.innerHTML = ('0' + (time % 60)).slice(-2);
+
   var minute = ('0' + (time % 60)).slice(-2);
   time = Math.floor(time / 60);
   time = Math.floor(time / 60);
-
   hour.innerHTML = time;
+
   var hour = ('0' + (time)).slice(-2);
 +
  wrapper.innerHTML = hour + ':' + minute + ':' + second;
}
}
-
window.onload = function() {
+
function resize() {
-
   var wrapper = document.getElementById("limit_wrapper");
+
   var wrapper = document.getElementById("limit");
-
   var top = window.innerHeight;
+
   var top = 300;
-
   if (top != undefined) {
+
  if (window.innerHeight != undefined) {
-
     wrapper.style.top = (top / 2) + "px";
+
    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();
   update();
   setInterval(function() {
   setInterval(function() {
     update();
     update();
   }, 200);
   }, 200);
-
}
+
};
 +
window.onresize = function() {
 +
  resize();
 +
};
</script>
</script>
<style type="text/css">
<style type="text/css">
-
#limit_wrapper {
+
#limit {
   position: fixed;
   position: fixed;
   width: 1000px;
   width: 1000px;
Line 65: Line 86:
   color: #ddd;
   color: #ddd;
}
}
-
#hour, #minute, #second {
+
 
-
  height : 200px;
+
-
  width: 300px;
+
-
  float:left;
+
-
  text-align: right;
+
-
}
+
-
.separate{
+
-
  width: 50px;
+
-
  height: 150px;
+
-
  font-size: 150px;
+
-
  line-height: 200px;
+
-
  content: ":";
+
-
  float: left;
+
-
}
+
body {
body {
   background-color: #000;
   background-color: #000;
}
}
-
#p-logo, #search-controls, #footer-box, #catlinks, .firstHeading {
+
#p-logo, #search-controls, #footer-box, #catlinks, .left-menu, .firstHeading {
   display: none;
   display: none;
}
}
Line 93: Line 101:
}
}
</style>  
</style>  
-
<div id="limit_wrapper">
+
<div id="limit"></div>
-
  <div id="hour"></div>
+
-
  <div class="separate">:</div>
+
-
  <div id="minute"></div>
+
-
  <div class="separate">:</div>
+
-
  <div id="second"></div>
+
-
</div>
+
</html>
</html>

Latest revision as of 14:55, 26 September 2013

Retrieved from "http://2013.igem.org/Team:Kyoto/TimeLimit"