当前位置: 首页 > 编程笔记 >

jQuery老黄历完整实现方法

慎弘化
2023-03-14
本文向大家介绍jQuery老黄历完整实现方法,包括了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实现调整表格单列顺序完整实例,包括了jQuery实现调整表格单列顺序完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现调整表格单列顺序的方法。分享给大家供大家参考,具体如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法

  • 本文向大家介绍jQuery简单实现日历的方法,包括了jQuery简单实现日历的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery简单实现日历的方法。分享给大家供大家参考。具体分析如下: 原理挺简单的,首先算出一个月有多少天,再算出这个月的第一天是星期几,接着顺序排下来就可以了. 希望本文所述对大家的jQuery程序设计有所帮助。

  • 本文向大家介绍jQuery实现的可编辑表格完整实例,包括了jQuery实现的可编辑表格完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考,具体如下: 更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQue

  • 问题内容: 我正在使用asp.net mvc列出jquery完整日历中的事件。下面是我用来通过mvc中的json列出事件的脚本。 但是以上脚本未在日历中显示任何事件。我在上面的脚本中做错了什么? 问题答案: 当我将json事件的日期解析为以下内容时,此问题已解决:

  • 本文向大家介绍js实现会跳动的日历效果(完整实例),包括了js实现会跳动的日历效果(完整实例)的使用技巧和注意事项,需要的朋友参考一下 一、简介 编写一个会动的日历,日历上面有年月日,周几,时分秒,效果如下: 年月日,周几,时分秒都会随着系统时间的走动而改变 二、代码 以上这篇js实现会跳动的日历效果(完整实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。

  • 本文向大家介绍jQuery抛物线运动实现方法(附完整demo源码下载),包括了jQuery抛物线运动实现方法(附完整demo源码下载)的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery抛物线运动实现方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 点击此处查看在线演示效果。 完整实例代码点击此处本站下载。 具体代码如下: 更多关于JavaScript运动效果相关内容可查