Archive for 2016-02-14

Widged Time blog 




HTML 

<div class="clock">

<div id="Date"></div>

<ul>

<li id="hours"></li>

<li id="point">:</li>

<li id="min"></li>

<li id="point">:</li>

<li id="sec"></li>

</ul>

</div>







CSS 

<style>

.clock {width: 240px;margin: 0 auto;padding: 30px;

color: #FFF;background:#111211;}

.clock ul {width: 220px;margin: 0 auto;padding: 0;

list-style: none;text-align: center}

.clock ul li {display: inline;font-size: 2em;

text-align: center;

font-family: "Arial", Helvetica, sans-serif;}

#Date { font-family: 'Arial', Helvetica, sans-serif;

font-size: 16px;text-align: center;padding-bottom: 40px;}

#point {position: relative;

-moz-animation: mymove 1s ease infinite;

-webkit-animation: mymove 1s ease infinite;

padding-left: 10px;padding-right: 10px}



/* Animasi Detik Kedap - Kedip */

@-webkit-keyframes mymove 

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }}



@-moz-keyframes mymove 

{

0% {opacity:1.0; text-shadow:0 0 20px #00c6ff;}

50% {opacity:0; text-shadow:none; }

100% {opacity:1.0; text-shadow:0 0 20px #00c6ff; }}

</style>
Widged time blog 



SCRIPT 
//http://agussalikur.blogspot.com
$(document).ready(function() {
  
// Making 2 variable month and day

var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]; 

var dayNames= ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]



// make single object

var newDate = new Date();

// make current time

newDate.setDate(newDate.getDate());

// setting date and time

$('#Date').html(dayNames[newDate.getDay()] + " " + newDate.getDate() + ' ' + monthNames[newDate.getMonth()] + ' ' + newDate.getFullYear());





setInterval( function() {

// Create a newDate() object and extract the seconds of the current time 

var seconds = new Date().getSeconds();

// Add a leading zero to seconds value

$("#sec").html(( seconds < 10 ? "0" : "" ) + seconds);

},1000);



setInterval( function() {

// Create a newDate() object and extract the minutes of the current time 

var minutes = new Date().getMinutes();

// Add a leading zero to the minutes value

$("#min").html(( minutes < 10 ? "0" : "" ) + minutes);

},1000);



setInterval( function() {

// Create a newDate() object and extract the hours of the current time 

var hours = new Date().getHours();

// Add a leading zero to the hours value

$("#hours").html(( hours < 10 ? "0" : "" ) + hours);

}, 1000); 





$('#time').html(hours+":"+minutes);

$('#weekday').html(dayNames[newDate.getDay()]);

$('#monthday').html(newDate.getDate() + ' ' + monthNames[newDate.getMonth()]);

$('#year').html(newDate.getFullYear());



  $.simpleWeather({

    woeid: '2357536', //2357536

    location: 'jakarta, CO',

    unit: 'f',

    success: function(weather) {

      html = '<h2>'+weather.temp+'&deg;'+weather.units.temp+'</h2>';

      html += '<p>'+weather.currently+'</p>';

      html += '<p>wind: '+weather.wind.direction+' '+weather.wind.speed+'</p>';

      html += '<p>humidity: '+weather.humidity+'</p>';

      

      html+='<p>';

      //for(var i=0;i<weather.forecast.length;i++) {

          for(var i=0;i<3;i++) {

        html += weather.forecast[i].day+': '+weather.forecast[i].high+'&deg;'+'&nbsp;';

      }

  html+='</p>';

      $("#weather").html(html);

    },

    error: function(error) {

      $("#weather").html('<p>'+error+'</p>');

    }

  });  

  

  

});
Widged time blog