部落格園美化-隨季節變化實現不同的飄落效果

Liming_Code發表於2021-08-11

最近在研究部落格園的美化效果，看到有一個櫻花飄落的效果，忽然突發奇想，如果能根據當前日期所處的季節實現不同的飄落效果豈不是更酷。?
image
預覽效果
我的思路其實很簡單，現在已經找到一個櫻花的飄落效果，通過閱讀程式碼其實可以發現，特效中的櫻花用的是一張圖片，圖片被轉換成base64編碼的字串形式儲存，我們只要在不同的季節繪製不同的圖片就行了，春天飄?櫻花、夏天飄?葉子、秋天飄?楓葉、冬天飄❄雪花。
然後我們還要獲取當前日期所處的季節，我打算用節氣，這樣比較準確，獲取日期所在節氣的程式碼如下：

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
然後就比較簡單了，對節氣進行判斷就可以了

$(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

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();
    }
});

使用方式如下：

  1. 將完整程式碼儲存成JS?
    image
  2. 上傳到自己的部落格園檔案?
    image
  3. 在設定-頁尾HTML程式碼引入js,需要先引入JQuery?
<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>
  1. 儲存，開啟自己的部落格?

現在根據季節變化就可以看到不同的飄落效果了，有興趣的小夥伴可以去試試?

相關文章