Pebble Code

var rocky = require('rocky');

// Number of hours in the day
var nHours = 10;

rocky.on('secondchange', function(event) {
  rocky.requestDraw();
});

rocky.on('draw', function(event) {
  var ctx = event.context;
  ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);

  ctx.fillStyle = 'turquoise';
  ctx.textAlign = 'center';
    ctx.font = '30px bolder Bitham';

  var w = ctx.canvas.unobstructedWidth;
  var h = ctx.canvas.unobstructedHeight;

    // Calculate the Time
    var date = new Date();
    var secs = date.getSeconds();
    var mins = date.getMinutes();
    var hour = date.getHours();

    var pourcent = (secs + mins*60 + hour*3600)/86400;

    // pourcent = (Dsecs + Dmins*100 + Dhour*10000)/100000

    var totalDsecs = pourcent*10000*nHours;

    var Dhour = Math.floor(totalDsecs/10000);
    totalDsecs -= Dhour * 10000;

    var Dmins = Math.floor(totalDsecs/100);
    var Dsecs = Math.floor(totalDsecs - Dmins*100);

    if (Dsecs < 10) {
        Dsecs = "0" + Dsecs;
    }

    if (Dmins < 10) {
        Dmins = "0" + Dmins;
    }

    if (secs < 10) {
        secs = "0" + secs;
    }

    if (mins < 10) {
        mins = "0" + mins;
    }

    var dec_time = Dhour + ":" + Dmins + ":" + Dsecs;
  ctx.fillText(dec_time, w / 2, h / 2 - 40);

    ctx.font = '24px bold Gothic';
    ctx.fillStyle = 'white';

    var time = "\n\n24h: " + hour + ":" + mins + ":" + secs;

    ctx.fillText(time, w / 2, h / 2 - 40);

    ctx.font = '18px Gothic';

    var currDate = "\n\n\n\n" + date.toISOString().split('T')[0].replace(/-/g,"/");
    ctx.fillText(currDate, w / 2, h / 2 - 40);
});