博客园美化-随季节变化实现不同的飘落效果

博客园美化-随季节变化实现不同的飘落效果 - Liming_Code - 博客园

最近在研究博客园的美化效果，看到有一个樱花飘落的效果，忽然突发奇想，如果能根据当前日期所处的季节实现不同的飘落效果岂不是更酷。😂

预览效果
我的思路其实很简单，现在已经找到一个樱花的飘落效果，通过阅读代码其实可以发现，特效中的樱花用的是一张图片，图片被转换成base64编码的字符串形式保存，我们只要在不同的季节绘制不同的图片就行了，春天飘🌸樱花、夏天飘🍃叶子、秋天飘🍁枫叶、冬天飘❄雪花。
然后我们还要获取当前日期所处的季节，我打算用节气，这样比较准确，获取日期所在节气的代码如下：

javascript

function getJq(yyyy, mm, dd) {
    mm = mm - 1;
    var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
    var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
    var solarTerms = "";
    //　　此方法是获取该日期是否为某节气
    //    var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
    //    var tmp2 = tmp1.getUTCDate();
    //    if (tmp2==dd)
    //        solarTerms = solarTerm[mm*2+1];
    //    console.log(solarTerms);
    //    tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
    //    tmp2= tmp1.getUTCDate();
    //    if (tmp2==dd)
    //        solarTerms = solarTerm[mm*2];

    //　　此方法可以获取该日期处于某节气
    while (solarTerms == "") {
        var tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
        var tmp2 = tmp1.getUTCDate();
        if (tmp2 == dd) solarTerms = solarTerm[mm * 2 + 1];
        tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
        tmp2 = tmp1.getUTCDate(); if (tmp2 == dd) solarTerms = solarTerm[mm * 2];
        if (dd > 1) {
            dd = dd - 1;
        } else {
            mm = mm - 1;
            if (mm < 0) {
                yyyy = yyyy - 1; mm = 11;
            }
            dd = 31;
        }
    }
    return solarTerms;
}

百度yyds
然后就比较简单了，对节气进行判断就可以了

javascript

$(function () {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let day = now.getDate();
    // 获取节气
    let jq = getJq(year, month, day);
    if (jq == "立春" || jq == "雨水" || jq == "惊蛰" || jq == "春分" || jq == "清明" || jq == "谷雨") {
        img.src = sakuraImage;
    } else if (jq == "立夏" || jq == "小满" || jq == "芒种" || jq == "夏至" || jq == "小暑" || jq == "大暑") {
        img.src = leafImage;
    } else if (jq == "立秋" || jq == "处暑" || jq == "白露" || jq == "秋分" || jq == "寒露" || jq == "霜降") {
        img.src = mapleLeavesImage;
    } else if (jq == "立冬" || jq == "小雪" || jq == "大雪" || jq == "冬至" || jq == "小寒" || jq == "大寒") {
        img.src = snowflakeImage;
    }
    //开启飘落效果
    let system = {};
    let p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
    if (system.win || system.mac || system.xll) {
        //如果是电脑
        startFalling();
    }
});

js实现代码如下,也可以通过链接获取：https://blog-static.cnblogs.com/files/blogs/601654/falling-effect.v1.js
使用之前需要先引入JQuery

javascript

var stop, staticx;
var img = new Image();
// 图片Data URL就不放了，实在是太长了，可以通过链接获取完成代码，也可以替换成自己喜欢的图片
var sakuraImage = "樱花图片";
var mapleLeavesImage = "枫叶图片";
var snowflakeImage = "雪花图片";
var leafImage = "叶子图片";
img.src = sakuraImage;

function FallingObject(x, y, s, r, fn) {
    this.x = x;
    this.y = y;
    this.s = s;
    this.r = r;
    this.fn = fn;
}

FallingObject.prototype.draw = function (cxt) {
    cxt.save();
    var xc = 40 * this.s / 4;
    cxt.translate(this.x, this.y);
    cxt.rotate(this.r);
    cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
    cxt.restore();
}

FallingObject.prototype.update = function () {
    this.x = this.fn.x(this.x, this.y);
    this.y = this.fn.y(this.y, this.y);
    this.r = this.fn.r(this.r);
    if (this.x > window.innerWidth ||
        this.x < 0 ||
        this.y > window.innerHeight ||
        this.y < 0
    ) {
        this.r = getRandom('fnr');
        if (Math.random() > 0.4) {
            this.x = getRandom('x');
            this.y = 0;
            this.s = getRandom('s');
            this.r = getRandom('r');
        } else {
            this.x = window.innerWidth;
            this.y = getRandom('y');
            this.s = getRandom('s');
            this.r = getRandom('r');
        }
    }
}

FallingObjectList = function () {
    this.list = [];
}
FallingObjectList.prototype.push = function (fallingObject) {
    this.list.push(fallingObject);
}
FallingObjectList.prototype.update = function () {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].update();
    }
}
FallingObjectList.prototype.draw = function (cxt) {
    for (var i = 0, len = this.list.length; i < len; i++) {
        this.list[i].draw(cxt);
    }
}
FallingObjectList.prototype.get = function (i) {
    return this.list[i];
}
FallingObjectList.prototype.size = function () {
    return this.list.length;
}

function getRandom(option) {
    var ret, random;
    switch (option) {
        case 'x':
            ret = Math.random() * window.innerWidth;
            break;
        case 'y':
            ret = Math.random() * window.innerHeight;
            break;
        case 's':
            ret = Math.random();
            break;
        case 'r':
            ret = Math.random() * 6;
            break;
        case 'fnx':
            random = -0.5 + Math.random() * 1;
            ret = function (x, y) {
                return x + 0.5 * random - 1.7;
            };
            break;
        case 'fny':
            random = 1.5 + Math.random() * 0.7
            ret = function (x, y) {
                return y + random;
            };
            break;
        case 'fnr':
            random = Math.random() * 0.03;
            ret = function (r) {
                return r + random;
            };
            break;
    }
    return ret;
}
// 开启飘落效果
function startFalling() {
    requestAnimationFrame = window.requestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        window.oRequestAnimationFrame;
    var canvas = document.createElement('canvas'),
        cxt;
    staticx = true;
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;z-index: -1;');
    canvas.setAttribute('id', 'canvas_sakura');
    document.getElementsByTagName('body')[0].appendChild(canvas);
    cxt = canvas.getContext('2d');
    var fallingObjectList = new FallingObjectList();
    for (var i = 0; i < 15; i++) {
        var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
        randomX = getRandom('x');
        randomY = getRandom('y');
        randomR = getRandom('r');
        randomS = getRandom('s');
        randomFnx = getRandom('fnx');
        randomFny = getRandom('fny');
        randomFnR = getRandom('fnr');
        sakura = new FallingObject(randomX, randomY, randomS, randomR, {
            x: randomFnx,
            y: randomFny,
            r: randomFnR
        });
        sakura.draw(cxt);
        fallingObjectList.push(sakura);
    }
    stop = requestAnimationFrame(function () {
        cxt.clearRect(0, 0, canvas.width, canvas.height);
        fallingObjectList.update();
        fallingObjectList.draw(cxt);
        stop = requestAnimationFrame(arguments.callee);
    })
}

window.onresize = function () {
    var canvasSnow = document.getElementById('canvas_snow');
    canvasSnow.width = window.innerWidth;
    canvasSnow.height = window.innerHeight;
}

function stopp() {
    if (staticx) {
        var child = document.getElementById("canvas_sakura");
        child.parentNode.removeChild(child);
        window.cancelAnimationFrame(stop);
        staticx = false;
    } else {
        startFalling();
    }
}

// 获取日期所在节气
function getJq(yyyy, mm, dd) {
    mm = mm - 1;
    var sTermInfo = new Array(0, 21208, 42467, 63836, 85337, 107014, 128867, 150921, 173149, 195551, 218072, 240693, 263343, 285989, 308563, 331033, 353350, 375494, 397447, 419210, 440795, 462224, 483532, 504758);
    var solarTerm = new Array("小寒", "大寒", "立春", "雨水", "惊蛰", "春分", "清明", "谷雨", "立夏", "小满", "芒种", "夏至", "小暑", "大暑", "立秋", "处暑", "白露", "秋分", "寒露", "霜降", "立冬", "小雪", "大雪", "冬至");
    var solarTerms = "";
    //　　此方法是获取该日期是否为某节气
    //    var tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2+1]*60000)+Date.UTC(1900,0,6,2,5));
    //    var tmp2 = tmp1.getUTCDate();
    //    if (tmp2==dd)
    //        solarTerms = solarTerm[mm*2+1];
    //    console.log(solarTerms);
    //    tmp1 = new Date((31556925974.7*(yyyy-1900)+sTermInfo[mm*2]*60000)+Date.UTC(1900,0,6,2,5));
    //    tmp2= tmp1.getUTCDate();
    //    if (tmp2==dd)
    //        solarTerms = solarTerm[mm*2];

    //　　此方法可以获取该日期处于某节气
    while (solarTerms == "") {
        var tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2 + 1] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
        var tmp2 = tmp1.getUTCDate();
        if (tmp2 == dd) solarTerms = solarTerm[mm * 2 + 1];
        tmp1 = new Date((31556925974.7 * (yyyy - 1900) + sTermInfo[mm * 2] * 60000) + Date.UTC(1900, 0, 6, 2, 5));
        tmp2 = tmp1.getUTCDate(); if (tmp2 == dd) solarTerms = solarTerm[mm * 2];
        if (dd > 1) {
            dd = dd - 1;
        } else {
            mm = mm - 1;
            if (mm < 0) {
                yyyy = yyyy - 1; mm = 11;
            }
            dd = 31;
        }
    }
    return solarTerms;
}

$(function () {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let day = now.getDate();
    // 获取节气
    let jq = getJq(year, month, day);
    if (jq == "立春" || jq == "雨水" || jq == "惊蛰" || jq == "春分" || jq == "清明" || jq == "谷雨") {
        img.src = sakuraImage;
    } else if (jq == "立夏" || jq == "小满" || jq == "芒种" || jq == "夏至" || jq == "小暑" || jq == "大暑") {
        img.src = leafImage;
    } else if (jq == "立秋" || jq == "处暑" || jq == "白露" || jq == "秋分" || jq == "寒露" || jq == "霜降") {
        img.src = mapleLeavesImage;
    } else if (jq == "立冬" || jq == "小雪" || jq == "大雪" || jq == "冬至" || jq == "小寒" || jq == "大寒") {
        img.src = snowflakeImage;
    }
    //开启飘落效果
    let system = {};
    let p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
    if (system.win || system.mac || system.xll) {
        //如果是电脑
        startFalling();
    }
});

使用方式如下：

将完整代码保存成JS😋
上传到自己的博客园文件😛
在设置-页脚HTML代码引入js,需要先引入JQuery🤗

xml

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 飘落特效，地址要记得替换成自己的哦，防止失效 -->
<script src="https://blog-static.cnblogs.com/files/blogs/601654/falling-effect.v1.js"></script>

保存，打开自己的博客🤣

现在根据季节变化就可以看到不同的飘落效果了，有兴趣的小伙伴可以去试试😉

__EOF__

Recommend

❤️马上七夕，不懂浪漫？带你用Python“码”上七夕【建议收藏】❤️

博客园主题分享-仿FANFOU-小清新主题

太阳的故事 (十四)

记一次接口慢查排查

Form validation in Rails

⭐️【2020东京奥运会】数据分析及可视化 ⭐️

Validate request params in Phoenix

Making fancy FPGA projects with external I/O using the GPIO

杜布里奇访谈录 (钱学森部分)

Twitter, Grifters, DevRels, and the end of everything as we know it

About Joyk