编程 Javascript

jQuery老黄历完整实现方法

Posted in Javascript onJanuary 16, 2015

本文实例讲述了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程序设计有所帮助。

jQuery老黄历完整实现方法

- Author -

shichen2014

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js可突破windows弹退效果代码

Aug 09 Javascript

jquery实现的一个简单进度条效果实例

May 12 Javascript

js中substring和substr两者区别和使用方法

Nov 09 Javascript

javascript每日必学之条件分支

Feb 17 Javascript

BootStrap 智能表单实战系列(二)BootStrap支持的类型简介

Jun 13 Javascript

作为老司机使用 React 总结的 11 个经验教训

Apr 08 Javascript

JS 组件系列之 bootstrap treegrid 组件封装过程

Apr 28 Javascript

详解基于webpack搭建react运行环境

Jun 01 Javascript

iview在vue-cli3如何按需加载的方法

Oct 31 Javascript

用npm-run实现自动化任务的方法示例

Jan 14 Javascript

详解如何模拟实现node中的Events模块(通俗易懂版)

Apr 15 Javascript

Node.js API详解之 net模块实例分析

May 18 Javascript

jquery中one()方法的用法实例

Jan 16 #Javascript

jquery中show()、hide()和toggle()用法实例

Jan 15 #Javascript

用js判断是否为360浏览器的实现代码

Jan 15 #Javascript

jquery果冻抖动效果实现方法

Jan 15 #Javascript

jquery通过ajax加载一段文本内容的方法

Jan 15 #Javascript

js实现遮罩层弹出框的方法

Jan 15 #Javascript

jquery隔行换色效果实现方法

Jan 15 #Javascript