Html时钟代码

分享 时钟代码 HTML
发布时间 :
阅读 :

示例1：

img

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas_time</title>
    <style type="text/css">
    div {
        text-align: center;
        margin-top: 50px;
    }
    #clock {
        border: 1px solid #cccccc;
    }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="300px" width="300px"></canvas>
    </div>
    <script type="text/JavaScript" >
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {
    ctx.save(); //存储当前环境变量；
    ctx.translate(r, r); //重置坐标到r，r
    ctx.beginPath(); // 起始一条路径
    ctx.lineWidth = 10*rem; //设置线宽10；
    ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
    ctx.font = 18*rem+"px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
       hourNumbers.forEach(function(number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30*rem);
        var y = Math.sin(rad) * (r - 30*rem);
        ctx.fillText(number, x, y);
    });
    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18*rem);
        var y = Math.sin(rad) * (r - 18*rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#ccc";
        }
        ctx.fill();
    }
}
    function drawHour(hour, minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 * hour;
        var mrad = 2 * Math.PI / 12 / 60 * minute;
        ctx.rotate(rad + mrad);
        ctx.lineWidth = 6*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r / 2);
        ctx.stroke();
        ctx.restore();
    }
    function drawMinute(minute) {
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = 3*rem;
        ctx.lineCap = "round";
        ctx.moveTo(0, 10*rem);
        ctx.lineTo(0, -r + 30*rem);
        ctx.stroke();
        ctx.restore();
    }
    function drawSecond(second) {
        ctx.save();
        ctx.beginPath();
        ctx.fillStyle = 'red';
        var rad = 2 * Math.PI / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2*rem, 20*rem);
        ctx.lineTo(2*rem, 20*rem);
        ctx.lineTo(1, -r + 16*rem);
        ctx.lineTo(-1, -r + 16*rem);
        ctx.fill();
        ctx.restore();
    }
    function drawDot() {
        ctx.beginPath();
        ctx.fillStyle = '#fff';
        ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
        ctx.fill();
    }
    function draw01() {
        ctx.clearRect(0, 0, width, height);
        var now = new Date();
        var hour = now.getHours();
        var minute = now.getMinutes();
        var second = now.getSeconds();
        drawBackground();
        drawHour(hour, minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore();
    }
    draw01();
    setInterval(draw01, 1000);
</script>
</body>
</html>

示例2：

img

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title>带日期的时钟</title>
 <style>
 h1 {
 text-align: center;
 }
 
 div {
 width: 400px;
 height: 400px;
 margin: 10px auto;
 padding: 0;
 }
 </style>
 </head>
 
 <body>
 
 <div>
 <canvas id="c1" width="400px" height="400px">
 
 </canvas>
 </div>
 
 <script type="text/javascript">
 var clock = document.getElementById("c1").getContext("2d");
 
// var clock = $("#huabu").get(0).getContext("2d"); //$中使用画布
 
 function play() {
 clock.clearRect(0, 0, 400, 400);
 clock.save();
 clock.translate(200, 200); //把画布中心转移到canvas中间
 biaopan();
 run();
 clock.restore();
 }
 setInterval(function() {
 play();
 }, 1000);
 
 function biaopan() {
 //绘制表盘
 clock.strokeStyle = " #9932CC";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 195, 0, 2 * Math.PI);
 clock.stroke();
 
 //刻度(小时)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 5;
 for(var i = 0; i < 12; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -170);
  clock.stroke();
  clock.rotate(2 * Math.PI / 12);
 }
 //刻度(分钟)
 clock.strokeStyle = "#9932CC";
 clock.lineWidth = 3;
 for(var i = 0; i < 60; i++) {
  clock.beginPath();
  clock.moveTo(0, -190);
  clock.lineTo(0, -180);
  clock.stroke();
  clock.rotate(2 * Math.PI / 60);
 }
 //绘制文字
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "#6495ED";
 clock.font = "20px 微软雅黑"
 for(var i = 1; i < 13; i++) {
  clock.fillText(i,Math.sin(2*Math.PI /12*i)*150,Math.cos(2*Math.PI/12*i)*-150);
 }
 }
 
 function run() {
 var date = new Date();
 var h = date.getHours();
 var m = date.getMinutes();
 var s = date.getSeconds();
// if(h > 12) {
//  h = h - 12;
// }
 //日期
 var week = date.getDay();
 var month = date.getMonth() + 1;
 var day = date.getDate();
 switch (week){
  case 1: week = "星期一";
  break;
  case 2: week = "星期二";
  break;
  case 3: week = "星期三";
  break;
  case 4: week = "星期四";
  break;
  case 5: week = "星期五";
  break;
  case 6: week = "星期六";
  break;
  default: week = "星期天";
  break;
 }
 clock.save();
 clock.textAlign = "center";
 clock.textBaseline = "middle";
 clock.fillStyle = "black";
 clock.font = "16px"
 clock.fillText(week,-2,-118);
 clock.fillText(month+" 月",-90,2);
 clock.fillText(day+" 号",90,0);
 clock.stroke();
 clock.restore();
 
 //时针
 //分针60格 分针5格 
 clock.save();
 clock.rotate(2 * Math.PI / 12 * h + (2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60) / 12);
 clock.strokeStyle = "black";
 clock.lineWidth = 7;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -80);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //分针
 //秒针60格 分针一格
 clock.save();
 clock.beginPath();
 clock.strokeStyle = "#D2691E";
 clock.lineWidth = 5;
 clock.rotate(2 * Math.PI / 60 * m + 2 * Math.PI / 60 * s / 60);
 clock.moveTo(0, 0);
 clock.lineTo(0, -110);
 clock.lineCap = "round";
 clock.stroke();
 clock.restore();
 //秒针
 clock.strokeStyle = "red";
 clock.rotate(2 * Math.PI / 60 * s);
 clock.lineWidth = 4;
 clock.beginPath();
 clock.moveTo(0, 0);
 clock.lineTo(0, -120);
 clock.lineCap = "round";
 clock.stroke();
 //中心
 clock.fillStyle = " #CCFFFF";
 clock.lineWidth = 5;
 clock.beginPath();
 clock.arc(0, 0, 10, 0, 2 * Math.PI);
 clock.fill();
 clock.strokeStyle = "cadetblue";
 clock.stroke();
 
 }
 </script>
 </body>
 
</html>
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com

赏

©2016-2024 coolxy

Built with Hexo and 3-hexo theme

×

喜欢就点赞,疼爱就打赏