jQuery Old Almanac Vollständige Implementierungsmethode_jquery

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode des alten jQuery-Almanachs. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode wird wie folgt analysiert:

Werfen wir einen Blick auf die laufende Wirkung des Programms:

Der HTML-Seitenteil lautet wie folgt:

Code kopieren Der Code lautet wie folgt:

Programmierer Lao Huangli^beta

                                                                                   

                                                                                     

Sitzausrichtung: Face und Programme mit den wenigsten Fehlern schreiben.

Das heutige Getränk:

Goddess Proximity Index:

 

style.css-Stil ist wie folgt:

Code kopieren Der Code lautet wie folgt:

Körper * {
 Schriftfamilie: „Consolas“, „Microsoft Yahei“, Arial, serifenlos;
}

Körper {
 Hintergrund: weiß;
 Rand: 0;
 Polsterung: 0;
}

.container {
 Breite: 320px;
 Rand: 0 automatisch 50px;
}

.container>.title {
 Farbe: #bbb;
 Schriftstärke: fett;
 Rand unten: 10px;
 Hintergrund: #555;
 Polsterung: 5px 15px;
}

.Datum{
 Schriftgröße:17pt;
 Schriftstärke: fett;
 Zeilenhöhe: 30pt;
 text-align: center;
}

.split, .clear {
 klar: beides;
 Höhe: 1px;
 overflow-y: versteckt;
}

.gut, .schlecht {
 klar: beides;
 Position: relativ;
}

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

.guter .Titel, .schlechter .Titel {
 float: links;
 Breite: 100px;
 Schriftstärke: fett;
 text-align: center;
 Schriftgröße: 30pt;
 Position:absolut;
 oben:0;
 unten:0;
}

.good .title>table, .bad .title>table {
 Position:absolut;
 Breite: 100 %;
 Höhe: 100 %;
 border:none;
}

.guter .Titel {
 Hintergrund: #ffee44;
}

.bad .title {
 Hintergrund: #ff4444;
 Farbe: #fff;
}

.guter .Inhalt, .schlechter .Inhalt {
 Rand links: 115px;
 padding-right: 10px;
 Polsterung oben: 1px;
 Schriftgröße:15pt;
}

.gut {
 Hintergrund: #ffffaa;
}

.bad {
 Hintergrund: #ffddd3;
}

.content ul {
 Listenstil: keiner;
 margin:10px 0 0;
 Polsterung:0;
}

.content ul li {
 Zeilenhöhe: 150 %;
 Schriftgröße: 15pt;
 Schriftstärke: fett;
 Farbe: #444;
}

.content ul li div.description {
 Schriftgröße: 10pt;
 Schriftstärke: normal;
 Farbe: #777;
 Zeilenhöhe: 110 %;
 Rand unten: 10px;
}

.line-tip {
 Schriftgröße: 11pt;
 Rand oben: 10px;
 Rand links: 10px;
}

.direction_value {
 Farbe:#4a4;
 Schriftstärke: fett;
}

.Kommentar {
 Rand oben: 50px;
 Schriftgröße: 11pt;
 Rand links: 10px;
}

.Kommentieren Sie ul {
 Rand links: 0;
 padding-left: 20px;
 Farbe: #999;
}

almanac.js代码如下:

复制代码 代码如下:

/*
* Hinweis: „Zufällig“ in diesem Programm ist ein Pseudozufallskonzept, wobei der aktuelle Tag als Startwert dient.
*/
Funktion random(dayseed, indexseed) {
var n = dayseed % 11117;
for (var i = 0; i < 100 indexseed; i ) {
n = n * n;
n = n % 11117; // 11117 ist eine Primzahl
}
return n;
}

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

var Wochen = ["日", "一", "二", "三", "四", "五", "六"];
var Directions = ["Norden", "Nordosten", "Osten", "Südosten", "Süden", "Südwesten", "Westen", "Nordwesten"];
var Activities = [
{Name: „Das Schreiben von Unit-Tests“, gut: „Das Schreiben von Unit-Tests wird Fehler reduzieren“, schlecht: „Das Schreiben von Unit-Tests wird Ihre Entwicklungseffizienz reduzieren“},
{Name: „Gehen Sie eine Dusche“, gut: „Wie viele Tage haben Sie nicht geduscht?“, schlecht: „Es wird die Design-Inspiration wegspülen“},
{name:"Trainieren Sie Ihren Körper", gut:"",schlecht:"Sie verbrauchen nicht viel Energie, aber Sie essen mehr"},
{Name: „Rauchen“, gut: „Rauchen ist gut, um Ihren Geist zu erfrischen und Ihre geistige Beweglichkeit zu steigern“, schlecht: „Wenn Sie nicht genug gelebt haben, spielt es keine Rolle, ob Sie früh sterben“},
{Name: „Tagsüber online“, gut: „Heute ist es sicher, tagsüber online zu gehen“, schlecht: „Es kann katastrophale Folgen haben“},
{name:"Refactoring", gut:"Die Codequalität ist verbessert", schlecht:"Sie werden wahrscheinlich im Sumpf stecken bleiben"},
{Name: „Verwende %t“, gut: „Du siehst edler aus“, schlecht: „Andere werden denken, dass du angeberisch bist“},
{name:"Job-Hopping", gut:"Lassen Sie los, wenn es Zeit zum Loslassen ist", schlecht:"Angesichts der aktuellen Wirtschaftslage ist Ihr nächster Job möglicherweise nicht besser als Ihr aktueller"},
{name:"Leute rekrutieren", gut:"Die Wahrscheinlichkeit, dass Sie einen Chollima treffen, ist stark erhöht", schlecht:"Sie werden nur ein oder zwei Laien rekrutieren, die nur versuchen, über die Runden zu kommen"},
{Name: „Interview“, gut: „Der Interviewer ist heute gut gelaunt“, schlecht: „Der Interviewer ist unglücklich und wird es an Ihnen auslassen“},
{Name: „Reichen Sie Ihren Rücktrittsantrag“, gut: „Das Unternehmen hat einen Mann gefunden, der fähiger und billiger ist als Sie, und ich hoffe, dass Sie hier so schnell wie möglich rauskommen“, schlecht: „Angesichts der aktuellen Wirtschaftslage , Ihr nächster Job ist möglicherweise nicht besser als Ihr aktueller "},
{Name: „Gehaltserhöhung beantragen“, gut: „Der Chef ist heute gut gelaunt“, schlecht: „Das Unternehmen denkt über Entlassungen nach“},
{Name: „Nachts Überstunden machen“, gut: „Programmierer sind nachts in Bestform“, schlecht: „“},
{Name: „Vor Mädchen prahlen“, gut: „Verbessere dein kleines und schlechtes Image“, schlecht: „Du wirst durchschaut“},
{name:"Masturbation", gut:"Pufferüberlauf vermeiden",schlecht:"Kleine Masturbation ist angenehm, große Masturbation ist schädlich für den Körper und erzwungene Masturbation wird ausgelöscht"},
{name:"Durchsuchen von Websites für Erwachsene", gut:"Gewinnen Sie Ihr Selbstvertrauen zurück", schlecht:"Sie werden unruhig sein"},
{name:"Benannte Variable "%v"", gut:"",schlecht:""},
{name: „Schreiben Sie mehr als %l Methodenzeilen“, gut: „Ihr Code ist gut organisiert, es spielt keine Rolle, ob er länger ist“, schlecht: „Ihr Code wird so verwirrend sein, dass Sie ihn nicht einmal verstehen können it"},
{Name: „Code einreichen“, gut: „Die Wahrscheinlichkeit, auf Konflikte zu stoßen, ist am geringsten“, schlecht: „Viele Konflikte, denen Sie begegnen, werden Ihnen das Gefühl geben, durch die Zeit gereist zu sein“},
{Name: „Codeüberprüfung“, gut: „Die Chance, wichtige Probleme zu finden, ist stark erhöht“, schlecht: „Sie können keine Probleme finden und Ihre Zeit verschwenden“},
{Name: „Treffen“, gut: „Es ist gut für Ihre Gesundheit, sich zu entspannen und ein Nickerchen zu machen, nachdem Sie Code geschrieben haben“, schlecht: „Sie werden beschuldigt“},
{Name: „DOTA spielen“, gut: „Du wirst wie eine göttliche Hilfe sein“, schlecht: „Du wirst elend gefoltert“},
{Name: „Nachts online“, gut: „Nachts sind Programmierer in Höchstform“, schlecht: „Tagsüber sind Sie erschöpft“},
{Name: „Fehler beheben“, gut: „Ihr Geruchssinn für Fehler wurde heute erheblich verbessert“, schlecht: „Es werden mehr neue Fehler generiert als behoben“},
{name:"Design Review", gut:"Design Review Meetings werden zum Brainstorming", schlecht:"Jeder ist erschöpft und die Überprüfung vergeht wie im Flug"},
{name:"Requirements Review", good:"",bad:""},
{Name: „Gehe zu Weibo“, gut: „Was heute passiert ist, ist nicht zu übersehen“, schlecht: „Der Chef wird es sehen“},
{Name: „Zur AB-Seite gehen“, gut: „Brauchen Sie noch einen Grund?“, schlecht: „Der Chef wird es sehen“}
];

var Sonderangebote = [
{Datum:20130221, Typ:'gut', Name:'Nukleare Verteidigungsübung', Beschreibung:'Was wäre, wenn irgendein Verrückter eine Atombombe abwerfen würde...' ];

var tools = ["Eclipse schreibt Programme", "MSOffice schreibt Dokumente", "Notepad schreibt Programme", "Windows8", "Linux", "MacOS", "IE", "Android-Geräte", "iOS-Geräte " ];

var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "a", "virtual", "ad" , „spider“, „mima“, „pass“, „ui“];

Var Drinks = [„Wasser“, „Tee“, „schwarzer Tee“, „grüner Tee“, „Kaffee“, „Milchtee“, „Cola“, „Milch“, „Sojamilch“, „Saft“ ,„fruchtig“ „Soda“, „Soda“, „Sportgetränk“, „Joghurt“, „Wein“];

Funktion getTodayString() {

return „Heute ist“ today.getFullYear() „Jahr“ (today.getMonth() 1) „Monat“ today.getDate() „Tag Woche“ seconds[today.getDay()];
}

// 生成今日运势
Funktion 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]);
 }
}

// 添加预定义事件
Funktion 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});
   } sonst {
    specialSize[1] ;
    addToBad({name: special.name, bad: special.description});
   }
  }
 }
 return specialSize;
}

// 从 Aktivitäten 中随机挑选 Größe 个
Funktion pickRandomActivity(size) {
 varpick_events = pickRandom(Aktivitäten, Größe);
 for (var i = 0; i < selected_events.length; i ) {
  picked_events[i] = parse(picked_events[i]);
 }
 returnpicked_events;
}

// 从数组中随机挑选 size 个
Funktion 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);
 }
 Ergebnis zurückgeben;
}

// 解析占位符并替换成随机内容
Funktion parse(event) {
 var result = {name: event.name, good: event.good, bad: event.bad};  // klonen
 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());
 }
 Ergebnis zurückgeben;
}

// 添加到“宜“
Funktion addToGood(event) {
 $('.good .content ul').append('

' event.name '

' Ereignis .good '

');
}

// 添加到“不宜“
Funktion addToBad(event) {
 $('.bad .content ul').append('

' event.name '

' Ereignis .bad '

');
}

$(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();
});

Sie haben die jQuery-Version mit jQuery erstellt.