jQuery老黃曆完整實現方法，jquery老黃曆實現

最後更新：2015-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文執行個體講述了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 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程式設計有所協助。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More