给自己的博客园添加网抑云音乐播放器
1. 申请权限
首先给自己的博客园设置，申请js权限，这个教程可以去搜。
2. 打开网页版网抑云音乐
点击一首你喜欢的歌进入 ， 然后点击生成外链播放器
然后复制代码：
进入到自己的博客园设置页面
我是将代码粘贴在侧边栏，但是将iframe标签换成embed自闭合标签，然后自己调一下位置就可以了 auto = 1 是自动播放
这样就出现了单曲的音乐播放器（但是chrome浏览器不支持自动播放，所以设置auto = 1无效的）
其他
如果你也觉得有点意思，想把自己的博客园花里胡哨一点，还有一些小tips
1.想设置背景图片，字体等什么的，你可以在设置的页面定制css里面去随意发挥，找dom节点可以f12或者右键点击检查去找对应的id名称，或者class名，或标签名。之后根据这些名称在css里面设置背景，字体等。只需要用到一点点css知识就可。
2.想拥有以下特效可以直接粘贴代码
（1）鼠标图标
body {
cursor: url('https://blog-static.cnblogs.com/files/lucas--liu/cat13.ico'), auto;
background-color: #bedff1;
}
(2) 首页HTML代码
<p id="back-top" style="display:none" title="回到页面顶部"><a href="#top"><span></span></a></p>
<!-- 回到顶部 -->
<style>
#back-top {
position: fixed;
bottom: 5rem;
right: 5rem;
z-index: 10;
}
#back-top span {
width: 50px;
height: 64px;
display: block;
background: url(http://images.cnblogs.com/cnblogs_com/seanshao/855033/o_rocket.png) no-repeat center center;
}
#back-top a {
outline: none
}
</style>
<script type="text/javascript">
$(function () {
// 默认是隐藏“回到顶部”按钮
$("#back-top").hide();
// 滚动距离顶部 500 像素时 淡入、淡出
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// 回到顶部，点击事件
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
</script>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
jQuery(document).ready(function($) {
$("body").click(function(e) {
var a = new Array("❤你好呀！❤","❤欢迎！❤","❤热烈欢迎！❤","永远保持热情！🤣","每天好心情😁","拥有期待和憧憬😊","善待生活🎈",
"迎难而上🤜","不要原地踏步🤟","skr ~~", "❤弱小别喷！❤","❤随便逛逛！❤","❤帅哥！❤","❤美女！❤","❤小哥哥❤",
"❤小姐姐❤","❤敬请原谅！❤","❤不甚荣幸！❤","❤爱你哟！❤",);
var $i = $("<span></span>").text(a[a_idx]);
a_idx = (a_idx + 1) % a.length;
var x = e.pageX,
y = e.pageY;
$i.css({
"z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
"top": y - 20,
"left": x,
"position": "absolute",
"font-weight": "bold",
"color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
});
$("body").append($i);
$i.animate({
"top": y - 180,
"opacity": 0
},
1500,
function() {
$i.remove();
});
});
});
</script>
<script>
! function() {
//封装方法，压缩之后减少文件大小
function get_attribute(node, attr, default_value) {
return node.getAttribute(attr) || default_value;
}
//封装方法，压缩之后减少文件大小
function get_by_tagname(name) {
return document.getElementsByTagName(name);
}
//获取配置参数
function get_config_option() {
var scripts = get_by_tagname("script"),
script_len = scripts.length,
script = scripts[script_len - 1]; //当前加载的script
return {
l: script_len, //长度，用于生成id用
z: get_attribute(script, "zIndex", -1), //z-index
o: get_attribute(script, "opacity", 0.5), //opacity
c: get_attribute(script, "color", "0,0,0"), //color
n: get_attribute(script, "count", 99) //count
};
}
//设置canvas的高宽
function set_canvas_size() {
canvas_width = the_canvas.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
canvas_height = the_canvas.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}
//绘制过程
function draw_canvas() {
context.clearRect(0, 0, canvas_width, canvas_height);
//随机的线条和当前位置联合数组
var e, i, d, x_dist, y_dist, dist; //临时节点
//遍历处理每一个点
random_lines.forEach(function(r, idx) {
r.x += r.xa,
r.y += r.ya, //移动
r.xa *= r.x > canvas_width || r.x < 0 ? -1 : 1,
r.ya *= r.y > canvas_height || r.y < 0 ? -1 : 1, //碰到边界，反向反弹
context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); //绘制一个宽高为1的点
//从下一个点开始
for (i = idx + 1; i < all_array.length; i++) {
e = all_array[i];
//不是当前点
if (null !== e.x && null !== e.y) {
x_dist = r.x - e.x, //x轴距离 l
y_dist = r.y - e.y, //y轴距离 n
dist = x_dist * x_dist + y_dist * y_dist; //总距离, m
dist < e.max && (e === current_point && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), //靠近的时候加速
d = (e.max - dist) / e.max,
context.beginPath(),
context.lineWidth = d / 2,
context.strokeStyle = "rgba(" + config.c + "," + (d + 0.2) + ")",
context.moveTo(r.x, r.y),
context.lineTo(e.x, e.y),
context.stroke());
}
}
}), frame_func(draw_canvas);
}
//创建画布，并添加到body中
var the_canvas = document.createElement("canvas"), //画布
config = get_config_option(), //配置
canvas_id = "c_n" + config.l, //canvas id
context = the_canvas.getContext("2d"), canvas_width, canvas_height,
frame_func = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(func) {
window.setTimeout(func, 1000 / 45);
}, random = Math.random,
current_point = {
x: null, //当前鼠标x
y: null, //当前鼠标y
max: 20000
},
all_array;
the_canvas.id = canvas_id;
the_canvas.style.cssText = "position:fixed;top:0;left:0;z-index:" + config.z + ";opacity:" + config.o;
get_by_tagname("body")[0].appendChild(the_canvas);
//初始化画布大小
set_canvas_size(), window.onresize = set_canvas_size;
//当时鼠标位置存储，离开的时候，释放当前位置信息
window.onmousemove = function(e) {
e = e || window.event, current_point.x = e.clientX, current_point.y = e.clientY;
}, window.onmouseout = function() {
current_point.x = null, current_point.y = null;
};
//随机生成config.n条线位置信息
for (var random_lines = [], i = 0; config.n > i; i++) {
var x = random() * canvas_width, //随机位置
y = random() * canvas_height,
xa = 2 * random() - 1, //随机运动方向
ya = 2 * random() - 1;
random_lines.push({
x: x,
y: y,
xa: xa,
ya: ya,
max: 12000 //沾附距离
});
}
all_array = random_lines.concat([current_point]);
//0.1秒后绘制
setTimeout(function() {
draw_canvas();
}, 100);
}();
</script>
<script>
var container = document.getElementById("main");
container.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=50,finishOpacity=50)";
container.style.opacity = "0.8";
</script>
(3) 页脚添加进度条
<!-- 进度条 -->
<style>
progress {
position: fixed;
left: 0;
right: 0;
bottom: 0;
width: 100%;
text-align: center;
height: 0.5rem;
border: 1px solid #999;
border-radius: 1rem;
z-index: 5;
-webkit-apperance: none;
}
::-webkit-progress-bar {
background-color: #eee;
border-radius: 1rem;
}
::-webkit-progress-value {
background-color: #169fe6ad;
border-radius: 1rem;
}
</style>
<script type="text/javascript">
// 生成元素并添加到文档尾部
var progress = document.createElement('progress');
progress.id = 'progress';
document.body.appendChild(progress);
// 计算当前页面的高度并赋值给进度条
var H;
window.onload = function () {
progress.max = H = home.scrollHeight;
progress.value = 0;
}
// 监听滚动，实时计算滚动条进度值
window.onscroll = function () {
var h = document.documentElement.scrollTop || document.body.scrollTop;
progress.value = h;
var radio = (h / H >= 1) ? 1 : h / H;
progress.innerHTML = progress.title = Math.floor(100 * radio) + '%';
}
</script>
