博客园定制页面——使用自定义JS脚本(公告栏显示时间)

Posted 2021-02-14 mehome

一、js使用方法

使用方法主要分为以下几步：

1. 在本地创建js脚本文件；
2. 博客园的管理——文件——选择文件——上传
3. 然后在设置里面的博客侧边栏公告或者页首html代码或者页脚Html代码中用自定义的html等代码调用即可。

注意：博客园的js权限需要申请开通。一般先写两篇博客再申请，如果不通过多申请两次即可通过。

二、公告栏钟表显示时间

下面是示例我的博客公告栏的钟表显示的js设置方法：

1. 创建js脚本
2. 上传到自己账户的文件中，然后在博客侧边栏公告调用js脚本

2.1、本地创建js脚本

• 本地创建名为clock.js的文件，文件内容是下面的js脚本内容。
• 将clock.js在管理——文件——选择文件——上传，上传到自己账号的文件中

  1 var dom = document.getElementById(\'clock\');
  2 var ctx = dom.getContext(\'2d\');
  3 var width = ctx.canvas.width;
  4 var height = ctx.canvas.height;
  5 var r = width / 2;
  6 //定义钟盘
  7 function drawBackground(){
  8     ctx.save();
  9     ctx.translate(r, r);
 10     ctx.beginPath();
 11     ctx.lineWidth = 10;
 12     ctx.font =\'18px Arial\';
 13     ctx.textAlign = \'center\'
 14     ctx.textBaseline = \'middle\'
 15     ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
 16     ctx.stroke();
 17     var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
 18     //遍历获取坐标
 19     hourNumbers.forEach(function(number, i){
 20         var rad = 2 * Math.PI / 12 * i;
 21         var x = Math.cos(rad) * (r - 30);
 22         var y = Math.sin(rad) * (r - 30);
 23         ctx.fillText(number, x ,y);
 24     })
 25  
 26     //定义刻度
 27     for(var i=0;i<60;i++){
 28         var rad = 2 * Math.PI / 60 * i;
 29         var x = Math.cos(rad) * (r - 18);
 30         var y = Math.sin(rad) * (r - 18);
 31         ctx.beginPath();
 32         if(i % 5 == 0){
 33             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 34             ctx.fillStyle = \'#000\';
 35         }else{
 36             ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
 37             ctx.fillStyle = \'#ccc\';
 38         }
 39         ctx.fill();
 40     }
 41  
 42 }
 43  
 44 //定义时钟
 45 function drawHour(hour,minute){
 46     ctx.save();
 47     ctx.beginPath();
 48     var rad = 2 * Math.PI / 12 * hour;
 49     var mrad = 2 * Math.PI / 12 / 60 * minute;
 50     ctx.rotate(rad + mrad);
 51     ctx.lineWidth = 6;
 52     ctx.lineCap= \'round\';
 53     ctx.moveTo(0 ,10);
 54     ctx.lineTo(0 ,-r / 2);
 55     ctx.stroke();
 56     ctx.restore();
 57 }
 58 //定义分钟
 59 function drawMinute(minute,second){
 60     ctx.save();
 61     ctx.beginPath();
 62     var rad = 2 * Math.PI / 60 * minute;
 63     var srad = 2 * Math.PI / 60 /60 * second;
 64     ctx.rotate(rad + srad);
 65     ctx.lineWidth = 3;
 66     ctx.lineCap= \'round\';
 67     ctx.moveTo(0 ,10);
 68     ctx.lineTo(0 ,-r + 18);
 69     ctx.stroke();
 70     ctx.restore();
 71 }
 72 //定义秒钟
 73 function drawSecond(second){
 74     ctx.save();
 75     ctx.beginPath();
 76     var rad = 2 * Math.PI / 60 * second;
 77     ctx.rotate(rad);
 78     ctx.lineWidth = 3;
 79     ctx.lineCap= \'round\';
 80     ctx.moveTo(-2 ,20);
 81     ctx.lineTo( 2, 20);
 82     ctx.lineTo( 1, -r + 18);
 83     ctx.lineTo( -1, -r + 18);
 84     ctx.fillStyle = \'#c14543\';
 85     ctx.fill();
 86     ctx.restore();
 87 }
 88 //定义钟盘圆点样式
 89 function drawDot(){
 90     ctx.beginPath();
 91     ctx.fillStyle = \'#fff\';
 92     ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
 93     ctx.fill();
 94 }
 95  
 96 //时间函数
 97 function draw(){
 98     ctx.clearRect(0, 0, width, height);
 99     var now = new Date();
100     var hour = now.getHours();
101     var minute = now.getMinutes();
102     var second = now.getSeconds();
103     drawBackground();
104     drawHour(hour,minute);
105     drawMinute(minute,second);
106     drawSecond(second);
107     drawDot();
108     ctx.restore();
109 }
110 setInterval(draw, 1000)

View Code

 

2.2、以下是博客园侧边栏设置

在设置里面的博客侧边栏公告填写下面代码，然后保存。

  1 <div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div>
  2 <script type="text/javascript" src="http://files.cnblogs.com/files/mehome/clock.js"></script>

View Code

 

注意：js脚本地址是我的账户的文件的地址，换成自己账户即可。

二、参考

参考博客：

• https://www.cnblogs.com/lixu880/p/6403495.html