先导
首先隔了这么久才继续进行更新的原因是网站备案和毕业设计，加上刚入职没有时间去进行内容更新，以后会继续更新了
在pugjs中添加一些好用的东西这个系列会长期的添加更新，因为这些都是会用在博客当中的，而且这些操作都比较简单，都是在主题的相应文件位置添加相应代码即可。
内容介绍
这次添加的内容是在右边栏那里加上一个时钟，用来给阅读的人直观地看到时间，时钟的代码是直接从网上拷贝下来的，并且自己做了修改，地址是这里 ,打开这个链接就能看到一个时钟，此时检查页面元素定位到时钟所在的div标签，其中有一个canvas标签，将其复制下来，并且找到下面与之最近的script标签查看到时钟的逻辑代码，也将其复制下来进行修改后就差不多可以使用了。
首先声明，代码是直接复制的，复制也没有删除，主要是为了学习用途，如果造成侵权或者修改了不应修改的地方，还请拿出版权证据证明后修改或者删除您的代码，自行复制后造成的一切问题与我无关
脚本代码
原脚本
- 复制下来的脚本内容大致如下，内容有点多请别介意，方便复制
1<canvas id="clock" width="400" height="400"></canvas>
2<script type="text/javascript">
3var time = new Date();
4var h = time.getHours(); //时
5var m = time.getMinutes(); //分
6var s = time.getSeconds(); //秒
7h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
8//=====================================
9var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
10
11function draw(){
12 var c=document.getElementById("clock");
13 var ctx=c.getContext("2d"); //获取绘图对象
14 ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
15 s++;//秒针
16
17 ctx.fillStyle = '#fff' //填充白色背景色
18 ctx.fillRect(0,0,c.width,c.height); //设置画布区域
19
20 //填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
21 ctx.beginPath();
22 ctx.arc(x,y,10,0,Math.PI*2,true);
23 ctx.fill();
24 ctx.closePath();
25
26 //填充版权文字
27 ctx.fillStyle="#ccc";
28 ctx.font = "12pt Arial";
29 ctx.fillText("Helloweba.com",150,250);
30 //调用日期并填充到画布中
31 ctx.fillStyle="#666";
32 ctx.font = "14pt Verdana";
33 ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170);
34
35 ctx.save(); //保存当前绘图状态
36
37 // 时间刻度
38 for(var i=0;i<12;i++){
39 var angle=(Math.PI*2)/12;
40 ctx.beginPath();//开始绘制
41 ctx.font="12px Arial";
42 if(i==0||i==3||i==6||i==9){
43 ctx.fillStyle="red";
44 radius=4;
45 }else{
46 ctx.fillStyle="blue";
47 radius=3;
48 }
49
50 ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆
51 ctx.fill(); //填充路径
52 trans(ctx,x,y,angle); //刻度分布
53 }
54 ctx.restore(); //恢复上次保存的绘图状态
55
56 sAngle=(Math.PI*2)/60*s; //秒度
57 //时针转动
58 ctx.save();
59 ctx.strokeStyle="red";
60 ctx.lineWidth=3;
61 trans(ctx,x,y,(Math.PI*2)/60*h);
62 pointer(ctx,x,y,y-40);
63 ctx.restore();
64
65 //分针转动
66 ctx.save();
67 ctx.strokeStyle="blue";
68 ctx.lineWidth=2;
69 trans(ctx,x,y,(Math.PI*2)/60*m);
70 pointer(ctx,x,y,y-68);
71 ctx.restore();
72
73 //秒针转动
74 ctx.save();
75 ctx.strokeStyle="#000";
76 trans(ctx,x,y,sAngle);
77 pointer(ctx,x,y,y-80);
78 ctx.restore();
79
80 //数据整理
81 if(s%60==0){
82 sAngle=0,s=0,m++;
83 if(m%12==0){ //每十二分 时针旋转一次
84 if(m!=0)h++;
85 if(m%60==0)m=0;
86 }
87 if(h%60==0)h=0;
88 }
89}
90
91//绘制指针
92function pointer(ctx,x,y,z){
93 ctx.beginPath();
94 ctx.moveTo(x,y);
95 ctx.lineTo(x,z);
96 ctx.stroke();
97 ctx.fill();
98}
99
100 //据坐标旋转
101function trans(ctx,x,y,angle){
102 ctx.transform(Math.cos(angle), Math.sin(angle),
103 -Math.sin(angle), Math.cos(angle),
104 x*(1-Math.cos(angle)) + x*Math.sin(angle),
105 y*(1-Math.cos(angle)) - y*Math.sin(angle))
106}
107
108setInterval("draw()",1000);
109</script>
修改后的脚本
下面是修改后用之前的网站进行转换成pugjs的脚本，懒一点的就直接复制下面代码吧
1br
2div(style='position: relative;top: 0px;left: 0px;')
3 canvas#clock(width='250', height='250')
4script.
5 var time = new Date();
6 var h = time.getHours(); //时
7 var m = time.getMinutes(); //分
8 var s = time.getSeconds(); //秒
9 h = h > 12 ? (h - 12) * 5 + parseInt(m / 12) : h * 5 + parseInt(m / 12); //时针 初始位置
10 //=====================================
11 var cc = document.getElementById("clock");
12 var x = cc.width/2.0, y = cc.height/2.0, sAngle = 0; //x y 原点 秒针角度变量
13 function draw() {
14 var c = document.getElementById("clock");
15 var ctx = c.getContext("2d"); //获取绘图对象
16 ctx.clearRect(0, 0, c.width, c.height); //清除上次绘制的图形
17 s++;//秒针
18 ctx.fillStyle = '#fff' //填充白色背景色
19 ctx.fillRect(0, 0, c.width, c.height); //设置画布区域
20 //填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
21 ctx.beginPath();
22 ctx.arc(x, y, 10, 0, Math.PI * 2, true);
23 ctx.fill();
24 ctx.closePath();
25 //填充版权文字
26 ctx.fillStyle = "#ccc";
27 ctx.font = "12pt Arial";
28 // ctx.fillText("impressionyang.top", 10, c.height-10);
29 //调用日期并填充到画布中
30 ctx.fillStyle = "#666";
31 ctx.font = "14pt Verdana";
32 ctx.fillText(time.getMonth() + 1 + "-" + time.getDate(), c.width/2, c.height/2);
33 ctx.save(); //保存当前绘图状态
34 // 时间刻度
35 for (var i = 0; i < 12; i++) {
36 var angle = (Math.PI * 2) / 12;
37 ctx.beginPath();//开始绘制
38 ctx.font = "12px Arial";
39 if (i == 0 || i == 3 || i == 6 || i == 9) {
40 ctx.fillStyle = "red";
41 radius = 4;
42 } else {
43 ctx.fillStyle = "blue";
44 radius = 3;
45 }
46 ctx.arc(x, y - 100, radius, 0, Math.PI * 2, true); //画圆
47 ctx.fill(); //填充路径
48 trans(ctx, x, y, angle); //刻度分布
49 }
50 ctx.restore(); //恢复上次保存的绘图状态
51 sAngle = (Math.PI * 2) / 60 * s; //秒度
52 //时针转动
53 ctx.save();
54 ctx.strokeStyle = "red";
55 ctx.lineWidth = 3;
56 trans(ctx, x, y, (Math.PI * 2) / 60 * h);
57 pointer(ctx, x, y, y - 40);
58 ctx.restore();
59 //分针转动
60 ctx.save();
61 ctx.strokeStyle = "blue";
62 ctx.lineWidth = 2;
63 trans(ctx, x, y, (Math.PI * 2) / 60 * m);
64 pointer(ctx, x, y, y - 68);
65 ctx.restore();
66 //秒针转动
67 ctx.save();
68 ctx.strokeStyle = "#000";
69 trans(ctx, x, y, sAngle);
70 pointer(ctx, x, y, y - 80);
71 ctx.restore();
72 //数据整理
73 if (s % 60 == 0) {
74 sAngle = 0, s = 0, m++;
75 if (m % 12 == 0) { //每十二分 时针旋转一次
76 if (m != 0) h++;
77 if (m % 60 == 0) m = 0;
78 }
79 if (h % 60 == 0) h = 0;
80 }
81 }
82 //绘制指针
83 function pointer(ctx, x, y, z) {
84 ctx.beginPath();
85 ctx.moveTo(x, y);
86 ctx.lineTo(x, z);
87 ctx.stroke();
88 ctx.fill();
89 }
90 //据坐标旋转
91 function trans(ctx, x, y, angle) {
92 ctx.transform(Math.cos(angle), Math.sin(angle),
93 -Math.sin(angle), Math.cos(angle),
94 x * (1 - Math.cos(angle)) + x * Math.sin(angle),
95 y * (1 - Math.cos(angle)) - y * Math.sin(angle))
96 }
97 setInterval("draw()", 1000);
98
至此就能够添加这个时钟到网站里面了，是不是感觉很简单呢。
后记
虽然觉得直接拉取被人的东西有点不太厚道，但是我可是最强缝合怪啊，想拿来凑一凑再说哈哈哈。
评论