javascript - 如何居中和调整jqwidget模拟时钟的大小？

Question

我想设置时钟的高度和宽度，以根据宽度的百分比值填充以下html td(因为时钟需要具有相同的宽度和高度才能成为圆形)。另外，当我尝试使用中心标签时，时钟没有居中。任何人都可以推荐另一种方法来根据 td 调整时钟尺寸并使时钟居中。

预先感谢您，如果我太含糊，请让我知道是否需要解释!

这里是来自 jqwidgets 的演示时钟代码的链接:http://jqwidgets.com/jquery-widgets-demo/demos/jqxgauge/index.htm#demos/jqxgauge/gauge-clock.htm

HTML

<td colspan="1" style="width: 26%; height: 250px;";>
  <center>
  <div id="clock" style="position: relative; height:250px;"> 
<div style="position: absolute; left: 0px; top: 0px;" id='seconds'></div>
<div style="position: absolute; left: 0px; top: 0px;" id='hours'></div>
    <div style="position: absolute; left: 0px; top: 0px;" id='minutes'></div>
  </div>
  </center>
</td>

Javascript

  //adding the clock

        var hours = new Date().getHours(),
        minutes = new Date().getMinutes(),
        seconds = new Date().getSeconds(),
        digits = {
            1: 'I',
            2: 'II',
            3: 'III',
            4: 'IV',
            5: 'V',
            6: 'VI',
            7: 'VII',
            8: 'VIII',
            9: 'IX',
            10: 'X',
            11: 'XI',
            12: 'XII'
        };
    $('#minutes').jqxGauge({
        ticksMinor: { visible: false },
        ticksMajor: { visible: false },
        labels: { visible: false },
        animationDuration: 0,
        min: 0, max: 12,
        border: { style: { fill: 'none', stroke: 'none'}, showGradient: false },
        caption: { value: '' },
        colorScheme: 'scheme05',
        style: { fill: 'none', stroke: 'none' },
        pointer: { length: '70%', width: '2%' },
        cap: { style: { fill: '#249dd6', stroke: '#249dd6'} },
        startAngle: -90,
        endAngle: 270,
        value: (minutes / 60) * 12
    });
    $('#hours').jqxGauge({
        ticksMinor: { visible: false },
        ticksMajor: { visible: false },
        labels: { visible: false },
        animationDuration: 0,
        min: 0, max: 12,
        caption: { value: '' },
        border: { style: { fill: 'none', stroke: 'none' }, showGradient: false },
        colorScheme: 'scheme05',
        pointer: { length: '50%', width: '3%' },
        style: { fill: 'none', stroke: 'none' },
        value: hours % 12 + (minutes / 60 * 11) / 12,
        startAngle: -90,
        endAngle: 270
    });
    $('#seconds').jqxGauge({
        ticksMinor: {
            interval: 0.2,
            size: '3%',
            style: {
                fill: '#aaaaaa',
                stroke: '#aaaaaa',
                'stroke-width': '2px'
            }
        },
        ticksMajor: {
            interval: 1,
            size: '8%',
            style: {
                fill: '#aaaaaa',
                stroke: '#aaaaaa',
                'stroke-width': '2px'
            }
        },
        ticksDistance: '10%',
        startAngle: -90,
        endAngle: 270,
        labels: {
            distance: '28%',
            interval: 1,
            formatValue: function (val) {
                if (val == 0) {
                    return '';
                }
                return digits[val];
            }
        },
        pointer: { length: '80%', width: '1.7%' },
        ranges: [],
        caption: { value: 'Time', offset: [0, -30] },
        animationDuration: 0, min: 0, max: 12,
        border: { fill: 'none', stroke: 'none' },
        colorScheme: 'scheme05',
        style: { fill: '#ffffff', stroke: '#cccccc' },
        value: (seconds / 60) * 12
    });
    setInterval(function () {
        var seconds = $('#seconds').jqxGauge('value'),
            minutes = $('#minutes').jqxGauge('value'),
            hours = $('#hours').jqxGauge('value'),
            ratio = 12 / 60;
        seconds += ratio;
        if (seconds > 12) {
            seconds = ratio;
        }
        $('#seconds').jqxGauge('value', seconds);
        if (seconds === ratio) {
            minutes += ratio;
            if (minutes >= 12) {
                minutes = ratio;
            }
            $('#minutes').jqxGauge('value', minutes);
            $('#minutes').jqxGauge('value', minutes);
            hours += 1 / 60;
            if (hours > 12) {
                hours = 1 / 60;
            }
            $('#hours').jqxGauge('value', hours);
        }
    }, 1000);





  //end of clock code

Answer 1

<center>标签基本上被忽略，因为 #clock div 将占据 td 的整个宽度。

尝试...删除 <center>和</center>并把...

text-align:center;

...进入 #clock div 的风格。

我不能说这会起作用，因为我无法使用在页面上操作的 jqxGauge 来访问它。

更新:

jqxGauge 有宽度和高度选项...

$('#gauge').jqxGauge({ width: '20%', height: '30%', radius: '50%' });