PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

When it comes to the Spring Festival, the first link in my mind is cleaning the house, pasting Spring Festival couplets and hanging lanterns. The second link is family reunion and watching the Spring Festival Gala and eating the New Year’s Eve dinner. The third link is usually having dinner and then setting off fireworks at midnight and staying up late. The New Year’s Eve probably passed like this, and then in the first month generally will carry the gift box to relatives home, there is a part of the people will go to the temple to ask for a sign, today’s theme is the New Year lucky sign, come to draw your New Year lucky sign, let’s see how to achieve a simple version of the lottery small function.

I. Overall effect drawing

Two. Function implementation decomposition

1. Font running light effect, mainly has three points, @1 is the color pool, followed by the random function to achieve the random color, @2 is the timing task in JS, set here is 500ms to switch to the next color

function changeColor() {@1Can be customizedvar color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
    color = color.split("|");
    @2Random color works with divdocument.getElementById("content_div").style.color = color[parseInt(Math.random() * color.length)];
}
@3Color switching intervalsetInterval("changeColor()".500);
Copy the code

2. Spring Festival/Lantern Festival countdown, the principle is very simple, Spring Festival/Lantern Festival and the current time difference, it is worth noting that because there is an operation so the page will be fully loaded will be displayed

$(document).ready(function () {
    // A crude version of the New Year's Countdown
    setInterval(function () {
        var weeks = ["Day"."一"."二"."Three"."Four"."Five"."Six"];
        var nowTime = new Date(a)// End time
        var targetTime = new Date('2022-02-15 00:00:00');    
        // Calculate the event difference
        var offsetTime = targetTime.getTime() - nowTime.getTime();
        if (offsetTime > 0) {
            offsetTime = parseInt(offsetTime / 1000)
            // Get total days = total seconds/number of seconds in a day
            var days = parseInt(offsetTime / (24 * 60 * 60))
            // Get the number of hours less than a day = the total number of seconds less than a day/the total number of seconds in an hour
            var hours = parseInt(offsetTime % (24 * 60 * 60)/(60 * 60))
            // Get minutes less than an hour = total seconds less than an hour/total seconds in a minute
            var minutes = parseInt(offsetTime % (60 * 60) / 60)
            // Get the number of seconds less than a minute
            var seconds = offsetTime % 60
            $('.date').html("Today is" + today.getFullYear() + "Year" + (today.getMonth() + 1) + "Month" + today.getDate() + "Day week" + weeks[today.getDay()] + "" + "Lantern Festival 2022 is still a long way off." + days + "Day" + hours + "Hour" + minutes + "Minutes" + seconds + "Seconds");

        } else{$('.date').html("Today is" + today.getFullYear() + "Year" + (today.getMonth() + 1) + "Month" + today.getDate() + "Day week"+ weeks[today.getDay()]); }},1000)});Copy the code

3. Lottery function

1) Probability distribution, custom probability random distribution of auspicious words

function random(seed1, seed2) {
    var n = seed1 % 11117;
    for (var i = 0; i < 100 + seed2; i++) {
        n = n * n;
        n = n % 11117; // 11117 is prime
    }
    return n;
}
Copy the code

2) Mask layer: click on the signifier to remove the div where the signifier is located and display the custom auspicious words

function slide() {
    if (slidecount > 35) {
        return;
    }

    var duration = slidecount > 33 ? 1500 :
        (slidecount > 32 ? 800 :
            (slidecount > 25 ? 400 :
                (slidecount > 20 ? 200 :
                    (slidecount > 15 ? 150 : 100))));

    var cardInfo = getNextCardText();
    card = $('<div class="card">' +
        '<div class="title" style="color: crimson">' + cardInfo.title + '</div>'
    );
    tail.after(card);
    tail = card;
    slidecount++;
    showCard(card, duration, slide);
}

Copy the code
function showCard(selector, duration, complete) {
    $(selector).animate({top: '-1px'}, duration, 'swing', complete);
}
Copy the code

3) Move the mouse to the specified div into a small hand, you can draw lots and touch the small tiger in the lower right corner, ha ha

cursor: pointer
Copy the code

summary

Released by the original plan was years ago, and there are lucky sign page display, always was delayed by such and such things, subsequent perfect, there are awkward is the original id card photo is a bit old, can’t real-name through on gitee, new id card is dealt with is not down, page will not come, can only be put behind the link.