Maison > Article > interface Web > jQuery Old Almanac Implémentation complète Method_jquery
L'exemple de cet article décrit l'ancienne méthode d'implémentation de l'almanach jQuery. Partagez-le avec tout le monde pour votre référence. Le mode de mise en œuvre spécifique s'analyse comme suit :
Jetons un coup d'œil à l'effet de fonctionnement du programme :
La partie page html est la suivante :
corps {
fond : blanc ;
marge : 0;
remplissage : 0 ;
>
.conteneur {
largeur : 320 px ;
marge : 0 auto 50px ;
>
.conteneur>.titre {
couleur : #bbb;
poids de la police : gras ;
marge inférieure : 10 px ;
arrière-plan : #555 ;
remplissage : 5px 15px ;
>
.date{
taille de police : 17pt ;
poids de la police : gras ;
hauteur de ligne : 30 pt ;
text-align: center;
>
.split, .clear {
clair : les deux ;
hauteur : 1px ;
overflow-y : caché ;
>
.bon, .mauvais {
clair : les deux ;
position : relative ;
>
.mauvais {
/*haut : -1px;*/
>
.bon .titre, .mauvais .titre {
flotter : gauche ;
largeur : 100 px ;
poids de la police : gras ;
text-align: center;
taille de police : 30 pt ;
position:absolue;
haut :0;
bas :0;
>
.bon .titre>table, .mauvais .titre>table {
position:absolue;
largeur:100%;
hauteur:100%;
bordure : aucune ;
>
.bon .titre {
arrière-plan : #ffee44;
>
.mauvais .titre {
arrière-plan : #ff4444;
couleur : #fff;
>
.bon .content, .mauvais .content {
marge gauche : 115px;
padding-right : 10px ;
padding-top : 1px ;
taille de police : 15pt ;
>
.bon {
fond : #ffffaa ;
>
.mauvais {
arrière-plan : #ffddd3;
>
.content ul {
style de liste : aucun ;
marge:10px 0 0;
remplissage:0;
>
.content ul li {
hauteur de ligne : 150 % ;
taille de police : 15 pt ;
poids de la police : gras ;
couleur : #444;
>
.content ul li div.description {
taille de police : 10 pt ;
poids de la police : normal ;
couleur : #777;
hauteur de ligne : 110 % ;
marge inférieure : 10 px ;
>
.line-tip {
taille de police : 11 pt ;
marge supérieure : 10 px ;
marge gauche : 10px;
>
.direction_value {
couleur:#4a4;
poids de la police : gras ;
>
.commentaire {
marge supérieure : 50 px ;
taille de police : 11 pt ;
marge gauche : 10px;
>
.comment ul {
marge gauche : 0;
padding-left : 20px ;
couleur : #999;
>
almanac.js代码如下:
var aujourd'hui = nouvelle date();
var iday = aujourd'hui.getFullYear() * 10000 (aujourd'hui.getMonth() 1) * 100 aujourd'hui.getDate();
var semaines = ["日","一","二","三","四","五","六"];
var directions = ["Nord","Nord-Est","Est","Sud-Est","Sud","Sud-Ouest","Ouest","Nord-Ouest"];
var activités = [
{name : "Écrire des tests unitaires", bon : "L'écriture de tests unitaires réduira les erreurs", mauvais : "L'écriture de tests unitaires réduira l'efficacité de votre développement"},
{nom : "Prenez une douche", bien : "Combien de jours ne vous êtes-vous pas douché ?", mauvais : "Cela effacera l'inspiration du design"},
{name:"Exercez votre corps", bien :"",mauvais :"Vous ne consommez pas beaucoup d'énergie, mais vous mangez plus"},
{nom : "Fumer", bon : "Fumer est bon pour rafraîchir votre esprit et augmenter votre agilité mentale", mauvais : "À moins d'avoir suffisamment vécu, peu importe si vous mourez tôt"},
{nom : "En ligne pendant la journée", bon : "Vous pouvez vous connecter en toute sécurité pendant la journée aujourd'hui", mauvais : "Cela peut entraîner des conséquences catastrophiques"},
{name:"Refactoring", bon :"La qualité du code est améliorée", mauvais :"Vous risquez de rester coincé dans le bourbier"},
{name : "Utilisez %t", bien : "Vous avez l'air plus classe", mauvais : "Les autres penseront que vous vous exhibez"},
{name:"Job hopping", bon :"Lâchez prise quand il est temps de lâcher prise", mauvais :"Compte tenu de la situation économique actuelle, votre prochain emploi ne sera peut-être pas meilleur que votre emploi actuel"},
{name:"Recruter des gens", bien:"La possibilité que vous rencontriez un Chollima est considérablement augmentée", mauvais:"Vous ne recruterez qu'un ou deux profanes qui essaient juste de joindre les deux bouts"},
{nom : "Interview", bon : "L'intervieweur est de bonne humeur aujourd'hui", mauvais : "L'intervieweur est mécontent et s'en prendra à vous"},
{nom : "Soumettez votre demande de démission", bon : "L'entreprise a trouvé un gars plus compétent et moins cher que vous, et j'espère que vous sortirez d'ici le plus tôt possible", mauvais : "Compte tenu de la situation économique actuelle , votre prochain emploi ne sera peut-être pas meilleur que votre actuel "},
.
{nom : "Demander une augmentation de salaire", bien : "Le patron est de bonne humeur aujourd'hui", mauvais : "L'entreprise envisage des licenciements"},
{name : "Faire des heures supplémentaires la nuit", bon : "Les programmeurs sont à leur meilleur la nuit", mauvais : ""},
{nom : "Se vanter devant les filles", bon : "Améliorez votre image courte et pauvre", mauvais : "Vous serez vu à travers"},
{name:"Masturbation", bon:"Éviter les débordements de tampon",mauvais:"La petite masturbation est agréable, la grande masturbation est nocive pour le corps et la masturbation forcée est anéantie"},
{name:"Naviguer sur des sites Web pour adultes", bon :"Reprendre confiance en la vie", mauvais :"Vous serez agité"},
{name:"Variable nommée "%v"", bon :"",mauvais :""},
{name : "Écrivez plus de %l lignes de méthode", bon : "Votre code est bien organisé, peu importe s'il est plus long", mauvais : "Votre code sera tellement déroutant que vous ne pourrez même pas comprendre il"},
{nom : "Soumettre le code", bon : "Les chances de rencontrer des conflits sont les plus faibles", mauvais : "Beaucoup de conflits que vous rencontrerez vous donneront l'impression d'avoir voyagé dans le temps"},
{nom : "Révision du code", bon : "Les chances de trouver des problèmes importants sont considérablement augmentés", mauvais : "Vous ne trouvez aucun problème et vous perdez votre temps"},
{nom : "Réunion", bon : "C'est bon pour la santé de se détendre et de faire une sieste après avoir écrit du code", mauvais : "On vous blâmera"},
{nom : "Jouer à DOTA", bon : "Tu seras comme une aide divine", mauvais : "Tu seras misérablement torturé"},
{nom : "En ligne la nuit", bon : "Les programmeurs sont à leur meilleur la nuit", mauvais : "Vous êtes épuisé pendant la journée"},
{nom : "Fix BUG", bon : "Votre odorat pour les bugs a été grandement amélioré aujourd'hui", mauvais : "Il y aura plus de nouveaux bugs générés que corrigés"},
{name:"Design Review", bon :"Les réunions de révision de conception se transformeront en brainstorming", mauvais :"Tout le monde est épuisé et la révision passe"},
{name:"Examen des exigences", bon :"",mauvais :""},
{nom : "Allez sur Weibo", bien : "Ce qui s'est passé aujourd'hui ne peut pas être manqué", mauvais : "Le patron le verra"},
{name : "Aller sur le site AB", bon : "Avez-vous encore besoin d'une raison ?", mauvais : "Le patron le verra">
];
var spéciaux = [
{date : 20130221, tapez : 'bon', nom :'Exercice de défense nucléaire', description :'Et si un fou largue une bombe nucléaire...'}
];
var tools = ["Eclipse écrit des programmes", "MSOffice écrit des documents", "Notepad écrit des programmes", "Windows8", "Linux", "MacOS", "IE", "Appareils Android", "Appareils iOS" ];
var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "a", "virtual", "ad" , "araignée", "mima", "passe", "ui"];
var boissons = ["eau", thé, "thé noir", "thé vert", "café", "thé au lait", "coca", "lait", "lait de soja", "jus" ,"fruité" "Soda", "soda", "boisson pour sportifs", "yaourt", "vin"];
fonction getTodayString() {
return "Aujourd'hui, c'est" aujourd'hui.getFullYear() "Année" (today.getMonth() 1) "Mois" aujourd'hui.getDate() "Jour Semaine" semaines[today.getDay()];
>
// 生成今日运势
fonction pickTodaysLuck() {
var numGood = random(iday, 98) % 3 2;
var numBad = random(iday, 87) % 3 2;
var eventArr = pickRandomActivity(numGood numBad);
var specialSize = pickSpecials();
pour (var i = 0; i < numGood; i ) {
addToGood(eventArr[i]);
>
pour (var i = 0; i < numBad; i ) {
addToBad(eventArr[numGood i]);
>
>
// 添加预定义事件
fonction pickSpecials() {
var taille spéciale = [0,0];
pour (var i = 0; i < specials.length; i ) {
var spécial = spéciaux[i];
if (iday == special.date) {
if (special.type == 'bon') {
spécialTaille[0] ;
addToGood({name : spécial.name, bon : spécial.description});
} autre {
taille spéciale[1] ;
addToBad({name : spécial.name, mauvais : spécial.description});
>
>
>
retourner la taille spéciale ;
>
// 从 activités 中随机挑选 taille 个
fonction pickRandomActivity(size) {
var pick_events = pickRandom(activités, taille);
pour (var i = 0; i < picks_events.length; i ) {
picked_events[i] = parse(picked_events[i]);
>
retourner pick_events ;
>
// 从数组中随机挑选 taille 个
fonction pickRandom (tableau, taille) {
var résultat = [];
pour (var i = 0; i < array.length; i ) {
résultat.push(array[i]);
>
pour (var j = 0; j < array.length - size; j ) {
var index = random(iday, j) % result.length;
résultat.splice(index, 1);
>
renvoyer le résultat ;
>
// 解析占位符并替换成随机内容
fonction analyser (événement) {
var result = {nom : event.name, bon : event.good, mauvais : event.bad} ; // cloner
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());
>
renvoyer le résultat ;
>
// 添加到«宜»
fonction addToGood (événement) {
$('.good .content ul').append('
// 添加到« 不宜 »
fonction addToBad (événement) {
$('.bad .content ul').append('
$(fonction(){
$('.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程序设计有所帮助。