博客侧边栏

感谢：https://www.cnblogs.com/hongrunhui/p/7856380.html

页面定制CSS代码

/*以下为隐藏反对*/
.buryit{
display: none;
}
/*以下为隐藏评论后面的广告和新闻等*/
#ad_t2,#cnblogs_c1,#under_post_news,#cnblogs_c2,#under_post_kb{
display: none;
}

.dataintable td{
cursor:pointer;
}

.phrase{
font-size: 13px; padding: 10px; margin-bottom: 10px; border: 1px dashed #FFF; color: #FF3399
}

　　

博客侧边栏公告（支持HTML代码）（支持JS代码）

<style>
/*#canvas{position:absolute;left:0px;top:0px;z-index:5;} 在这里写样式会明显出现加载滚动，遂写在元素上*/
#main{position:relative;z-index:10;}/*,#footer*/
</style>
<p class='phrase' >
<span onclick='stopORcontinue()' style='cursor:pointer'>Bamboo Lamp</span><br><br>
一艺之成，当尽毕生之力！
</p>
<table class="dataintable" style="text-align: center; 100%">
<tbody><tr>
<td style=" 16%; height: 20px; background-color: #FF0000" ></td>
<td style=" 16%; height: 20px; background-color: #FF0033" ></td>
<td style=" 16%; height: 20px; background-color: #FF0066" ></td>
<td style=" 16%; height: 20px; background-color: #FF0099" ></td>
<td style=" 16%; height: 20px; background-color: #FF00CC" ></td>
<td style=" 16%; height: 20px; background-color: #FF00FF" ></td>
</tr>

<tr>
<td style=" 16%; height: 20px; background-color: #FF3300" ></td>
<td style=" 16%; height: 20px; background-color: #FF3333" ></td>
<td style=" 16%; height: 20px; background-color: #FF3366" ></td>
<td style=" 16%; height: 20px; background-color: #FF3399" ></td>
<td style=" 16%; height: 20px; background-color: #FF33CC" ></td>
<td style=" 16%; height: 20px; background-color: #FF33FF" ></td>
</tr>

<tr>
<td style=" 16%; height: 20px; background-color: #FF6600" ></td>
<td style=" 16%; height: 20px; background-color: #FF6633" ></td>
<td style=" 16%; height: 20px; background-color: #FF6666" ></td>
<td style=" 16%; height: 20px; background-color: #FF6699" ></td>
<td style=" 16%; height: 20px; background-color: #FF66CC" ></td>
<td style=" 16%; height: 20px; background-color: #FF66FF" ></td>
</tr>

<tr>
<td style=" 16%; height: 20px; background-color: #FF9900" ></td>
<td style=" 16%; height: 20px; background-color: #FF9933" ></td>
<td style=" 16%; height: 20px; background-color: #FF9966" ></td>
<td style=" 16%; height: 20px; background-color: #FF9999" ></td>
<td style=" 16%; height: 20px; background-color: #FF99CC" ></td>
<td style=" 16%; height: 20px; background-color: #FF99FF" ></td>
</tr>

<tr>
<td style=" 16%; height: 20px; background-color: #FFCC00" ></td>
<td style=" 16%; height: 20px; background-color: #FFCC33" ></td>
<td style=" 16%; height: 20px; background-color: #FFCC66" ></td>
<td style=" 16%; height: 20px; background-color: #FFCC99" ></td>
<td style=" 16%; height: 20px; background-color: #FFCCCC" ></td>
<td style=" 16%; height: 20px; background-color: #FFCCFF" ></td>
</tr>

<tr>
<td style=" 16%; height: 20px; background-color: #FFFF00" ></td>
<td style=" 16%; height: 20px; background-color: #FFFF33" ></td>
<td style=" 16%; height: 20px; background-color: #FFFF66" ></td>
<td style=" 16%; height: 20px; background-color: #FFFF99" ></td>
<td style=" 16%; height: 20px; background-color: #FFFFCC" ></td>
<td style=" 16%; height: 20px; background-color: #FFFFFF" ></td>
</tr>
</tbody></table>
<script>
document.oncontextmenu=function(){ return false;};//屏蔽右键菜单
var circle;
function displayColorCanvas() {
if(circle){
circle.lineColor = this.style.backgroundColor;
}
}
function displayColorPhrase() {
document.getElementsByClassName("phrase")[0].style.color= this.style.backgroundColor;
}
function stopORcontinue(){
if(circle.status == 0){
circle.stop();
}else if(circle.status == 1){
circle.continue();
}
}
window.onload = function(){// 页面加载完了之后再处理
var td = document.querySelectorAll('.dataintable td');
for(var i=0;i<td.length;i++){
td[i].onclick = displayColorCanvas;
td[i].onmouseover= displayColorPhrase;
}
var canvas = document.getElementById('canvas');
var body = document.getElementsByTagName('body')[0];
canvas.width = body.clientWidth;
canvas.height = body.clientHeight;
var bound = canvas.getBoundingClientRect();// 这个叫做获取边界客户端矩形，可以用来获取canvas的长宽
var ctx = canvas.getContext('2d');// 获取canvas的上下文环境（可以理解为买下一个画笔）
var width = bound.width, height = bound.height;
var circleConfig = {// 配置信息
ballNums: height/10+100,// 球的数量
maxLineLength:150,//最大线长
fillColor: 'rgba(255, 255, 255, .5)',// 球的填充颜色
lineColor:'rgb(255, 255, 255)',//线的颜色
radius: 1// 球的半径
};
circle = new Circle(circleConfig);// 初始化球
circle.init();// 初始化
var zoom=function(e){ // 这个函数是用来缩放球的大小的，简单做了个缩放改变球的效果，目前可能就在chrome下有用
var e = e || window.event;
if (!e.deltaX) {// 缩放的时候这个值是为0或-0的
if (e.deltaY < 0) {// 小于0好像是放大吧
if (circleConfig.radius) {
circleConfig.radius = null;
var circle = new Circle({
ballNums: 300,
fillColor: 'rgba(255, 255, 255, .5)',
// radius: 1
});
circle.init();
}

}
else {
if (!circleConfig.radius) {
circleConfig.radius = 1;
var circle = new Circle({
ballNums: 300,
fillColor: 'rgba(255, 255, 255, .5)',
radius: 1
});
circle.init();
}
}
}
if(e.wheelDelta && event.ctrlKey){// 禁止网页缩放
event.returnValue = false
}else if(e.detail){

event.returnValue = false;
}
}
if(document.addEventListener){
//document.addEventListener('DOMMouseScroll' , zoom , false); // 兼容火狐
}
//window.onmousewheel = document.onmousewheel = zoom;// 除火狐之外的浏览器
function Circle(o) {// 好了，这里才是故事真正开始的地方
o = o || {};
this.instance = [];// 可以理解为实例数组，用来存球的
this.maxLineLength = o.maxLineLength || 100;// 最大线长度，就是2个球在这个距离内会在之间画根线
this.lineColor = o.lineColor || 'rgb(255, 255, 255)';//线的颜色
this.status = 0 ;//0：正在运行；1：停止
function Ball() {
this.radius = o.radius || (o.MaxRadius || 20) * Math.random();
this.startDeg = 0;// 开始角度
this.endDeg = Math.PI * 2;// 终结角度
this.clockWay = false; // 顺时针还是逆时针
this.fillColor = o.fillColor || randomColor();// 填充颜色
this.borderColor = 'transparent';// 球的border设置为透明的不然难看
this.dirX = 1;// 球的水平方向（控制正反）
this.dirY = 1;// 如上
this.speedX = o.speed || (Math.random() - 0.5) * 1.2;// 球的移动速度
this.speedY = o.speed || (Math.random() - 0.5) * 1.2;// 球的移动速度
this.X = getRandom(width);// 这里是初始化球的起始位置，值是0-width
this.Y = getRandom(height);
this.resetDir = function() {// 控制方向
// X的位置如果小于半径或者大于canvas的宽度-半径就改变方向，Y同理
if (this.X < this.radius || this.X > width - this.radius) {
this.dirX = -this.dirX;
}
if (this.Y < this.radius || this.Y > height - this.radius) {
this.dirY = -this.dirY;
}
};
this.init = function() {// 球的初始化
this.move();
};
this.move = function() {// 这个就是移动球，每执行一次就检查方向和改变XY的带系喔啊
this.resetDir();
this.X += this.dirX * this.speedX;// 移动
this.Y += this.dirY * this.speedY;
};

}
this.ball = {
};
this.arc = function() {// 画圆函数
// ctx.translate(this.X, this.Y);
for (var i = 0; i < this.instance.length; i++) {
var ball = this.instance[i];// 从实例数组中取出来
ball.init();// 球的初始化函数，其实跟ball.move()是一样的，就是改变球的位置
/* 不需要画圆
// ctx.save();// 保存状态
ctx.fillStyle = ball.fillColor;// 球的填充颜色 (准备好填充颜料)
ctx.strokeStyle = ball.borderColor;// 球的线就是border（理解为准备好颜料）
ctx.beginPath();// 开始路径，可以理解为拿起画笔
ctx.arc(ball.X, ball.Y, ball.radius, ball.startDeg, ball.endDeg, this.clockWay);// 画圆
ctx.fill(); // 填充圆（就相当于给圆上色）
ctx.closePath();// 放下笔
*/
// ctx.restore();
for(var j = i + 1; j < this.instance.length; j++) {
var s = Math.pow(ball.X - this.instance[j].X, 2) + Math.pow(ball.Y - this.instance[j].Y, 2);
s = Math.sqrt(s);// 获取圆与圆之间的距离，x的平方加y的平方然后开根号，初中数学知识
if (s < this.maxLineLength) {// 判断什么时候可以画线
ctx.beginPath();
ctx.moveTo(ball.X, ball.Y);// 把笔移动到
ctx.lineTo(this.instance[j].X, this.instance[j].Y);// 画线到这个位置
ctx.strokeStyle = RGB2RGBA(this.lineColor,(this.maxLineLength - s) / (this.maxLineLength * 1.3));//'rgba(255, 255, 255, ' + (this.maxLineLength - s) / (this.maxLineLength * 1.3)+')'
// 上面是调整线的颜色
ctx.strokeWidth = 1;// 线宽
ctx.stroke();// 画
ctx.closePath();
}
}
}
};
this.draw = function() {
ctx.clearRect(0,0,width,height);// 你要是把这个给注了你会发现不一样的世界
this.arc();// 执行画圆函数
};
this.move = function() {
this.draw();
requestAnimationFrame(this.move.bind(this));// 这里用bind是强行改变move函数的上下文环境，不然在requestAnimationFrame中的this会变得
// requestAnimationFrame 请求动画帧，可以理解为控制函数执行的频率（本来这里可以用递归执行，但是递归控制不了频率，会卡死页面的，setTimeout也可以实现类似的效果）
};
this.init = function() {
for(var i = 0; i < o.ballNums; i++) {
this.instance.push(new Ball()); // 初始化球
}
this.move();
};

this.stop = function(){
this.status = 1;//停止
this.move = function(){};
}

this.continue = function(){
this.status = 0;//运行
this.move = function() {
this.draw();
requestAnimationFrame(this.move.bind(this));
};
this.move();
}

}
function getRandom(s) {
return Math.ceil(Math.random() * s);// 获取0 -（s-1）之间的值
}
function randomColor() {
return 'rgba('+getRandom(255)+','+getRandom(255)+','+getRandom(255)+','+Math.random()+')';
};
};
//十六进制颜色值的正则表达?
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
/*16进制颜色转为RGB格式*/
function colorToRgb(sColor,opacity){
if(sColor && reg.test(sColor)){
if(sColor.length === 4){
var sColorNew = "#";
for(var i=1; i<4; i+=1){
sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
}
sColor = sColorNew;
}
//处理六位的颜色
var sColorChange = [];

for(var i=1; i<7; i+=2){
sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
}
return "rgba(" + sColorChange.join(",") + "," + opacity || 1 + " )";
}else{
return sColor;
}
};
function RGB2RGBA(rgba_color,opacity){
//注：rgba_color的格式为rgb(0,0,0)
var arr = rgba_color.split("(")[1].split(")")[0].split(",");
return "rgba(" + arr[0] + "," + arr[1] + "," + arr[2] +"," + opacity || 1 +")";
}
</script>

页首Html代码

<canvas id="canvas" style='position:absolute;left:0px;top:0px;z-index:5;' >

</canvas>
<div style="text-align: left; margin: 0px 20px 21px; padding-bottom: 10px; font-size: 12px; border-bottom: 1px dashed #ffffee; color:#ffffee">
就像竹林的灯火，被风吹过，摇摇曳曳，但永不熄灭！
</div>

页脚Html代码

<!--
<div class="cnblogs_Highlighter">
<div style="text-align: left; margin: 0 17px">
<p> <a target="_blank" href="http://www.w3school.com.cn/index.html">w3school 在线教程</a> |
<a target="_blank" href="https://www.cnblogs.com/">博客园</a> |
<a target="_blank" href="https://www.sxsoft.com/">sxsoft</a> |
<a target="_blank" href="http://www.52solution.com/kb/">快包网</a> </p> </div>
</div>
-->