jQuery Old Almanac 완전한 구현 Method_jquery

이 기사의 예에서는 jQuery의 이전 연감 구현 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방식은 다음과 같이 분석된다.

프로그램의 실행 효과를 살펴보겠습니다.

html 페이지 부분은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

머리>

머리>

프로그래머 라오황리^베타

~ 테이블>

~ 테이블>

좌석 방향: 얼굴 버그가 가장 적은 프로그램을 작성하세요.

오늘의 음료:

여신 근접 지수:

 

본문>

style.css 스타일은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

본문 * {
 글꼴 계열:"Consolas","Microsoft Yahei", Arial, sans-serif;
}

몸 {
 배경: 흰색;
 여백: 0;
 패딩: 0;
}

.컨테이너 {
 너비: 320px;
 여백: 0 자동 50px;
}

.container>.title {
 색상: #bbb;
 글꼴 두께: 굵게;
 여백-하단: 10px;
 배경: #555;
 패딩: 5px 15px;
}

.날짜{
 글꼴 크기:17pt;
 글꼴 두께: 굵게;
 줄 높이: 30pt;
 텍스트 정렬: 중앙;
}

.split, .clear {
 명확함: 둘 다;
 높이: 1px;
 Overflow-y: 숨김;
}

.좋음, .나쁨 {
 명확함: 둘 다;
 위치: 상대;
}

.나쁜 {
 /*상단: -1px;*/
}

.good .title, .bad .title {
 부동: 왼쪽;
 너비: 100px;
 글꼴 두께: 굵게;
 텍스트 정렬: 중앙;
 글꼴 크기: 30pt;
 위치:절대;
 상단:0;
 하단:0;
}

.good .title>테이블, .bad .title>테이블 {
 위치:절대;
 너비:100%;
 높이:100%;
 테두리:없음;
}

.좋은 .제목 {
 배경: #ffee44;
}

.bad .title {
 배경: #ff4444;
 색상: #fff;
}

.good .content, .bad .content {
 여백-왼쪽: 115px;
 패딩 오른쪽: 10px;
 패딩 상단: 1px;
 글꼴 크기:15pt;
}

.좋아요 {
 배경: #ffffaa;
}

.나쁜 {
 배경: #ffddd3;
}

.content ul {
 목록 스타일: 없음;
 여백:10px 0 0;
 패딩:0;
}

.content ul li {
 줄 높이:150%;
 글꼴 크기: 15pt;
 글꼴 두께: 굵게;
 색상: #444;
}

.content ul li div.description {
 글꼴 크기: 10pt;
 글꼴 두께: 보통;
 색상: #777;
 줄 높이: 110%;
 여백 하단: 10px;
}

.line-tip {
 글꼴 크기: 11pt;
 여백 상단: 10px;
 여백-왼쪽: 10px;
}

.direction_value {
 색상:#4a4;
 글꼴 두께: 굵게;
}

.댓글 {
 여백 상단: 50px;
 글꼴 크기: 11pt;
 여백-왼쪽: 10px;
}

.comment ul {
 왼쪽 여백: 0;
 왼쪽 패딩: 20px;
 색상: #999;
}

almanac.js代码如下：

复主代码 代码如下:

/*
* 참고: 이 프로그램의 "무작위"는 현재 날짜를 시드로 하는 의사 무작위 개념입니다.
*/
함수 랜덤(dayseed, indexseed) {
var n = 일 종자 % 11117;
for (var i = 0; i n = n * n;
n = n % 11117; // 11117은 소수입니다
}
n을 반환합니다;
}

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

var week = ["日","一","two","三","四","五","六"];
var 방향 = ["북쪽","북동쪽","동쪽","남동쪽","남쪽","남서쪽","서쪽","북서쪽"];
var 활동 = [
{name: "단위 테스트 작성", good: "단위 테스트 작성은 오류를 줄입니다.", bad: "단위 테스트 작성은 개발 효율성을 감소시킵니다."},
{name: "샤워를 하세요", good: "샤워를 안 한 지 며칠 됐나요?", bad: "디자인 영감이 사라져 버릴 거예요"},
{name:"몸을 운동하세요", good:"",bad:"에너지를 많이 소모하지 않지만, 더 많이 먹습니다"},
{name: "흡연", good: "흡연은 마음을 상쾌하게 하고 정신적 민첩성을 높이는 데 좋습니다.", bad: "충분히 살지 않았다면 일찍 죽어도 상관없습니다."},
{name: "낮 동안 온라인 상태", good: "오늘 낮 동안 온라인에 접속하는 것은 안전합니다.", bad: "재앙적인 결과를 초래할 수 있습니다."},
{이름:"리팩토링", 좋음:"코드 품질이 향상되었습니다.", 나쁨:"수렁에 빠질 가능성이 높습니다."},
{name: "%t 사용", good: "더 고급스러워 보입니다.", bad: "다른 사람들은 당신이 과시한다고 생각할 것입니다."},
{name:"Job hopping", 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: "버그 수정", good: "오늘 버그에 대한 후각이 크게 향상되었습니다.", bad: "수정된 것보다 새로운 버그가 더 많이 생성될 것입니다."},
{name:"디자인 검토", good:"디자인 검토 회의는 브레인스토밍으로 바뀔 것입니다", bad:"모두가 지치고 검토는 그냥 지나갑니다"},
{이름:"요구사항 검토", 좋음:"",나쁨:""},
{name: "Weibo로 가세요", good: "오늘 일어난 일을 놓칠 수 없습니다", bad: "사장님이 보실 겁니다"},
{name: "AB 사이트로 이동", good: "아직 이유가 필요합니까?", bad: "상사가 볼 것입니다"}
];

var 스페셜 = [
{날짜:20130221, 유형:'좋음', 이름:'핵 방어 훈련', 설명:'어떤 미친놈이 핵폭탄을 떨어뜨리면 어쩌지...'}
];

var tools = ["Eclipse는 프로그램을 작성합니다", "MSOffice는 문서를 작성합니다", "Notepad는 프로그램을 작성합니다", "Windows8", "Linux", "MacOS", "IE", "Android 장치", "iOS 장치" ];

var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "a", "virtual", "ad" , "거미", "미마", "패스", "ui"];

var drink = ["물","차","홍차","녹차","커피","우유차","콜라","우유","두유","주스" ,"과일" "소다", "소다", "스포츠 음료", "요구르트", "와인"];

함수 getTodayString() {
return "오늘은" today.getFullYear() "연도" (today.getMonth() 1) "월" today.getDate() "요일" 주[today.getDay()];
}

// 生成今日运势
함수 pickTodaysLuck() {
 var numGood = 무작위(iday, 98) % 3 2;
 var numBad = 무작위(iday, 87) % 3 2;
 var eventArr = pickRandomActivity(numGood numBad);
 var SpecialSize = pickSpecials();
 for (var i = 0; i   addToGood(eventArr[i]);
 }
 for (var i = 0; i   addToBad(eventArr[numGood i]);
 }
}

// 添加预정사사건
함수 pickSpecials() {
 var SpecialSize = [0,0];
 
 for (var i = 0; i   var 스페셜 = 스페셜[i];
  
  if (iday == 특별.날짜) {
   if (special.type == '좋음') {
    특수 크기[0] ;
    addToGood({이름: 특수.이름, 좋음: 특수.설명});
   } 그 밖의 {
    특수 크기[1] ;
    addToBad({이름: 특수.이름, 불량: 특수.설명});
   }
  }
 }
 특수 크기를 반환합니다.
}

// 从 활동 中随机挑选 크기 个
함수 pickRandomActivity(크기) {
 var pick_events = pickRandom(활동, 크기);
 for (var i = 0; i   pick_events[i] = 구문 분석(picked_events[i]);
 }
 pick_events 반환;
}

// 从数组中随机挑选 사이즈 个
함수 pickRandom(배열, 크기) {
 var 결과 = [];
 for (var i = 0; i   result.push(배열[i]);
 }
 for (var j = 0; j   var index = 무작위(iday, j) % 결과.길이;
  result.splice(index, 1);
 }
 결과 반환;
}

// 解析位符并替换成随机内容
함수 구문 분석(이벤트) {
 var result = {이름: event.name, good: event.good, bad: 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(이벤트) {
 $('.good .content ul').append('

' event.name '

' 이벤트 .good '

');
}

// 添加到“不宜”
함수 addToBad(이벤트) {
 $('.bad .content ul').append('

' event.name '

' 이벤트 .bad '

');
}

$(함수(){
 $('.date').html(getTodayString());
 $('.direction_value').html(방향[random(iday, 2) % 방향.길이]);
 $('.drink_value').html(pickRandom(drinks,2).join());
 $('.goddes_value').html(random(iday, 6) % 50 / 10.0);
 pickTodaysLuck();
});

希望本文所述对大家의 jQuery는 매우 유용합니다.