博客园样式美化（更新中~）

1. 会遇到如clientWidth undefined，这是可能是页面元素还未加载好，因此要把这个内容的js代码放在下面；
2. 设置style.top / style.left不生效，可能是后面没有加'px'的原因

更换背景

这里我将图片上传到博客园的文件下，并获取上传图片的url
css代码如下：

body{
    background: fixed; //使背景固定
    background-image: url(https://images.cnblogs.com/cnblogs_com/hhhaaa/1771413/o_200523020719timg.jpg);
}

鼠标点击效果

将以下代码放在页首HTML代码中

<script>

// 鼠标特效
var arrClick = ["一","心","搞","钱","💰"];
var index = 0;
window.onclick = function(ert) { //点击触发
    var word = document.createElement('elementA');
    word.onselectstart = new Function('ert=false');
    if(index==5){
        index = 0;
    }
    document.body.appendChild(word).innerHTML = this.arrClick[index++];
    var f = 12;//字体大小
    var x = ert.clientX - f/2; //横坐标
    var y = ert.clientY - f; //纵坐标
    var c = this.randomColor();//随机颜色
    var a = 1;//透明度
    var s = 1.2;//放大缩小
    var timer = this.setInterval(function(){
        if(a <= 0){
            document.body.removeChild(word);
            clearInterval(timer);
        }else{
            word.style.cssText = "font-size: 12px; font-weight: bold; cursor: default; position: fixed; color:"+c+";left:"+x+"px; top:"+y+"px;opacity:"+a+";transform:scale("+s+")";
            y--;
            a -= 0.016;
            s += 0.002;
        }
    },12)
}
// 随机颜色
function randomColor() {
    return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";
}
</script>

页面漂浮物

//漂浮

//漂浮物的横坐标轨迹是正弦曲线

//定义漂浮物个数
var num = 15; 
//dx变化值，xp横坐标，yp纵坐标,
var dx, xp, yp;
//am左右摆动的幅度，stx横向偏移步长，sty纵向偏移步长
var am, stx, sty;  
    
{
    //获取当前窗口的宽度
    clientWidth = document.body.clientWidth;
    //获取当前窗口的高度
    clientHeight = document.body.clientHeight;
}

var dx = new Array();
var xp = new Array();
var yp = new Array();
var am = new Array();
var stx = new Array();
var sty = new Array();
var flow = new Array();

for (i = 0; i < no; ++ i) {  
    dx[i] = 0;                        
    //第i个漂浮物的初始值
    xp[i] = Math.random()*(clientWidth-50);  
    yp[i] = Math.random()*clientHeight;
    am[i] = Math.random()*20;         
    stx[i] = 0.02 + Math.random()/10; 
    sty[i] = 0.7 + Math.random();     
    //新建包含flow的div，并设置其绝对坐标
    var flowDiv = document.createElement('div');
    flowDiv.setAttribute('id', 'dot'+ i);
    flowDiv.style.position = 'absolute';
    flowDiv.style.top = 15;
    flowDiv.style.left = 15;

    //生成漂浮物图片对象，设置宽高，并加入div
    var flowDivImg = document.createElement('p');
    flowDivImg.innerHTML="❄";
    flowDivImg.style.color= "white";
    flowDivImg.style.fontSize= "1px";
    flowDivImg.style.width = 30;
    flowDivImg.style.height = 30;

    //将雪花div加入到document中，并通过数组保存
    flowDiv.appendChild(flowDivImg);
    document.body.appendChild(flowDiv);
    flow[i] = flowDiv;
}


function snow() {  
    for (i = 0; i < no; ++ i) {  
        //第i个图片的纵坐标加上步长
        yp[i] += sty[i];
        //如果新坐标超过了屏幕下沿，重置信息，包括横坐标、纵坐标以及x方向的步长和y方向的步长
        if (yp[i] > clientHeight-50) {
            xp[i] = Math.random()*(clientWidth-am[i]-30);
            yp[i] = 0;
        }

        dx[i] += stx[i];//dx变量加上一个步长
        //直接操作数组中对应的雪花div
        var flowDiv = flow[i];
        //更新图片的纵坐标
        flowDiv.style.top = yp[i] + 'px';
        //更新图片的横坐标
        flowDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]) + 'px';
    }

    //设定动画刷新的时间周期
    setTimeout("snow()", 40);
}
//调用snow函数，页面加载时调用 
window.onload=snow;

播放器

放在博客侧边栏公告（支持HTML代码） （支持 JS 代码）中
music数组里的两个url都是上先将图片与音乐上传到文件里，然后获取url

<div id="player"  class="aplayer"></div>
<link href="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.css" rel="stylesheet">
<script src="https://files.cnblogs.com/files/shwee/APlayer.min_v1.10.1.js"></script> 
<script type="text/javascript">
    var ap = new APlayer({
        element: document.getElementById('player'),
        narrow: false,
        autoplay: true,      // 是否自动播放 
        showlrc: false,
        theme: 'gray',   //  插件背景颜色
        music: [{
                title: '如果我们不曾相遇',
                author: '五月天',
                url: 'https://files.cnblogs.com/files/hhhaaa/%E5%A6%82%E6%9E%9C%E6%88%91%E4%BB%AC%E4%B8%8D%E6%9B%BE%E7%9B%B8%E9%81%87-%E4%BA%94%E6%9C%88%E5%A4%A9.js',
                pic: 'https://images.cnblogs.com/cnblogs_com/hhhaaa/1771413/t_200526124539%E5%A6%82%E6%9E%9C%E6%88%91%E4%BB%AC%E4%B8%8D%E6%9B%BE%E7%9B%B8%E9%81%87.jpg'
            },
        ]
    });
    ap.init();
</script>