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 class="clock-number"></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 :
Adjusting the countdown timer\n\nConsidering this is a countdown clock, check the lines 105-124 of the javascript file clock.js\n\nChange this part:\n\nvar c = {\n year : 2017,\n month : 5,\n day : 8,\n hh : 00,\n min : 00,\n sec : 0,\n milsec : 0\n};\n\n\nTo add +1 hour and +30 minutes as you mentioned, change it to:\n\nvar c = {\n year : 2017,\n month : 5,\n day : 8,\n hh : 1,\n min : 30,\n sec : 0,\n milsec : 0\n};\n\n\nAdjusting the clock\n\nThe 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).\n\nYou can check the modified code bellow:\n\n SVG.Clock = function(a, c, d, timeModifiers) {\n\n var b, d;\n c = c || {};\n for (b in c) d[b] = c[b];\n\n this.timeModifiers = timeModifiers\n\n this.full = {\n hours: 0,\n minutes: 0,\n seconds: 0\n };\n this.time = {\n hours: 0,\n minutes: 0,\n seconds: 0\n };\n this.constructor.call(this, SVG.create(\"svg\"));\n this.viewbox(0, 0, 100, 100);\n this.size(a, a);\n this.plate = this.ellipse(99.5, 99.5).move(.25, .25).fill(\"none\").stroke({\n color: d.plate,\n opacity: 1,\n width: .3\n });\n this.plate += this.ellipse(97, 97).move(1.5, 1.5).fill(\"none\").stroke({\n color: d.plate,\n opacity: 1,\n width: .15\n });\n this.plate += this.ellipse(93, 93).move(3.5, 3.5).fill(\"none\").stroke({\n color: d.plate,\n opacity: 1,\n width: .15\n });\n this.plate += this.ellipse(3.5, 3.5).move(48.25, 48.25).fill(d.plate);\n for (b = 11; 0 <= b; b--) this.rect(.5, 2.8).move(49.75, 1.7).fill(d.marks).rotate(30 * b, 50, 50);\n 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);\n this.hours = this.rect(.6, 35).move(49.7, 20).fill(d.hours);\n this.minutes = this.rect(.6, 46).move(49.7, 9).fill(d.minutes);\n this.seconds = this.group().move(50.65,\n 43).add(this.rect(.2, 50).move(-.75, -37.5).fill(d.seconds));\n this.plate += this.ellipse(2, 2).move(49, 49).fill(\"#999ca6\");\n this.update(0)\n};\n\nSVG.Clock.prototype = new SVG.Container;\n\nSVG.extend(SVG.Clock, {\n start: function() {\n var a = this;\n setInterval(function() {\n a.update()\n }, 1E3);\n return this\n },\n update: function(a) {\n\n var c = new Date;\n\n null == a && (a = 900);\n\n var timeModifiers = this.timeModifiers || {hours: 0, minutes: 0, seconds: 0};\n\n var hours = c.getHours() + (timeModifiers.hours || 0),\n minutes = c.getMinutes() + (timeModifiers.minutes || 0),\n seconds = c.getSeconds() + (timeModifiers.seconds || 0);\n\n this.setHours(hours, minutes)\n .setMinutes(minutes, a)\n .setSeconds(seconds, a);\n\n return this\n },\n setHours: function(a, c) {\n this.time.hours = a;\n this.hours.rotate((a + c / 60) % 12 * 30, 50, 50);\n return this\n },\n setMinutes: function(a, c) {\n if (a == this.time.minutes) return this;\n this.time.minutes = a;\n 0 == a && this.full.minutes++;\n var b = 360 * this.full.minutes + 6 * a;\n c ? this.minutes.animate(c, SVG.easing.elastic).rotate(b, 50, 50) : this.minutes.rotate(b, 50, 50);\n return this\n },\n setSeconds: function(a, c) {\n this.time.seconds = a;\n 0 == a && this.full.seconds++;\n var b = 360 * this.full.seconds + 6 * a;\n c ? this.seconds.animate(c, SVG.easing.elastic).rotate(b, 50, 50) : this.seconds.rotate(b, 50, 50);\n return this\n }\n});\n\nSVG.extend(SVG.Container, {\n clock: function(a, b, c, timeModifiers) {\n return this.put(new SVG.Clock(a, b, c, timeModifiers))\n }\n});\n\n\nThere is a new attribute called timeModifiers that will be used in the update function (line 58) to allow incrementing / decrementing the time.\n\nTo render the clock with an additional 30 minutes for example, use the following syntax:\n\nvar timeModifier = {\n seconds: 0, // NUMBER OF SECONDS TO ADD/SUBTRACT\n minutes: 30, // NUMBER OF MINUTES TO ADD/SUBTRACT\n hours: 0 // NUMBER OF HOURS TO ADD/SUBTRACT\n};\n\nSVG('canvas', '100%').clock('100%', '', opts, timeModifier).start();\n\n\nKeep 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.\n\nYou can also check the enhanced component in the following gist",
2017-04-28T19:41:19