本文实例讲述了jquery老黄历实现方法。分享给大家供大家参考。具体实现方法分析如下：
先来看看程序运行效果：
html页面部分如下：
复制代码 代码如下:
jquery老黄历特效 -
程序员老黄历beta
宜
不宜
座位朝向：面向写程序，bug 最少。
今日宜饮：
女神亲近指数：
style.css样式如下：
复制代码 代码如下:
body * {
font-family:consolas,microsoft yahei, arial, sans-serif;
}body {
background: white;
margin: 0;
padding: 0;
}
.container {
width: 320px;
margin: 0 auto 50px;
}
.container>.title {
color: #bbb;
font-weight: bold;
margin-bottom: 10px;
background: #555;
padding: 5px 15px;
}
.date{
font-size:17pt;
font-weight: bold;
line-height: 30pt;
text-align: center;
}
.split, .clear {
clear: both;
height: 1px;
overflow-y: hidden;
}
.good, .bad {
clear: both;
position: relative;
}
.bad {
/*top: -1px;*/
}
.good .title, .bad .title {
float: left;
width: 100px;
font-weight: bold;
text-align: center;
font-size: 30pt;
position:absolute;
top:0;
bottom:0;
}
.good .title>table, .bad .title>table {
position:absolute;
width:100%;
height:100%;
border:none;
}
.good .title {
background: #ffee44;
}
.bad .title {
background: #ff4444;
color: #fff;
}
.good .content, .bad .content {
margin-left: 115px;
padding-right: 10px;
padding-top: 1px;
font-size:15pt;
}
.good {
background: #ffffaa;
}
.bad {
background: #ffddd3;
}
.content ul {
list-style: none;
margin:10px 0 0;
padding:0;
}
.content ul li {
line-height:150%;
font-size: 15pt;
font-weight: bold;
color: #444;
}
.content ul li div.description {
font-size: 10pt;
font-weight: normal;
color: #777;
line-height: 110%;
margin-bottom: 10px;
}
.line-tip {
font-size: 11pt;
margin-top: 10px;
margin-left: 10px;
}
.direction_value {
color:#4a4;
font-weight: bold;
}
.comment {
margin-top: 50px;
font-size: 11pt;
margin-left: 10px;
}
.comment ul {
margin-left: 0;
padding-left: 20px;
color: #999;
}
almanac.js代码如下：
复制代码 代码如下:
/*
* 注意：本程序中的“随机”都是伪随机概念，以当前的天为种子。
*/
function random(dayseed, indexseed) {
var n = dayseed % 11117;
for (var i = 0; i n = n * n;
n = n % 11117; // 11117 是个质数
}
return n;
}var today = new date();
var iday = today.getfullyear() * 10000 + (today.getmonth() + 1) * 100 + today.getdate();
var weeks = [日,一,二,三,四,五,六];
var directions = [北方,东北方,东方,东南方,南方,西南方,西方,西北方];
var activities = [
{name:写单元测试, good:写单元测试将减少出错,bad:写单元测试会降低你的开发效率},
{name:洗澡, good:你几天没洗澡了？,bad:会把设计方面的灵感洗掉},
{name:锻炼一下身体, good:,bad:能量没消耗多少，吃得却更多},
{name:抽烟, good:抽烟有利于提神，增加思维敏捷,bad:除非你活够了，死得早点没关系},
{name:白天上线, good:今天白天上线是安全的,bad:可能导致灾难性后果},
{name:重构, good:代码质量得到提高,bad:你很有可能会陷入泥潭},
{name:使用%t, good:你看起来更有品位,bad:别人会觉得你在装逼},
{name:跳槽, good:该放手时就放手,bad:鉴于当前的经济形势，你的下一份工作未必比现在强},
{name:招人, good:你遇到千里马的可能性大大增加,bad:你只会招到一两个混饭吃的外行},
{name:面试, good:面试官今天心情很好,bad:面试官不爽，会拿你出气},
{name:提交辞职申请, good:公司找到了一个比你更能干更便宜的家伙，巴不得你赶快滚蛋,bad:鉴于当前的经济形势，你的下一份工作未必比现在强},
{name:申请加薪, good:老板今天心情很好,bad:公司正在考虑裁员},
{name:晚上加班, good:晚上是程序员精神最好的时候,bad:},
{name:在妹子面前吹牛, good:改善你矮穷挫的形象,bad:会被识破},
{name:撸管, good:避免缓冲区溢出,bad:小撸怡情，大撸伤身，强撸灰飞烟灭},
{name:浏览成人网站, good:重拾对生活的信心,bad:你会心神不宁},
{name:命名变量\%v\, good:,bad:},
{name:写超过%l行的方法, good:你的代码组织的很好，长一点没关系,bad:你的代码将混乱不堪，你自己都看不懂},
{name:提交代码, good:遇到冲突的几率是最低的,bad:你遇到的一大堆冲突会让你觉得自己是不是时间穿越了},
{name:代码复审, good:发现重要问题的几率大大增加,bad:你什么问题都发现不了，白白浪费时间},
{name:开会, good:写代码之余放松一下打个盹，有益健康,bad:你会被扣屎盆子背黑锅},
{name:打dota, good:你将有如神助,bad:你会被虐的很惨},
{name:晚上上线, good:晚上是程序员精神最好的时候,bad:你白天已经筋疲力尽了},
{name:修复bug, good:你今天对bug的嗅觉大大提高,bad:新产生的bug将比修复的更多},
{name:设计评审, good:设计评审会议将变成头脑风暴,bad:人人筋疲力尽，评审就这么过了},
{name:需求评审, good:,bad:},
{name:上微博, good:今天发生的事不能错过,bad:会被老板看到},
{name:上ab站, good:还需要理由吗？,bad:会被老板看到}
];
var specials = [
{date:20130221, type:'good', name:'防核演习', description:'万一哪个疯子丢颗核弹过来...'}
];
var tools = [eclipse写程序, msoffice写文档, 记事本写程序, windows8, linux, macos, ie, android设备, ios设备];
var varnames = [jieguo, huodong, pay, expire, zhangdan, every, free, i1, a, virtual, ad, spider, mima, pass, ui];
var drinks = [水,茶,红茶,绿茶,咖啡,奶茶,可乐,牛奶,豆奶,果汁,果味汽水,苏打水,运动饮料,酸奶,酒];
function gettodaystring() {
return 今天是 + today.getfullyear() + 年 + (today.getmonth() + 1) + 月 + today.getdate() + 日 星期 + weeks[today.getday()];
}
// 生成今日运势
function picktodaysluck() {
var numgood = random(iday, 98) % 3 + 2;
var numbad = random(iday, 87) % 3 + 2;
var eventarr = pickrandomactivity(numgood + numbad);
var specialsize = pickspecials();
for (var i = 0; i addtogood(eventarr[i]);
}
for (var i = 0; i addtobad(eventarr[numgood + i]);
}
}
// 添加预定义事件
function pickspecials() {
var specialsize = [0,0];
for (var i = 0; i var special = specials[i];
if (iday == special.date) {
if (special.type == 'good') {
specialsize[0]++;
addtogood({name: special.name, good: special.description});
} else {
specialsize[1]++;
addtobad({name: special.name, bad: special.description});
}
}
}
return specialsize;
}
// 从 activities 中随机挑选 size 个
function pickrandomactivity(size) {
var picked_events = pickrandom(activities, size);
for (var i = 0; i picked_events[i] = parse(picked_events[i]);
}
return picked_events;
}
// 从数组中随机挑选 size 个
function pickrandom(array, size) {
var result = [];
for (var i = 0; i result.push(array[i]);
}
for (var j = 0; j var index = random(iday, j) % result.length;
result.splice(index, 1);
}
return result;
}
// 解析占位符并替换成随机内容
function parse(event) {
var result = {name: event.name, good: event.good, bad: event.bad}; // clone
if (result.name.indexof('%v') != -1) {
result.name = result.name.replace('%v', varnames[random(iday, 12) % varnames.length]);
}
if (result.name.indexof('%t') != -1) {
result.name = result.name.replace('%t', tools[random(iday, 11) % tools.length]);
}
if (result.name.indexof('%l') != -1) {
result.name = result.name.replace('%l', (random(iday, 12) % 247 + 30).tostring());
}
return result;
}
// 添加到“宜”
function addtogood(event) {
$('.good .content ul').append('
' + event.name + '
' + event.good + '
');
}// 添加到“不宜”
function addtobad(event) {
$('.bad .content ul').append('
' + event.name + '
' + event.bad + '
');
}$(function(){
$('.date').html(gettodaystring());
$('.direction_value').html(directions[random(iday, 2) % directions.length]);
$('.drink_value').html(pickrandom(drinks,2).join());
$('.goddes_value').html(random(iday, 6) % 50 / 10.0);
picktodaysluck();
});
希望本文所述对大家的jquery程序设计有所帮助。