前言
说到春节，我脑海里冒出的第一个环节是打扫屋子，贴春联，挂灯笼，第二环节是一家人团聚看着春节联欢晚会吃着年夜饭，第三环节一般是吃完晚饭然后零点的时候放烟花还有就是守岁。除夕夜大概就这样过去了，然后正月里一般都会提着礼盒去亲戚家拜年，还有就是有一部分人会去庙宇里求签，今天的主题就是新年幸运签，快来抽取你的新年幸运签吧，下面我们来看看是怎么实现一个简易版的抽签小功能。
一.整体效果图
二.功能实现分解
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上没能实名通过，新的身份证办理中还没有下来，页面发布不上去，只能后面再放链接了。
