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程序设计有所帮助。

Javascript 相关文章推荐
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
javascript 框架小结 个人工作经验
Jun 13 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
javascript 实现子父窗体互相传值的简单实例
Feb 17 Javascript
jquery form 加载数据示例
Apr 21 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
Dec 18 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
Express框架之connect-flash详解
May 31 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
vue tab滚动到一定高度,固定在顶部,点击tab切换不同的内容操作
Jul 22 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
You might like
造势之举?韩国总统候选人发布《星际争霸》地图
2017/04/22 星际争霸
Discuz 模板引擎的封装类代码
2008/07/18 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
Look And Say 序列php实现代码
2011/05/22 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
Javascript 键盘keyCode键码值表
2009/12/24 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JQuery实现左右滚动菜单特效
2015/09/28 Javascript
RequireJS多页面应用实例分析
2016/06/29 Javascript
jQuery Ajax使用FormData对象上传文件的方法
2016/09/07 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
2016/10/19 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
javascript+css3开发打气球小游戏完整代码
2017/11/28 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
解决axios post 后端无法接收数据的问题
2019/10/29 Javascript
python 性能提升的几种方法
2016/07/15 Python
Python自动化开发学习之三级菜单制作
2017/07/14 Python
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
广告设计专业自荐信范文
2013/11/14 职场文书
初中生期末考试的自我评价
2013/12/17 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
学校感恩教育活动总结
2014/07/07 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
质监局领导班子对照检查材料思想汇报
2014/09/27 职场文书
2014年无财产无子女离婚协议书范本
2014/10/09 职场文书
2016学习依法治国心得体会
2016/01/15 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书
pytest进阶教程之fixture函数详解
2021/03/29 Python
Java中多线程下载图片并压缩能提高效率吗
2021/07/01 Java/Android
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android