Team:Kyoto/TimeLimit

From 2013.igem.org

(Difference between revisions)
m
 
(7 intermediate revisions not shown)
Line 2: Line 2:
<script type="text/javascript">
<script type="text/javascript">
function update() {
function update() {
-
  var wrapper = document.getElementById("limit_wrapper");
 
-
  var hour = document.getElementById("hour");
 
-
  var minute = document.getElementById("minute");
 
-
  var second = document.getElementById("second");
 
-
  var top = document.documentElement.clientHeigh / 2;
 
-
  wrapper.style.top = top + "px";
 
-
 
   // 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 time = Date.UTC(
+
   var utc = new Date(
-
       date.getUTCYear(),
+
       date.getUTCFullYear(),
       date.getUTCMonth(),
       date.getUTCMonth(),
 +
      date.getUTCDate(),
       date.getUTCHours(),
       date.getUTCHours(),
       date.getUTCMinutes(),
       date.getUTCMinutes(),
       date.getUTCSeconds());
       date.getUTCSeconds());
-
   time -= freeze;
+
   var time = freeze.getTime() - utc.getTime();
   time = Math.floor(time / 1000);
   time = Math.floor(time / 1000);
-
   second.innerHTML = time % 60;
+
    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);
   time = Math.floor(time / 60);
-
   minute.innerHTML = time % 60;
+
   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;
 +
}
 +
 
 +
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_wrapper {
+
#limit {
   position: fixed;
   position: fixed;
   width: 1000px;
   width: 1000px;
   height: 200px;
   height: 200px;
   left: 50%;
   left: 50%;
 +
  top: 300px;
   margin-left: -500px;
   margin-left: -500px;
-
}
+
   margin-top: -100px;
-
#hour, #minute, #second {
+
-
   height : 200px;
+
-
  width: 300px;
+
   font-size: 200px;
   font-size: 200px;
   line-height: 200px;
   line-height: 200px;
 +
  text-align: center;
   color: #ddd;
   color: #ddd;
-
  float:left;
 
-
  text-align: right;
 
-
}
 
-
.separate{
 
-
  width: 50px;
 
-
  height: 150px;
 
-
  font-size: 150px;
 
-
  line-height: 200px;
 
-
  color: #ddd;
 
-
  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 73: 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"