jQuery程序员求签特效js代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery程序员求签特效js代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery程序员求签特效</title>
<script src="js/jquery.min.js"></script>
<style type="text/css" media="screen">
body * {
font-family: "Consolas", "Microsoft Yahei", Arial, sans-serif;
}

div {
    font-size: 10pt;
}

body {
    background: white;
    margin: 0;
    padding: 0;
}

.container {
    width: 320px;
    margin: 0 auto 50px;
}

.info {
    text-align: center;
    color: #dc143c;
    font-size: 9pt;
}

.info strong {
    background:crimson;
    color: white;
    padding:0 3px;
    margin: 0 1px;
}

.container>.title {
    color: #bbb;
    font-weight: bold;
    margin-bottom: 10px;
    background: #555;
    padding: 5px 15px;
    font-size: 120%;
}

.date {
    font-size: 17pt;
    font-weight: bold;
    line-height: 30pt;
    text-align: center;
    border-bottom: 1px solid #999;
}

.check_luck {
    padding-top: 10px;
}

.selecttable {
    width: 100%;
}

.selecttable td {
    text-align: center;
    padding: 10px 0;
    margin: 1px;
    background: #ccc;
    cursor: pointer;
    width: 20%;
    border-radius:2px;
}

.selecttable td:hover {
    background: #aaa;
}

.selecttable td.selected {
    background: #333;
    color: #fff;
}

.roll {
    height: 200px;
    border:1px solid #faa;
    margin-top:10px;
    overflow: hidden;
    position: relative;
}

.card {
    background:#ffffff;
    text-align: center;
    line-height: 200px;
    border-top: 1px solid #faa;
    position: absolute;
    top: 201px;
    width: 100%;
}

.card .title {
    font-size: 70pt;
    font-weight: bold;
}

.card.clickable {
    background: crimson;
    color: #ffffff;
    cursor: pointer;
}

    </style>
</head>
<body>
	<div class="container">
		<div class="title">
	程序员求签
			<sup>
				beta
			</sup>
	</div>
	<div class="info">
		<strong>求</strong>婚丧嫁娶亲友疾病编程测试升职跳槽陨石核弹各类吉凶
	</div>
	<div class="date">
	</div>
	<div class="check_luck">
		<ul style="margin-top:0;padding-left:30px;line-height:130%">
			<li>编码测试修复提交之前求一签，可避凶趋吉</li>
			<li>选择所求之事并在心中默念，再单击“求”即可</li>
			<li>同一件事只能求一次，下次再求请刷新页面</li>
		</ul>
		<table class="event_table selecttable">
			<tr>
				<td class="" data-event="100">
					编码
				</td>
				<td class="" data-event="200">
					测试
				</td>
				<td class="" data-event="300">
					修复BUG
				</td>
				<td class="" data-event="400">
					提交代码
				</td>
				<td class="" data-event="500">
					其他
				</td>
			</tr>
		</table>
	</div>
	<div class="roll">
		<div class="card" style="top:-1px;font-size:20pt">
			请点击所求之事
		</div>
		<div class="card clickable">
			<div class="title">
				求
			</div>
		</div>
	</div>
		
</div>

<script>
//
/*
 * 注意：本程序中的“随机”都是伪随机概念。
 * 第一个种子相对固定，第二个种子相对有更多变化
 */
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;
}

// 从数组中随机挑选 size 个
function pickRandom(array, size) {
    var result = [];

    for (var i = 0; i < array.length; i++) {
        result.push(array[i]);
    }

    for (var j = 0; j < array.length - size; j++) {
        var index = random(iday, j) % result.length;
        result.splice(index, 1);
    }

    return result;
}

var weeks = ["日", "一", "二", "三", "四", "五", "六"];
function getTodayString() {
    return "今天是" + today.getFullYear() + "年" + (today.getMonth() + 1) + "月" + today.getDate() + "日 星期" + weeks[today.getDay()];
}

var today = new Date();
var timeseed = today.getMilliseconds();

/////////////////////////////////////////////////////////

var results = ['超大吉', '大吉', '吉', '小吉', ' ', '小凶', '凶', '大凶', '超大凶'];
var descriptions = ['','','','','','','','',''];
var luck_rate = [10, 100, 500, 800, 300, 800, 500, 100, 10]; // 吉凶概率分布，总数为 3120



function pickRandomWithRate(seed1, seed2) {
    var result = random(seed1, seed2) % 3120;
    var addup = 0;
    
    for (var i = 0; i < luck_rate.length; i++) {
        addup += luck_rate[i];
        if (result <= addup) {
            return {title: results[i], desc: descriptions[i]};
        }
    }
    return {title:' ', desc: ''};
}

/////////////////////////////////////////////////////////
var selectedEvent = null;

function initEventTable() {
    $('.event_table td').click(function() {
        $('.event_table td').removeClass('selected');
        $(this).addClass('selected'); 
        selectedEvent = $(this).data('event');
        
        $('div.card.clickable').nextAll().remove();
        showCard('div.card.clickable', 300);
    });
}

// TODO 概率分布
function getNextCardText() {
    return pickRandomWithRate(timeseed + selectedEvent, slidecount);
}

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

var tail, slidecount = 0;

function initClickEvent() {
    $('div.card.clickable').click(function() {
        tail = $('div.card.clickable');
        slidecount = 0;
        slide();
    });
}

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">' + cardInfo.title + '</div>' +
                     '<div class="desc">' + cardInfo.desc + '</div>' +
                     '</div>');
    tail.after(card);
    tail = card;
    slidecount++;
    showCard(card, duration, slide);
}

$(function() {
    $('.date').html(getTodayString());
    initEventTable();
    initClickEvent();
});
</script>
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)