新年到，好运多，快来抽取你的新年幸运签吧！

PK创意闹新春，我正在参加「春节创意投稿大赛」

前言

说到春节，我脑海里冒出的第一个环节是打扫屋子，贴春联，挂灯笼，第二环节是一家人团聚看着春节联欢晚会吃着年夜饭，第三环节一般是吃完晚饭然后零点的时候放烟花还有就是守岁。除夕夜大概就这样过去了，然后正月里一般都会提着礼盒去亲戚家拜年，还有就是有一部分人会去庙宇里求签，今天的主题就是新年幸运签，快来抽取你的新年幸运签吧，下面我们来看看是怎么实现一个简易版的抽签小功能。

一.整体效果图

二.功能实现分解

1.字体跑马灯效果，主要有三个点，@1是颜色池，后面结合随机函数实现颜色随机，@2是js里的定时任务，这里设置的是500ms切换到下一个颜色

function changeColor() {
    @1可自定义
    var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
    color = color.split("|");
    @2随机颜色 作用与div
    document.getElementById("content_div").style.color = color[parseInt(Math.random() * color.length)];
}
@3颜色切换间隔
setInterval("changeColor()", 500);
复制代码

2.春节/元宵节倒计时，原理很简单，春节/元宵节与当前的时间差，值得注意的是因为有运算所以得页面完全加载才会显示出来

$(document).ready(function () {
    //简陋版的新年倒计时
    setInterval(function () {
        var weeks = ["日", "一", "二", "三", "四", "五", "六"];
        var nowTime = new Date()
     //结束时间
        var targetTime = new Date('2022-02-15 00:00:00');    
        // 计算事件差
        var offsetTime = targetTime.getTime() - nowTime.getTime();
        if (offsetTime > 0) {
            offsetTime = parseInt(offsetTime / 1000)
            // 获取总天数 = 总秒数 / 一天的秒数
            var days = parseInt(offsetTime / (24 * 60 * 60))
            // 获取不足一天的小时数 = 不足一天的总秒数 / 一小时的总秒数
            var hours = parseInt(offsetTime % (24 * 60 * 60) / (60 * 60))
            // 获取不足一小时的分钟数 = 不足一小时的总秒数 / 一分钟的总秒数
            var minutes = parseInt(offsetTime % (60 * 60) / 60)
            // 获取不足一分钟的秒数
            var seconds = offsetTime % 60
            $('.date').html("今天是" + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 星期" + weeks[today.getDay()] + " " + "距离2022年元宵节还有" + days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒");

        } else {
            $('.date').html("今天是" + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 星期" + weeks[today.getDay()]);

        }
    }, 1000)
});
复制代码

3.抽签功能 1)概率分布，自定义的吉祥语概率随机分布

function random(seed1, seed2) {
    var n = seed1 % 11117;
    for (var i = 0; i < 100 + seed2; i++) {
        n = n * n;
        n = n % 11117; // 11117 是个质数
    }
    return n;
}
复制代码

2)遮罩层，点击摇签小人后移除摇签小人所在的div，显示自定义的吉祥语

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

复制代码

function showCard(selector, duration, complete) {
    $(selector).animate({top: '-1px'}, duration, 'swing', complete);
}
复制代码

3)鼠标移动到指定div变成小手，可以抽签和摸摸右下角的小老虎，哈哈

cursor: pointer
复制代码

小结

原本计划是年前发布的，而且还有幸运签页显示，一直被这样那样的事情耽搁了，后续完善吧，还有十分尴尬的就是原来的身份证照片有点老了，在gitee上没能实名通过，新的身份证办理中还没有下来，页面发布不上去，只能后面再放链接了。