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() {
-
  var date = new Date();
 
   // 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-section {
+
#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;
}
}
-
</style>
+
#top-section {
-
<div id="hour"></div>
+
  height: 0px;
-
<div id="minute"></div>
+
}
-
<div id="second"></div>
+
#content {
 +
  border: none;
 +
  background-color: transparent;
 +
}
 +
</style>  
 +
<div id="limit"></div>
</html>
</html>

Latest revision as of 14:55, 26 September 2013