调整倒数计时器

Question

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

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

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

我希望能够（例如）在小时和+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

中查看增强型组件

Answer 2

我有2个选项，一个我可以成功测试，另一个我只能猜测：

第一种方式（本地测试）

您可以覆盖Date函数的构造函数。 new Date()返回当前的本地日期。有了这个覆盖它将返回当前本地日期+90分钟。将此代码放在文档中的任何脚本引用之前，看看魔术：

var bind = Function.bind;
var unbind = bind.bind(bind);

function instantiate(constructor, args) {
    return new (unbind(constructor, null).apply(null, args));
}

Date = function (Date) {
    MyDate.prototype = Date.prototype;

    return MyDate;

    function MyDate() {
        var date = instantiate(Date, arguments);
        date.setMinutes(date.getMinutes() + 90);
        return date;
    }
}(Date);

第二路（未经测试）

我在svg.clock.min.js：

的某个地方添加了这一行

c=new Date(c.setMinutes(c.getMinutes() + 90));

现在这里是svg.clock.min.js的最终内容：

SVG.Clock=function(a,c,d){ var b,d;c=c||{};for(b in c)d[b]=c[b];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;c=new Date(c.setMinutes(c.getMinutes() + 90));null==a&&(a=900);this.setHours(c.getHours(),c.getMinutes()).setMinutes(c.getMinutes(),a).setSeconds(c.getSeconds(),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){return this.put(new SVG.Clock(a, b, c))}});

添加或外卖小时或分钟到Javascript时钟

2 个答案:

调整倒数计时器

调整时钟