$(function(){ // $("body").html('

Sorry

Updating. Please come in later.

Warith Vatanaplachaigoon

'); var timezone_standard = new Date().getTimezoneOffset()*60000*-1; $("#date").html("Loading..."); $("#local").html(""); $.get("https://ipinfo.io", function(response) { $("#date").html(new Date().toDateString().split(" ").slice(0,-1).join(" ").replace(/\s/,", ")); $("#local").html(response.city+", "+response.country); setInterval(getT,1); },"jsonp"); function getT() { var time = new Date(new Date(new Date().toISOString()).getTime()-timezone_standard); var now = new Date(); $("#date").html(now.toDateString().split(" ").slice(0,-1).join(" ").replace(/\s/,", ")); var millis = (time.getHours()*60*60*1000)+(time.getMinutes()*60*1000)+(time.getSeconds()*1000)+now.getMilliseconds()+timezone_standard; var hour = millis/3600000; var min = millis/60000%60; var sec = millis/60000%60*60%60; if ($("#analog").css("display")=="block") { var ch = coor(hour,12,60); $("#hour").attr("d","M 150 150 L "+ch.join(" ")); var cm = coor(min,60,100); $("#min").attr("d","M 150 150 L "+cm.join(" ")); var cs = coor(sec,60,120); $("#sec").attr("d","M 150 150 L "+cs.join(" ")); } else { $("#hourD").html(form(Math.floor(hour)%24,2)); $("#minD").html(form(Math.floor(min),2)); $("#secD").html(form(Math.floor(sec),2)); } } function coor(x,y,l) { var ang = ((x%y)/y)*360; var perfAng = ang%90; var q = Math.floor(ang/90); if (q==0) { return [150+(l*Math.sin(perfAng*(Math.PI/180))),150-(l*Math.cos(perfAng*(Math.PI/180)))] } else if (q==1) { return [150+l*Math.cos(perfAng*(Math.PI/180)),150+l*Math.sin(perfAng*(Math.PI/180))] } else if (q==2) { return [150-l*Math.sin(perfAng*(Math.PI/180)),150+l*Math.cos(perfAng*(Math.PI/180))] } else if (q==3) { return [150-l*Math.cos(perfAng*(Math.PI/180)),150-l*Math.sin(perfAng*(Math.PI/180))] } } function form(tx,i) { var txt = tx.toString(); if (txt.length == i) { return txt; } else { while (txt.length < i) { txt = "0" + txt; if (txt.length == i) { return txt; break; } } } } var gg = 0; $(".change").on("click",function(){ $("#date,#local").hide(); $(".gp").eq((gg+1)%2).css("background-color","#5096EB"); $(".gp").eq((gg)%2).css("background-color","rgba(0,0,0,0)"); if((gg+1)%2 == 1) { $("#analog").css({ "position" : "absolute", "top" : "0", "left" : "0", "right" : "0", "bottom" : "0" }); $("#digital").show(); $("#digital").css({ "position" : "absolute", "top" : "0", "left" : "100vw", "right" : "0", "bottom" : "0" }); $("#analog").animate({ "left": '-200vw' }, 150,"swing"); $("#digital").animate({ "left": '0' }, 150,"swing"); setTimeout(function(){ $("#analog,#digital").css({ "position" : "relative" }); $("#analog").hide(); $("#date,#local").show(); },150); } else { $("#digital").css({ "position" : "absolute", "top" : "0", "left" : "0", "right" : "0", "bottom" : "0" }); $("#analog").show(); $("#analog").css({ "position" : "absolute", "top" : "0", "left" : "-200vw", "right" : "0", "bottom" : "0" }); $("#digital").animate({ "left": '100vw' }, 150,"swing"); $("#analog").animate({ "left": '0' }, 150,"swing"); setTimeout(function(){ $("#analog,#digital").css({ "position" : "relative" }); $("#digital").hide(); $("#date,#local").show(); },200); } gg+=1; }); });

Clock App (Demo)