Team:Kyoto/TimeLimit

From 2013.igem.org

(Difference between revisions)
m
 
(8 intermediate revisions not shown)
Line 3: Line 3:
function update() {
function update() {
   // freeze 20130928 00:00 @ MIT
   // freeze 20130928 00:00 @ MIT
-
   freeze = Date.UTC(2013, 8, 28, 0, 0, 0);
+
   freeze = new Date(2013, 8, 28, 4, 0, 0);
   var date = new Date();
   var date = new Date();
-
   var hour = document.getElementById("hour");
+
   var utc = new Date(
-
   var minute = document.getElementById("minute");
+
      date.getUTCFullYear(),
-
   var second = document.getElementById("second");
+
      date.getUTCMonth(),
-
   hour.innerHTML = date.getUTCHours();
+
      date.getUTCDate(),
-
   minute.innerHTML = date.getUTCMinutes();
+
      date.getUTCHours(),
-
   second.innerHTML = date.getUTCSeconds();
+
      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() {
window.onload = function() {
 +
  resize();
   update();
   update();
-
}
+
  setInterval(function() {
 +
    update();
 +
  }, 200);
 +
};
 +
window.onresize = function() {
 +
  resize();
 +
};
</script>
</script>
<style type="text/css">
<style type="text/css">
 +
#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 {
body {
   background-color: #000;
   background-color: #000;
}
}
-
#p-logo, #search-controls, .firstHeading {
+
#p-logo, #search-controls, #footer-box, #catlinks, .left-menu, .firstHeading {
   display: none;
   display: none;
}
}
Line 33: Line 100:
   background-color: transparent;
   background-color: transparent;
}
}
-
 
+
</style>  
-
#hour, #minute, #second {
+
<div id="limit"></div>
-
  width: 100px;
+
-
  height : 200px;
+
-
  font-size: 180px;
+
-
  color: #ddd;
+
-
}
+
-
#hour:after, #minute:after, #second:after {
+
-
  width: 40px;
+
-
  height: 80px;
+
-
  font-size: 60px;
+
-
  color: #ddd;
+
-
}
+
-
#hour:after { content: "hours"; }
+
-
#minute:after { content: "minute"; }
+
-
#second:after { content: "second"; }
+
-
</style>
+
-
<div id="hour"></div>
+
-
<div id="minute"></div>
+
-
<div id="second"></div>
+
</html>
</html>

Latest revision as of 14:55, 26 September 2013

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