首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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获取指定日期前后的日期代码
Aug 20 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 Javascript
checkbox批量选中,获取选中项的值的简单实例
Jun 28 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
Nov 16 Javascript
Vue高版本中一些新特性的使用详解
Sep 25 Javascript
不刷新网页就能链接新的js文件方法总结
Mar 01 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
Mar 17 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
JavaScript 事件代理需要注意的地方
Sep 08 Javascript
前端vue+elementUI如何实现记住密码功能
Sep 20 Javascript
二维码条形码生成的JavaScript脚本库
Jul 07 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
查找算法(1) 循环(3) 移动开发(2) 安卓(1) 装饰器(1) 二维数组(2) android studio(3) 嵌套(1) 分块(1) decorator(1)
You might like
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
jQuery实现公告文字左右滚动的实例代码
2013/10/29 Javascript
JS实现的竖向折叠菜单代码
2015/10/21 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
PHP捕捉异常中断的方法
2016/10/24 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
2018/08/10 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
javascript利用canvas实现鼠标拖拽功能
2020/07/23 Javascript
在Python中使用元类的教程
2015/04/28 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python根据区号生成手机号码的方法
2015/07/08 Python
利用Python为iOS10生成图标和截屏
2016/09/24 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
修复iPhone的safari浏览器上submit按钮圆角bug
2012/12/24 HTML / CSS
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
HTML table 表格边框的实现思路
2019/10/12 HTML / CSS
机关门卫制度
2014/02/01 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python
Python函数式编程中itertools模块详解
2021/09/15 Python