jQuery Old Almanac の完全実装 Method_jquery

この記事の例では、jQuery の古いアルマナックの実装方法について説明します。皆さんの参考に共有してください。具体的な実装方法は次のように分析されます。

プログラムの実行効果を見てみましょう:

HTML ページ部分は次のとおりです:

コードをコピーします コードは次のとおりです:

<頭>

プログラマー Lao Huangli^beta

<表>
                                                                                       

<表>
                                                                                          

座席の向き: 面 バグの少ないプログラムを作成します。

今日のドリンク:

女神近接インデックス:

style.css スタイルは次のとおりです:

コードをコピー コードは次のとおりです:

ボディ * {
 font-family:"Consolas","Microsoft Yahei"、Arial、サンセリフ;
}

ボディ{
 背景: 白;
 マージン: 0;
 パディング: 0;
}

.container {
 幅: 320px;
 マージン: 0 自動 50px;
}

.container>.title {
 色: #bbb;
 フォントの太さ: 太字;
 margin-bottom: 10px;
 背景: #555;
 パディング: 5px 15px;
}

.date{
 フォントサイズ:17pt;
 フォントの太さ: 太字;
 行の高さ: 30pt;
 text-align: 中央;
}

.split、.clear {
 クリア: 両方;
 高さ: 1px;
 オーバーフロー-y: 非表示;
}

.良い、.悪い {
 クリア: 両方;
 位置: 相対;
}

.bad {
 /*上: -1px;*/
}

.good .title、.bad .title {
 float: 左;
 幅: 100px;
 フォントの太さ: 太字;
 text-align: 中央;
 フォントサイズ: 30pt;
 位置:絶対;
 トップ:0;
 下:0;
}

.good .title>テーブル、.bad .title>テーブル {
 位置:絶対;
 幅:100%;
 高さ:100%;
 境界線:なし;
}

.good .title {
 背景: #ffee44;
}

.bad .title {
 背景: #ff4444;
 色: #fff;
}

.good .content、.bad .content {
 マージン左: 115px;
 パディング右: 10px;
 パディングトップ: 1px;
 フォントサイズ:15pt;
}

.good {
 背景: #ffffaa;
}

.bad {
 背景: #ffddd3;
}

.content ul {
 リストスタイル: なし;
 マージン:10px 0 0;
 パディング:0;
}

.content ul li {
 行の高さ:150%;
 フォントサイズ: 15pt;
 フォントの太さ: 太字;
 色: #444;
}

.content ul li div.description {
 フォントサイズ: 10pt;
 フォントの太さ: 通常;
 色: #777;
 行の高さ: 110%;
 margin-bottom: 10px;
}

.line-tip {
 フォントサイズ: 11pt;
 margin-top: 10px;
 margin-left: 10px;
}

.direction_value {
 色:#4a4;
 フォントの太さ: 太字;
}

.comment {
 margin-top: 50px;
 フォントサイズ: 11pt;
 margin-left: 10px;
}

.comment ul {
 マージン左: 0;
 パディング左: 20px;
 色: #999;
}

almanac.js代码如下：

复制代码代码如下:

/*
※注意：このプログラムにおける「ランダム」とは、当日をシードとする擬似ランダムの概念です。
*/
関数ランダム(デイシード、インデックスシード) {
var n = デイシード % 11117;
for (var i = 0; i n = n * n;
n = n % 11117; // 11117 は素数です
}
n を返します;
}

var today = new Date();
var iday = today.getFull Year() * 10000 (today.getMonth() 1) * 100 today.getDate();

var 週 = ["日","一","二","三","四","五","六"];
var 方向 = ["北","北東","東","南東","南","南西","西","北西"];
var アクティビティ = [
{name: "単体テストを書く"、良い: "単体テストを書くとエラーが減る"、悪い: "単体テストを書くと開発効率が下がる"}、
{名前: "シャワーを浴びる"、良い: "何日間シャワーを浴びていないのですか?"、悪い: "デザインのインスピレーションが洗い流されてしまいます"}、
{name:"体を鍛えましょう"、良い:""、悪い:"エネルギー消費量は多くありませんが、食べる量は増えます"}、
{名前: "喫煙"、良い: "喫煙は心をリフレッシュし、精神的な敏捷性を高めるのに良いです"、悪い: "十分に生きていない限り、早死にしても問題ありません"}、
{名前: "日中はオンラインです"、良い: "今日の日中はオンラインにしても安全です"、悪い: "壊滅的な結果につながる可能性があります"}、
{name:"リファクタリング"、良い:"コードの品質が向上する"、悪い:"泥沼にはまり込む可能性が高い"},
{name: "%t を使用"、良い: "あなたはもっと上品に見えます"、悪い: "他の人はあなたを誇示していると思うでしょう"}、
{name:"ジョブホッピング"、good:"手放す時期が来たら手放す"、bad:"現在の経済状況を考慮すると、次の仕事は現在の仕事より良くないかもしれない"},
{name:"人材募集"、good:"千里馬に出会う可能性が大幅に高まります"、bad:"ただ生計を立てるだけの素人を1人か2人だけ募集します"},
{名前: "面接"、良い: "今日の面接官は機嫌が良いです"、悪い: "面接官は不機嫌で、あなたに八つ当たりするでしょう"}、
{name: "退職届を提出してください"、good: "会社はあなたよりも有能で、より安価な人材を見つけました。できるだけ早くここから出てほしいと思います"、bad: "現在の経済状況を考慮すると、 、次の仕事は現在の仕事よりも優れているわけではないかもしれません。"},
{名前: "昇給を申請する"、良い: "今日は上司のご機嫌が良いです"、悪い: "会社は解雇を検討しています"}、
{name: "夜は残業する"、良い: "プログラマーは夜に最高の仕事をする"、悪い: ""}、
{名前: "女の子の前で自慢する"、良い: "背が低くて悪いイメージを改善する"、悪い: "見透かされる"}、
{name:"オナニー"、good:"バッファオーバーフローを避ける"、bad:"小さなオナニーは快感、大きなオナニーは体に害、強制的なオナニーは撲滅"},
{名前:"アダルト ウェブサイトの閲覧"、良い:"人生に自信を取り戻す"、悪い:"落ち着かなくなる"}、
{name:"名前付き変数 "%v""、良い:""、悪い:""},
{name: "メソッドを %l 行以上記述します"、良い: "コードはよく整理されています。コードが長くても問題ありません"、悪い: "コードは非常に複雑になり、理解することさえできなくなります。それ"}、
{name: "コードを送信する"、良い: "競合に遭遇する可能性は最も低い"、悪い: "多くの競合に遭遇すると、タイムスリップしたような気分になります"}、
{名前: "コード レビュー"、良い: "重要な問題が見つかる可能性が大幅に増加します"、悪い: "問題が見つからず、時間を無駄にします"}、
{名前: "会議"、良い: "コードを書いた後にリラックスして昼寝するのは健康に良い"、悪い: "責められるでしょう"}、
{名前: "DOTA をプレイする"、良い: "あなたは神の助けのようになるでしょう"、悪い: "あなたは悲惨な拷問を受けるでしょう"}、
{名前: "夜はオンライン"、良い: "プログラマーは夜に最高のパフォーマンスを発揮します"、悪い: "日中は疲れ果てています"}、
{名前: "バグを修正"、良い: "今日、バグに対する嗅覚が大幅に改善されました"、悪い: "修正されたバグよりも多くの新しいバグが生成されるでしょう"}、
{name:"デザイン レビュー"、良い:"デザイン レビュー ミーティングはブレインストーミングに変わります"、悪い:"全員が疲れ切っていて、レビューはただ過ぎていく"},
{名前:"要件レビュー"、良い:""、悪い:""}、
{名前: "Weibo に行く"、良い: "今日起こったことを見逃すことはできません"、悪い: "上司がそれを見るでしょう"}、
{名前: "AB サイトにアクセスします"、良い: "まだ理由が必要ですか?"、悪い: "上司がそれを見るでしょう"}
];

var スペシャル = [
{日付:20130221、タイプ:'良い'、名前:'核防衛演習'、説明:'もし狂人が核爆弾を投下したら…'}
];

var tools = ["Eclipse がプログラムを作成"、"MSOffice がドキュメントを作成"、"メモ帳がプログラムを作成"、"Windows8"、"Linux"、"MacOS"、"IE"、"Android デバイス"、"iOS デバイス" ];

var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "a", "virtual", "ad" 、「スパイダー」、「ミマ」、「パス」、「ウイ」];

var ドリンク = ["水","お茶","紅茶","緑茶","コーヒー","ミルクティー","コーラ","牛乳","豆乳","ジュース" 、「フルーティー」、「ソーダ」、「ソーダ」、「スポーツドリンク」、「ヨーグルト」、「ワイン」];

関数 getTodayString() {
return "今日は" today.getFull Year() "年" (today.getMonth() 1) "月" today.getDate() "日週"weeks[today.getDay()];
}

// 生成今日运势
関数 pickTodaysLuck() {
 var numGood = ランダム(iday, 98) % 3 2;
 var numBad = ランダム(iday, 87) % 3 2;
 var eventsArr = pickRandomActivity(numGood numBad);
 varspecialSize = pickSpecials();
 for (var i = 0; i < numGood; i ) {
  addToGood(eventArr[i]);
 }
 for (var i = 0; i < numBad; i ) {
  addToBad(eventArr[numGood i]);
 }
}

// 追加预定义イベント
関数 pickSpecials() {
 varspecialSize = [0,0];
 
 for (var i = 0; i   var スペシャル = スペシャル[i];
  
  if (iday == 特別な日付) {
   if (special.type == 'good') {
    特別サイズ[0] ;
    addToGood({name:special.name,good:special.description});
   } else {
    特別サイズ[1] ;
    addToBad({name:special.name, bad:special.description});
   }
  }
 }
 特殊サイズを返します;
}

//从活動中随机挑戦选サイズ个
関数 pickRandomActivity(size) {
 var selected_events = pickRandom(アクティビティ, サイズ);
 for (var i = 0; i   picked_events[i] = parse(picked_events[i]);
 }
 pick_events を返す;
}

// 从数组中随机挑戦选 サイズ 个
関数 pickRandom(配列, サイズ) {
 var result = [];
 for (var i = 0; i   result.push(array[i]);
 }
 for (var j = 0; j   var インデックス = ランダム(iday, j) % result.length;
  result.splice(index, 1);
 }
 結果を返します;
}

// 占位符并置換换成随机内容
関数解析(イベント) {
 var result = {名前:event.name、良い:event.good、悪い:event.bad};  // クローン
 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());
 }
 結果を返します;
}

//「宜」を追加
関数 addToGood(event) {
 $('.good .content ul').append('

'event.name'

'イベント.good '

');
}

//「不宜」に追加
関数 addToBad(event) {
 $('.bad .content ul').append('

'event.name'

' イベント.bad '

');
}

$(関数(){
 $('.date').html(getTodayString());
 $('.direction_value').html(directions[random(iday, 2) % Directions.length]);
 $('. Drink_value').html(pickRandom(ドリンク,2).join());
 $('.goddes_value').html(random(iday, 6) % 50 / 10.0);
 pickTodaysLuck();
});

ここで説明されている大規模な jQuery プログラムの設計が役立つことを望みます。