Team:Kyoto/TimeLimit

From 2013.igem.org

(Difference between revisions)
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;
}
}
function resize() {
function resize() {
-
   var wrapper = document.getElementById("limit_wrapper");
+
   var wrapper = document.getElementById("limit");
   var top = 300;
   var top = 300;
   if (window.innerHeight != undefined) {
   if (window.innerHeight != undefined) {
Line 62: Line 57:
</script>
</script>
<style type="text/css">
<style type="text/css">
-
#limit_wrapper {
+
#limit {
   position: fixed;
   position: fixed;
   width: 1000px;
   width: 1000px;
Line 75: Line 70:
   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;
Line 103: Line 85:
}
}
</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>

Revision as of 14:49, 26 September 2013