Add or Take-away Hours or Minutes to Javascript Clock

Question

I bought this clock background (and there is no support for it) and would like to know how to change the hours and minutes or at least for someone to tell me where to look.

I checked out the clock.js and other files but cannot see any settings for the adding/removing hours or minutes to the clock.

DEMO

I understand that the clock gets the time from the users browser.

I would just like to be able to (for example) add +1 to the hour and +30 minutes.

This is the clock.js file I have

function initNumbers() {
    var x = 260;
    var y = 230;
    var d = 215;
    var r = [];
    for ( i = 11; i >= 0; i--) {
        var span = $('');
        span.text(((i == 0) ? 12 : i) + '');
        span.css('left', (x + (d) * Math.cos(1.57 - 30 * i * (Math.PI / 180))) + 'px');
        span.css('top', (y - (d) * Math.sin(1.57 - 30 * i * (Math.PI / 180))) + 'px');
        r.push(span);
    }
    return r;
}

$(document).ready(function() {
    if( jQuery('link[href*="css/dark-theme.css"]').length ) {
        var opts={plate:"#424242",marks:"#424242",label:"#424242",hours:"#424242",minutes:"#424242",seconds:"#424242"};
    } else {
        var opts={plate:"#FFFFFF",marks:"#FFFFFF",label:"#FFFFFF",hours:"#FFFFFF",minutes:"#FFFFFF",seconds:"#FFFFFF"};
    }


    SVG('canvas', '100%').clock('100%', '', opts).start();

    var n = initNumbers();
    $('#time-container .numbers-container').append(n);

    $("#canvas").everyTime("1s", function(i) {

        /* Date and time when your site starts to work */

        var c = {
            year : 2020,
            month : 7,
            day : 5,
            hh : 6,
            min : 90,
            sec : 0,
            milsec : 0
        };
        var cd = new Date();
        cd.setYear(c.year);
        cd.setMonth(c.month);
        //month start from 0
        cd.setDate(c.day);
        cd.setHours(c.hh, c.min, c.sec, c.milsec);
        //hh min sec milsec
        $('#timeleft').text(getCountDown(cd));
    });

    //////////////////////////////////////////////////////////////////////////////////////
    var delta = 0;
    var curWidth = $('#time-container').width();
    if (curWidth != null) {
        delta = curWidth - 555;
        scaleCoordinates(delta, true);
    }
    //555 , 450 , 250
    $(window).resize(function() {
        scaleCoordinates($('#time-container').width() - 555, false);
    });
    ///////////////////////////////////////////////////////////////////////////////////////

});

Thanks for any help

Romulo · Accepted Answer

Adjusting the countdown timer

Considering this is a countdown clock, check the lines 105-124 of the javascript file clock.js

Change this part:

var c = {
    year : 2017,
    month : 5,
    day : 8,
    hh : 00,
    min : 00,
    sec : 0,
    milsec : 0
};

To add +1 hour and +30 minutes as you mentioned, change it to:

var c = {
    year : 2017,
    month : 5,
    day : 8,
    hh : 1,
    min : 30,
    sec : 0,
    milsec : 0
};

Adjusting the clock

The clock part is kinda trickier. I had to enhance a bit your svg.clock.min.js to accept a new parameter to adjust the time components (hours, minutes and seconds).

You can check the modified code bellow:

    SVG.Clock = function(a, c, d, timeModifiers) {

    var b, d;
    c = c || {};
    for (b in c) d[b] = c[b];

    this.timeModifiers = timeModifiers

    this.full = {
        hours: 0,
        minutes: 0,
        seconds: 0
    };
    this.time = {
        hours: 0,
        minutes: 0,
        seconds: 0
    };
    this.constructor.call(this, SVG.create("svg"));
    this.viewbox(0, 0, 100, 100);
    this.size(a, a);
    this.plate = this.ellipse(99.5, 99.5).move(.25, .25).fill("none").stroke({
        color: d.plate,
        opacity: 1,
        width: .3
    });
    this.plate += this.ellipse(97, 97).move(1.5, 1.5).fill("none").stroke({
        color: d.plate,
        opacity: 1,
        width: .15
    });
    this.plate += this.ellipse(93, 93).move(3.5, 3.5).fill("none").stroke({
        color: d.plate,
        opacity: 1,
        width: .15
    });
    this.plate += this.ellipse(3.5, 3.5).move(48.25, 48.25).fill(d.plate);
    for (b = 11; 0 <= b; b--) this.rect(.5, 2.8).move(49.75, 1.7).fill(d.marks).rotate(30 * b, 50, 50);
    for (b = 59; 0 <= b; b--) 0 != b % 5 && this.rect(.2, 2).move(49.9, 1.7).fill(d.marks).rotate(6 * b, 50, 50);
    this.hours = this.rect(.6, 35).move(49.7, 20).fill(d.hours);
    this.minutes = this.rect(.6, 46).move(49.7, 9).fill(d.minutes);
    this.seconds = this.group().move(50.65,
        43).add(this.rect(.2, 50).move(-.75, -37.5).fill(d.seconds));
    this.plate += this.ellipse(2, 2).move(49, 49).fill("#999ca6");
    this.update(0)
};

SVG.Clock.prototype = new SVG.Container;

SVG.extend(SVG.Clock, {
    start: function() {
        var a = this;
        setInterval(function() {
            a.update()
        }, 1E3);
        return this
    },
    update: function(a) {

        var c = new Date;

        null == a && (a = 900);

        var timeModifiers = this.timeModifiers || {hours: 0, minutes: 0, seconds: 0};

        var hours = c.getHours() + (timeModifiers.hours || 0),
            minutes = c.getMinutes() + (timeModifiers.minutes || 0),
            seconds = c.getSeconds() + (timeModifiers.seconds || 0);

        this.setHours(hours, minutes)
            .setMinutes(minutes, a)
            .setSeconds(seconds, a);

        return this
    },
    setHours: function(a, c) {
        this.time.hours = a;
        this.hours.rotate((a + c / 60) % 12 * 30, 50, 50);
        return this
    },
    setMinutes: function(a, c) {
        if (a == this.time.minutes) return this;
        this.time.minutes = a;
        0 == a && this.full.minutes++;
        var b = 360 * this.full.minutes + 6 * a;
        c ? this.minutes.animate(c, SVG.easing.elastic).rotate(b, 50, 50) : this.minutes.rotate(b, 50, 50);
        return this
    },
    setSeconds: function(a, c) {
        this.time.seconds = a;
        0 == a && this.full.seconds++;
        var b = 360 * this.full.seconds + 6 * a;
        c ? this.seconds.animate(c, SVG.easing.elastic).rotate(b, 50, 50) : this.seconds.rotate(b, 50, 50);
        return this
    }
});

SVG.extend(SVG.Container, {
    clock: function(a, b, c, timeModifiers) {
        return this.put(new SVG.Clock(a, b, c, timeModifiers))
    }
});

There is a new attribute called timeModifiers that will be used in the update function (line 58) to allow incrementing / decrementing the time.

To render the clock with an additional 30 minutes for example, use the following syntax:

var timeModifier = {
    seconds: 0, // NUMBER OF SECONDS TO ADD/SUBTRACT
    minutes: 30, // NUMBER OF MINUTES TO ADD/SUBTRACT
    hours: 0 // NUMBER OF HOURS TO ADD/SUBTRACT
};

SVG('canvas', '100%').clock('100%', '', opts, timeModifier).start();

Keep in mind that the current date (based on the client's computer) is always used on this component, as you can check in line 60, inside the update function.

You can also check the enhanced component in the following gist

Add or Take-away Hours or Minutes to Javascript Clock

Answers (2)

Adjusting the countdown timer

Adjusting the clock

Related Questions