Template:Kyoto/small countdown

From 2014.igem.org

(Difference between revisions)
 
(17 intermediate revisions not shown)
Line 1: Line 1:
 +
<!-- http://github.com/iGEMKyoto/wiki_freeze_alert -->
 +
<div id="kyoto-alert">
 +
    <div id="kyoto-alert-display">count down</div>
 +
    <div id="kyoto-alert-popup">{{{popup|}}}</div>
 +
</div>
<html>
<html>
-
<div id="kyoto_alert">count down</div>
 
<style type="text/css">
<style type="text/css">
-
#kyoto_alert {
+
#kyoto-alert {
   position: fixed;
   position: fixed;
   top: 30px;
   top: 30px;
   right: 10px;
   right: 10px;
-
  background-color: #333;
 
-
  border: 4px solid #000;
 
   height: 30px;
   height: 30px;
 +
  width: 300px;
 +
  padding: 30px 10px;
 +
  display: none;
 +
  z-index: 300;
 +
 +
  /* text */
   line-height: 30px;
   line-height: 30px;
   font-size: 30px;
   font-size: 30px;
-
   color: #ddd;
+
   font-family: sans-serif;
 +
  text-align: center;
   text-decoration: none;
   text-decoration: none;
-
   padding: 30px 10px;
+
 
-
   display: none;
+
   /* color */
 +
  background-color: #aaa;
 +
   border: 4px solid #888;
 +
  color: #eee;
 +
 
 +
  /* box sizing */
 +
  box-sizing: content-box;
 +
  -webkit-box-sizing: content-box;
 +
  -moz-box-sizing: content-box;
 +
 
 +
  /* border radius */
 +
  border-radius: 20px;
 +
  -webkit-border-radius: 20px;
 +
  -moz-border-radius: 20px;
 +
 
 +
  /* select cancel */
 +
  user-select: none;
 +
  -webkit-user-select: none;
 +
  -moz-user-select: none;
 +
  -khtml-user-select: none;
 +
}
 +
#kyoto-alert:hover {
 +
    cursor: move;
 +
}
 +
#kyoto-alert-display {
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
#kyoto-alert-popup {
 +
    position: relative;
 +
    top: 35px;
 +
    color: #000;
 +
 
 +
    /* text-shadow */
 +
    -webkit-text-shadow: 0px 0px 6px #fff;
 +
    -moz-text-shadow: 0px 0px 6px #fff;
 +
    text-shadow: 0px 0px 6px #fff;
 +
 
 +
    display: none;
 +
}
 +
#kyoto-alert:hover #kyoto-alert-popup {
 +
    display: block;
}
}
</style>
</style>
 +
 +
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
 +
<script type="text/javascript">
<script type="text/javascript">
-
$(function() {
+
//<![CDATA[
-
/* October 17 wiki FREEZE at 11:59PM EDT */
+
$(function(){
-
var freeze = Date.UTC(2014, 9, 17, 3, 59, 0);
+
 
 +
/* October 17 wiki FREEZE at 12:00PM EDT */
 +
var year = </html>{{{year|2014}}}<html>;
 +
var month = </html>{{{month|10}}}<html>;
 +
var day = </html>{{{day|18}}}<html>;
 +
var freeze = Date.UTC(year, month-1, day, 4, 00, 0);
function get_current_utc() {
function get_current_utc() {
Line 32: Line 90:
         date.getUTCSeconds()
         date.getUTCSeconds()
     );
     );
 +
}
 +
 +
/*
 +
* return array of the quoteient and remainder
 +
*/
 +
function qr(dividend, divisor) {
 +
    return [Math.floor(dividend/divisor),
 +
        dividend%divisor];
 +
}
 +
 +
function repeat_str(str, n) {
 +
    var retval = '';
 +
    for (var i = 0; i < n; i++) {
 +
        retval += str;
 +
    }
 +
    return retval;
 +
}
 +
 +
/*
 +
* transfer Integer to String
 +
*/
 +
function itos(number, figures) {
 +
    return [repeat_str('0', figures-1),number]
 +
        .join('').slice(-figures);
}
}
var timer = setInterval(function() {
var timer = setInterval(function() {
-
     var countdown = document.getElementById("kyoto_alert");
+
     var $countdown = $("#kyoto-alert");
 +
    var $display = $("#kyoto-alert-display");
     var current_utc = get_current_utc();
     var current_utc = get_current_utc();
     var interval = (freeze - current_utc)/1000;
     var interval = (freeze - current_utc)/1000;
     if (interval < 0) {
     if (interval < 0) {
-
         countdown.style.display = "none";
+
         $countdown.hide();
     } else if (interval < 4 * 24 * 3600) {
     } else if (interval < 4 * 24 * 3600) {
         if (interval < 1 * 3600)
         if (interval < 1 * 3600)
-
             countdown.style.color = "#f00";
+
             $display.css("color", "#f00");
         else if (interval < 24 * 3600)
         else if (interval < 24 * 3600)
-
             countdown.style.color = "#ff0";
+
             $display.css("color", "#ff0");
-
         var second = ('0' + (interval % 60)).slice(-2) + 's';
+
         var time = [];
-
         interval = Math.floor(interval / 60);
+
        var second_qr = qr(interval, 60);
-
         var minute = ('0' + (interval % 60)).slice(-2) + 'm';
+
        time.push(itos(second_qr[1], 2) + 's');
-
         interval = Math.floor(interval / 60);
+
         var minute_qr = qr(second_qr[0], 60);
-
        var hour = ('0' + (interval)).slice(-2) + 'h';
+
         time.push(itos(minute_qr[1], 2) + 'm');
-
         var str = hour + " : " + minute + " : " + second;
+
         time.push(itos(minute_qr[0], 2) + 'h');
-
         countdown.innerText = str;
+
         $display.text(time.reverse().join(' : '));
-
        countdown.style.display = "block";
+
         $countdown.show();
     } else {
     } else {
 +
        var time = [];
         interval = Math.floor(interval / 60);
         interval = Math.floor(interval / 60);
-
         var minute = ('0' + (interval % 60)).slice(-2) + 'm';
+
         var minute_qr = qr(interval, 60);
-
         interval = Math.floor(interval / 60);
+
        time.push(itos(minute_qr[1], 2) + 'm');
-
         var hour = ('0' + (interval)).slice(-2) + 'h';
+
         var hour_qr = qr(minute_qr[0], 24);
-
         interval = Math.floor(interval / 24);
+
         time.push(itos(hour_qr[1], 2) + 'h');
-
         var date = ('00' + (interval)).slice(-3) + 'd';
+
         time.push(itos(hour_qr[0], 3) + 'd');
-
         var str = date + " : " + hour + " : " + minute;
+
         $display.text(time.reverse().join(' : '));
-
        countdown.innerText = str;
+
         $countdown.show();
-
        countdown.style.display = "block";
+
     }
     }
}, 200);
}, 200);
 +
 +
$("#kyoto-alert").draggable();
});
});
 +
//]]>
</script>
</script>
</html>
</html>

Latest revision as of 06:12, 10 October 2014

count down

Retrieved from "http://2014.igem.org/Template:Kyoto/small_countdown"