Fire JS Bin - NightAndDay

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

$('document').ready(function () {
  bld();
});

function check(condition, array) {
  var code = 0;
  for (i = 0; i < array.length; i++) {
    if (condition == array[i]) {
      code = 1;
    }
  }
  return code;
}

function cr_moon() {
  var canvas = document.getElementById("c_planet");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "#FFF";
    ctx.arc(50, 50, 45, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = "#4D4D4D";
    ctx.arc(47, 47, 45, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
  }
}

function cr_sun() {
  var canvas = document.getElementById("c_planet");
  if (canvas.getContext) {
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.fillStyle = "#FFF";
    ctx.arc(50, 50, 45, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.fill();
    ctx.save();
  }
}

function rin() {
  var the_height = $(window).height();
  var the_witdth = $(window).width();
  $("#rin").height(the_height);
  $("#rin").width(the_witdth);
  $("#rin2").height(the_height);
  $("#rin2").width(the_witdth);
  $("#rin").addClass('pl');
  $("#rin2").addClass('pl');
  $("#rin2").addClass('pl2');
  var timer = setInterval(rining, 400);

function sn() {
  var the_height = $(window).height();
  var the_witdth = $(window).width();
  $("#sn").height(the_height);
  $("#sn").width(the_witdth);
  $("#sn2").height(the_height);
  $("#sn2").width(the_witdth);
  $("#sn").addClass('neige');
  $("#sn2").addClass('neige');
  $("#sn2").addClass('neige2');
  var timer = setInterval(sning, 400);

function cloud() {
  for (i = 0; i < 10; i++) {
    $("#clouds").append("<canvas id='cloud" + i + "' ></canvas>");
    var canvas = document.getElementById("cloud" + i);
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#FFF";
      ctx.beginPath();
      ctx.lineTo(0, 0);
      ctx.lineTo(200, 0);
      ctx.lineTo(300, 30);
      ctx.lineTo(100, 30);
      ctx.fill();
    }
  }
  $("#cloud0").css("top", "50px").css("left", "50px");
  $("#cloud1").css("top", "70px").css("left", "70px");
  $("#cloud2").css("top", "30px").css("left", "50px");
  $("#cloud3").css("top", "100px").css("left", "90px");
  $("#cloud4").css("top", "20px").css("left", "30px");
  $("#cloud5").css("top", "50px").css("left", "200px");
  $("#cloud6").css("top", "90px").css("left", "250px");
  $("#cloud7").css("top", "80px").css("left", "500px");
  $("#cloud8").css("top", "40px").css("left", "300px");
  $("#cloud9").css("top", "70px").css("left", "350px");
  var timer = setInterval(move_cloud, 2500);

function fo() {
  for (i = 0; i < 10; i++) {
    $("#fo").append("<canvas id='fo" + i + "' ></canvas>");
    var canvas = document.getElementById("fo" + i);
    if (canvas.getContext) {
      var ctx = canvas.getContext("2d");
      ctx.fillStyle = "#FFF";
      ctx.beginPath();
      ctx.lineTo(0, 0);
      ctx.lineTo(200, 0);
      ctx.lineTo(300, 30);
      ctx.lineTo(100, 30);
      ctx.fill();
    }
  }
  $("#fo0").css("top", "50px").css("left", "50px");
  $("#fo1").css("top", "70px").css("left", "70px");
  $("#fo2").css("top", "30px").css("left", "50px");
  $("#fo3").css("top", "100px").css("left", "90px");
  $("#fo4").css("top", "20px").css("left", "30px");
  $("#fo5").css("top", "50px").css("left", "200px");
  $("#fo6").css("top", "90px").css("left", "250px");
  $("#fo7").css("top", "80px").css("left", "500px");
  $("#fo8").css("top", "40px").css("left", "300px");
  $("#fo9").css("top", "70px").css("left", "350px");
  var timer = setInterval(move_fo, 2500);

function thunder() {
  var the_height = $(window).height();
  var the_witdth = $(window).width();
  var timer = setInterval(light, 5000);

function light() {
    var css_obj = {
      "width": the_witdth,
      "height": the_height,
      "display": "block",
      "opacity": "0"
    }
    $("#thunder").css(css_obj).animate({
      opacity: 0.9
    }, 25).animate({
      opacity: 0
    }, 25).animate({
      opacity: 0.9
    }, 25).animate({
      opacity: 0
    }, 250, function () {
      $("#thunder").css("display", "none")
    });
  }
}

function translate_month(m) {
  var t_month = new Array('JANUARY', 'FEBRUARY', 'MARCH', 'APRIL', 'MAY', 'JUNE', 'JULY', 'AUGUST', 'SEPTEMBER', 'OCTOBER', 'NOVEMBER', 'DECEMBER');
  return t_month[m];
}

function tr_d(d) {
  var t_day = new Array('sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday');
  return t_day[d];
}
$.YQL = function (query, callback) {
  var encodedQuery = encodeURIComponent(query.toLowerCase()),
      url = 'http://query.yahooapis.com/v1/public/yql?q=' + encodedQuery + '&format=json&callback=?';
  $.getJSON(url, callback);
};

<!doctype html>
<html>
  
  <head>
    <meta charset="utf-8">
    <title>Night & Day</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  </head>
  
  <body>
    <div id="thunder"> </div>
    <div id="in_g">
      <p><span id="city"></span>, <span id="country"></span></p>
      <p><span id="temp_f"></span> °F / <span id="temp_c"></span> °C</p>
      <p><span id="hour"></span> : <span id="minutes"></span></p>
      <p id="condition"></p>
      <p>—</p>
      <p class="aut">
        10k app by<br />
        <a href="http://9ko.fr" title="">Guillaume Allard</a><br/>
        & <a href="http://samuelbarbosa.net" title="">Samuel Barbosa</a>
      </p>
      <p>—</p>
    </div>
    <div id="rin"></div>
    <div id="rin2"></div>
    <div id="sn"></div>
    <div id="sn2"></div>
    <div id="clouds"></div>
    <div id="fo"></div>
    <div id="sky">
      <div id="planet"><canvas id="c_planet"></canvas></div>
      <div id="in_c">
        <p id="day"></p>
        <p id="date">– <span id="the_month"></span> <span id="the_day"></span>, <span id="the_year"></span> –</p>
      </div>
    </div>
    <div id="hz"> </div>
  </body>

</html>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, strong, var, ol, ul, li { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline }
body { line-height:1; color:#000; background:white }
html, body { width:100%; height:100%; position:relative; font-family:Helvetica, Arial, sans-serif }
#in_g { position:fixed; top:14px; left:14px; width:180px; z-index:900 }
.aut { opacity:0.5 }
#in_g p { font-size:14px; line-height:20px; color:#666; z-index:1200 }
#in_g p a { text-decoration:none; color:#666; border-bottom:1px dotted }
#in_g p a:hover { color:#000 }
#in_c { width:100%; text-align:center; position:absolute; height:70%; top:30%; color:#808080; z-index:1000 }
#day { text-transform:lowercase; font-size:60px; margin:0 0 2px 0 }
#date { text-transform:uppercase; font-size:10px; letter-spacing:2px }
#sky { width:100%; height:70% }
#hz { position:absolute; bottom:0; width:100%; height:30% }
#planet { width:100px; height:100px; position:absolute; top:15%; left:50%; margin:0 0 0 -50px }
#thunder { display:none; z-index:1200; background-color:#fff; position:absolute }
#rin, #rin2, #sn, #sn2 { position:absolute; top:0; left:0; z-index:300 }
#rin2 { z-index:302 }
#sn { z-index:312 }
#sn2 { z-index:322 }
.pl { background-image:url("/attach/r.png") }
.pl2 { background-position:-50px -50px; opacity:.5 }
.neige { background-image:url("/attach/s.png") }
.neige2 { background-position:-50px -50px; opacity:0.5 }
#clouds, #fo { opacity:0.5; width:700px; height:400px; position:absolute; margin-left:-350px; top:15%; left:50%; z-index:2000 }
#clouds canvas, #fo canvas { position:absolute }
#fo { top:50%; z-index:2200; height: 300px }

Pop out