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>
  <div class="container">
   <div class="title">
    程序员老黄历<sup>beta</sup>
   </div>
   <div class="date">
   </div>
   <div class="good">
    <div class="title">
     <table>
      <tr><td>宜</td></tr>
     </table>
    </div>
    <div class="content">
     <ul></ul>
    </div>
    <div class="clear"></div>
   </div>
   <div class="split"></div>
   <div class="bad">
    <div class="title">
     <table>
      <tr><td>不宜</td></tr>
     </table>
    </div>
    <div class="content">
     <ul></ul>
    </div>
    <div class="clear"></div>
   </div>
   <div class="split"></div>
   <div class="line-tip">
    <strong>座位朝向：</strong>面向<span class="direction_value"></span>写程序，BUG 最少。
   </div>
   <div class="line-tip">
    <strong>今日宜饮：</strong><span class="drink_value"></span>
   </div>
   <div class="line-tip">
    <strong>女神亲近指数：</strong><span class="goddes_value"></span>
   </div>
   
  </div>
 </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 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 < 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 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 < 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><div class="name">' + event.name + '</div><div class="description">' + event.good + '</div></li>');
}

// 添加到“不宜”
function addToBad(event) {
 $('.bad .content ul').append('<li><div class="name">' + event.name + '</div><div class="description">' + event.bad + '</div></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();
});

希望本文所述对大家的jQuery程序设计有所帮助。

赞 (0)

相关推荐

  • C语言小程序 如何判断两个日期之差

    1.普通的写法 复制代码 代码如下: #include <stdio.h>int leapyear(int year){ if((year%4==0 && year%100!=0) || year%400==0)  return 1; else   return 0;}int days(int *day1, int *day2){ int i=0; int *tmp; int diff = 0; const int month[13]={0,31,28,31,30,31,30,

  • c语言实现系统时间校正工具代码分享

    复制代码 代码如下: //*******************************************************************//Time Protocol是一种非常简单的应用层协议.它返回一个未格式化的32位二进制数字, //这个数字描述了从1900年1月1日午夜到现在的秒数.服务器在端口37监听协议请求,以 //TCP/IP或者UDP/IP格式返回响应.将服务器的返回值转化为本地时间是客户端程序的责任. //这里使用的时间服务器是129.132.2.21,更

  • C语言实现的程序员老黄历实例

    C语言实现的程序员老黄历实例

    本文实例讲述了C语言实现的程序员老黄历.分享给大家供大家参考.具体如下: 以前看到过一个jquery程序员老黄历页面,觉得挺有创意的,自己闲着用C语言也写了一个,基本就是随机数的生成,没什么难度,大家随便看看,高手请绕过此篇,控制台程序没什么美观可言,已经尽量弄得好看点了. #include <stdio.h> #include <time.h> int random(int dayseed,int indexseed) //根据当前时间"天 "产生伪随机数.

  • 使用C语言中的time函数获取系统时间

    可以通过time()函数来获得计算机系统当前的日历时间(Calendar Time),处理日期时间的函数都是以本函数的返回值为基础进行运算.其原型为:time_t time(time_t * t);如果你已经声明了参数t,你可以从参数t返回现在的日历时间,同时也可以通过返回值返回现在的日历时间,即从一个时间点(例如:1970年1月1日0时0分0秒)到现在此时的秒数.如果参数为空(NULL),函数将只通过返回值返回现在的日历时间,比如下面这个例子用来显示当前的日历时间: 复制代码 代码如下: #i

  • C语言小程序 计算第二天日期示例代码

    复制代码 代码如下: #include <stdio.h>#include <stdlib.h>#include <string.h>#include <time.h>int year, month, day;const int day_30 = 30;const int day_31 = 31;int day_month_2 = 0;char err_flag = 0;void compute(){ printf("输入年月日(1992-7-19

  • C语言循环结构与时间函数用法实例教程

    本文实例展示了C语言循环结构与时间函数用法,对于C语言的学习来说是非常不错的参考借鉴材料.分享给大家供大家参考之用.具体如下: 完整实例代码如下: /********************************************** ** <Beginning C 4th Edition> Notes codes ** Created by Goopand ** Compiler: gcc 4.7.0 *****************************************

  • c语言strftime时间格式化示例

    函数原型: 复制代码 代码如下: size_t strftime (char* ptr, size_t maxsize, const char* format,const struct tm* timeptr ); 代码示例: 复制代码 代码如下: #include <stdio.h>#include <time.h> int main (){    time_t rawtime;    struct tm * timeinfo;    char buffer [128]; tim

  • jQuery老黄历完整实现方法

    jQuery老黄历完整实现方法

    本文实例讲述了jQuery老黄历实现方法.分享给大家供大家参考.具体实现方法分析如下: 先来看看程序运行效果: html页面部分如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   <title>jquery老黄历特效 -<

  • 使用jquery解析XML的方法

    使用jquery解析XML的方法

    本文实例讲述了使用jquery解析XML的方法,分享给大家供大家参考之用.具体方法如下: 一.xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?> <root> <book id="1"> <name>深入浅出extjs</name> <author>张三</author> <price>88

  • jQuery打字效果实现方法(附demo源码下载)

    jQuery打字效果实现方法(附demo源码下载)

    本文实例讲述了jQuery打字效果实现方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果. 1.前台页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3

  • JavaScript的jQuery库中ready方法的学习教程

    学习 jQuery 有许多途径,我们今天从 jQuery 的 ready 函数开始.本例中的代码都来自于 jQuery 脚本库. 如果你使用过 jQuery , 就必然使用过 ready 函数,它用来注册当页面准备好之后可以执行的函数. 问题来啦,我们的页面什么时候准备好了呢? onload 事件 最基本的处理方式就是页面的 onload 事件,我们在处理这个事件的时候,可以有多种方式,即可以通过 HTML 方式,直接写在 body 元素的开始标记中,也可以使用事件注册的方式来使用,这又可以分为

  • Jquery注册事件实现方法

    本文实例讲述了Jquery注册事件实现方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

  • jquery常用函数与方法汇总

    1.delay(duration,[queueName]) 设置一个延时来推迟执行队列中之后的项目. jQuery 1.4新增.用于将队列中的函数延时执行.他既可以推迟动画队列的执行,也可以用于自定义队列. duration:延时时间,单位:毫秒 queueName:队列名词,默认是Fx,动画队列. 例: 头部与底部延迟加载动画效果 $(document).ready(function() { $('#header') .css({ 'top':-50 }) .delay(1000).anima

  • jQuery遮罩层实现方法实例详解(附遮罩层插件)

    本文实例分析了jQuery遮罩层实现方法.分享给大家供大家参考,具体如下: 1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ display: none; position: absolute; top: 0px; lef

  • 浅谈jquery中的each方法$.each、this.each、$.fn.each

    jquery.each 方法 方法一 $("img").each(function(i,elem){ // i 下标 从零开始, // elem == this // $(elem).toggleClass("example"); $(this).toggleClass("example"); }); 方法二 $.each([1,2,3,4],function(){ //$(this)==数组中的每一个数组(如果数组是对象,就是对象) }); 方

  • JQuery 的跨域方法推荐_可跨任何网站

    因发现有不少博友发园内短信问及JS的跨域问题,我想很多程序员的脑海里面还认为JS是不能跨域的,其实这是一个错误的观点:有很多人在网上找其解决方法,教其用IFRAME去解决的文章很多,真有那么复杂吗?其实很简单的,如果你用JQUERY,一个GETJSON方法就搞定了,而且是一行代码搞定. 下面开始贴出方法. //跨域(可跨所有域名) $.getJSON("http://user.hnce.com.cn/getregion.aspx?id=0&jsoncallback=?",fun

  • 浅谈jQuery中的$.extend方法来扩展JSON对象

    $.extend方法可以扩展JSON对象,用一个或多个其他对象来扩展一个对象,返回被扩展的对象. 例一 合并 settings 和 options,修改并返回 settings var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果 set

随机推荐