jQuery老黄历完整实现方法

程序员文章站 2022-10-25 15:19:02

本文实例讲述了jquery老黄历实现方法。分享给大家供大家参考。具体实现方法分析如下：先来看看程序运行效果： html页面部分如下：代码如下:...

本文实例讲述了jquery老黄历实现方法。分享给大家供大家参考。具体实现方法分析如下：

先来看看程序运行效果：

jQuery老黄历完整实现方法

html页面部分如下：

代码如下:

<!doctype html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <title>jquery老黄历特效 -</title>
<script id="jquery_183" type="text/javascript" class="library" src="js/jquery-1.8.3.min.js"></script>
</head>
<script type="text/javascript" class="library" src="js/almanac.js"></script>
</head>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<body>
 
 
 程序员老黄历beta
 
 
 
 
 
 <table>
 <tr><td>宜</td></tr>
 </table>
 
 
 <ul></ul>
 
 
 
 
 
 
 <table>
 <tr><td>不宜</td></tr>
 </table>
 
 
 <ul></ul>
 
 
 
 
 
 座位朝向：面向写程序，bug 最少。
 
 
 今日宜饮：
 
 
 女神亲近指数：
 

 
</body>
</html>

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 p.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 < 100 + indexseed; 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 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 < numgood; i++) {
addtogood(eventarr[i]);
}
for (var i = 0; i < numbad; i++) {
addtobad(eventarr[numgood + i]);
}
}

// 添加预定义事件
function pickspecials() {
var specialsize = [0,0];

for (var i = 0; i < specials.length; 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.length; i++) {
picked_events[i] = parse(picked_events[i]);
}
return picked_events;
}

// 从数组中随机挑选 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;
}

// 解析占位符并替换成随机内容
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('<li>' + event.name + '' + event.good + '</li>');
}

// 添加到“不宜”
function addtobad(event) {
$('.bad .content ul').append('<li>' + event.name + '' + event.bad + '</li>');
}

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

上一篇： vb.net中的配置文件总结

下一篇： Python装饰器限制函数运行时间超时则退出执行

jQuery老黄历完整实现方法

jQuery简单实现遍历单选框的方法

jQuery最基本的功能实现方法

jQuery版仿Path菜单效果实现方法

jquery.param()实现数组或对象的序列化方法

jquery队列queue与原生模仿其实现方法分享

jquery开发中瀑布流效果实现方法

用Jquery重写windows.alert方法实现思路

jQuery实现的网站banner图片无缝轮播效果完整实例

基于jquery的手风琴图片展示效果实现方法

js实现jquery的offset()方法实例教程