javascript - 添加或删除 Javascript 时钟的小时或分钟

Question

我购买了这个时钟背景(并且不支持它)，并且想知道如何更改小时和分钟，或者至少有人告诉我在哪里查看。

我检查了clock.js和其他文件，但看不到任何添加/删除时钟小时或分钟的设置。

DEMO

我知道时钟从用户浏览器获取时间。

我只是希望能够(例如)在小时和 +30 分钟上添加 +1。

这是我的clock.js 文件

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);
    });
    ///////////////////////////////////////////////////////////////////////////////////////

}); 

感谢您的帮助

Answer 1

调整倒计时器

考虑到这是一个倒计时，请检查 JavaScript 文件 clock.js 的第 105-124 行

更改这部分:

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

要添加您提到的+1小时和+30分钟，请将其更改为:

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

调整时钟

时钟部分有点棘手。我必须增强您的 svg.clock.min.js 以接受新参数来调整时间组件(小时、分钟和秒)。

您可以在下面查看修改后的代码:

    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))
    }
});

有一个名为 timeModifiers 的新属性，将在 update 函数(第 58 行)中使用，以允许增加/减少时间.

例如，要渲染额外 30 分钟的时钟，请使用以下语法:

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();

请记住，此组件始终使用当前日期(基于客户端的计算机)，您可以在 update 函数内的第 60 行中查看.

您还可以在下面gist中查看增强组件