jquery+html5制作超酷的圆盘时钟表

下面我将详细讲解“jquery+html5制作超酷的圆盘时钟表”的完整攻略，希望能够对您有所帮助。

一、准备工作

1. 在你的html页面中引入jQuery库和相关的CSS文件。

```html

```

1. 在html页面中创建一个div，用于渲染时钟表的canvas元素。

```html

```

1. 确定时钟表的样式，例如大小、颜色等。

二、绘制画布

我们需要在canvas元素上面绘制一个圆形时钟表，来表示时间的流逝。

1. 获取canvas元素和绘制上下文。

javascript
var canvas = document.getElementById('clockCanvas'),
ctx = canvas.getContext('2d');

1. 设置canvas的宽度和高度。

javascript
canvas.width = 400;
canvas.height = 400;

1. 开始绘制时钟表，绘制步骤如下：

2. 绘制圆形背景。

   javascript
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 150, 0, Math.PI * 2);
ctx.fillStyle = '#333';
ctx.fill();

3. 绘制刻度。

   ```javascript
   ctx.beginPath();
   ctx.strokeStyle = '#fff';
   ctx.lineWidth = 5;

   for (var i = 0; i < 12; i++) {
   var deg = (i - 3) * 30;
   var x = Math.cos(deg * Math.PI / 180) * 120;
   var y = Math.sin(deg * Math.PI / 180) * 120;
   ctx.moveTo(canvas.width / 2, canvas.height / 2);
   ctx.lineTo(canvas.width / 2 + x, canvas.height / 2 + y);
   ctx.stroke();
   }
   ```

4. 绘制数字。

   ```javascript
   ctx.textAlign = 'center';
   ctx.textBaseline = 'middle';
   ctx.font = 'bold 25px Arial';

   for (var i = 1; i <= 12; i++) {
   var deg = (i - 3) * 30;
   var x = Math.cos(deg * Math.PI / 180) * 100;
   var y = Math.sin(deg * Math.PI / 180) * 100;
   ctx.fillText(i, canvas.width / 2 + x, canvas.height / 2 + y);
   }
   ```

5. 运行代码，可以看到完整的圆盘时钟表。

三、绘制时针、分针、秒针

我们需要在时钟表的中央绘制一个由时针、分针和秒针组成的指针。

1. 绘制指针。

```javascript
function drawPointer(radius, angle, color) {
ctx.beginPath();
ctx.strokeStyle = color;
ctx.lineWidth = 5;
ctx.lineCap = 'round';

   ctx.moveTo(canvas.width / 2, canvas.height / 2);
   ctx.lineTo(canvas.width / 2 + Math.cos(angle) * radius,
              canvas.height / 2 + Math.sin(angle) * radius);
   ctx.stroke();

}
```

1. 获取当前时间，并将每个指针的角度计算出来。

```javascript
var date = new Date(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();

var hourAngle = (hour - 3) * 30 + (minute / 60) * 30,
minuteAngle = (minute - 15) * 6,
secondAngle = (second - 15) * 6;
```

1. 绘制每个指针。

javascript
drawPointer(60, hourAngle * Math.PI / 180, '#fff');
drawPointer(90, minuteAngle * Math.PI / 180, '#fff');
drawPointer(120, secondAngle * Math.PI / 180, '#f00');

1. 每秒更新一次指针的位置，并重新绘制时钟表。

javascript
setInterval(function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawClock();
var date = new Date(),
hour = date.getHours(),
minute = date.getMinutes(),
second = date.getSeconds();
var hourAngle = (hour - 3) * 30 + (minute / 60) * 30,
minuteAngle = (minute - 15) * 6,
secondAngle = (second - 15) * 6;
drawPointer(60, hourAngle * Math.PI / 180, '#fff');
drawPointer(90, minuteAngle * Math.PI / 180, '#fff');
drawPointer(120, secondAngle * Math.PI / 180, '#f00');
}, 1000);

1. 运行代码，完整的圆盘时钟表就制作完成了。

示例1：指针秒数变化时改变背景颜色

在每秒更新指针后，通过判断指针秒数是否为偶数，来改变背景颜色。

var second = date.getSeconds();

if (second % 2 === 0) {
    $('.canvasWrapper').css('background-color', '#f9f9f9');
} else {
    $('.canvasWrapper').css('background-color', '#333');
}

示例2：鼠标悬停在数字上，数字颜色改变

可以通过jQuery的mouseenter和mouseout事件来实现，如下所示：

function bindEvent() {
    $('#clockCanvas').on({
        mouseenter: function() {
            var $this = $(this);
            if ($this.hasClass('num')) {
                $this.css('color', '#f00');
            }
        },
        mouseleave: function() {
            var $this = $(this);
            if ($this.hasClass('num')) {
                $this.css('color', '#fff');
            }
        }
    });
}

在数字的绘制过程中，为每个数字添加class为num，例如：

for (var i = 1; i <= 12; i++) {
    var deg = (i - 3) * 30;
    var x = Math.cos(deg * Math.PI / 180) * 100;
    var y = Math.sin(deg * Math.PI / 180) * 100;
    ctx.fillText(i, canvas.width / 2 + x, canvas.height / 2 + y);
    var span = $('<span></span>').addClass('number').text(i).css({
        'left': canvas.width / 2 + x + 'px',
        'top': canvas.height / 2 + y + 'px'  
    });
    $('.canvasWrapper').append(span);
}
bindEvent();

至此，示例1和示例2的完整代码就完成了。