Home > Developer > JavaScript
The complete implementation method of jQuery Old Huang Li and jquery Old Huang Li
The example in this article describes how to implement jQuery's old calendar. Share it with you for your reference. The implementation method is analyzed as follows:
Let's take a look at the program running effect:
The html page is as follows:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Title> jquery Old Huang Li special effect-</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">
Programmer's old experience <sup> beta </sup>
</Div>
<Div class = "date">
</Div>
<Div class = "good">
<Div class = "title">
<Table>
<Tr> <td> Yi </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> not suitable </td> </tr>
</Table>
</Div>
<Div class = "content">
<Ul> </ul>
</Div>
<Div class = "clear"> </div>
</Div>
<Div class = "split"> </div>
<Div class = "line-tip">
<Strong> seat orientation: </strong> write programs for <span class = "direction_value"> </span> with the least BUG.
</Div>
<Div class = "line-tip">
<Strong> today's Yiyin: </strong> <span class = "drink_value"> </span>
</Div>
<Div class = "line-tip">
<Strong> goddess Closeness Index: </strong> <span class = "goddes_value"> </span>
</Div>
</Div>
</Body>
</Html>
The style.css style is as follows:
Copy codeThe Code is as follows:
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;
}
The almanac. js code is as follows:
Copy codeThe Code is as follows:
/*
* Note: In this program, "random" is a pseudo-random concept, with the current day as the seed.
*/
Function random (dayseed, indexseed ){
Var n = dayseed % 11117;
For (var I = 0; I <100 + indexseed; I ++ ){
N = n * n;
N = n % 11117; // 11117 is a prime number.
}
Return n;
}
Var today = new Date ();
Var iday = today. getFullYear () * 10000 + (today. getMonth () + 1) * 100 + today. getDate ();
Var weeks = ["day", "one", "two", "three", "four", "five", "Six"];
Var directions = ["North", "North East", "East", "South East", "South West", "West", "North West"];
Var activities = [
{Name: "write unit test", good: "writing unit test reduces errors", bad: "writing unit test reduces your development efficiency "},
{Name: "bath", good: "Haven't you taken a bath for a few days? ", Bad:" The design inspiration will be washed away "},
{Name: "exercise", good: "", bad: "No energy consumption, eat more "},
{Name: "smoke", good: "Smoking is conducive to refreshing, increasing the agility of thinking", bad: "It doesn't matter if you have enough to live "},
{Name: "going online during the day", good: "going online during the day is safe", bad: "disastrous consequences "},
{Name: "refactoring", good: "code quality is improved", bad: "You may be in a quagmire "},
{Name: "Use % t", good: "You look more tasteful", bad: "others will think you are pretending to be forced "},
{Name: "Job hopping", good: "Let it go when you let it go", bad: "In view of the current economic situation, your next job may not be better than the present "},
{Name: "recruit people", good: "You are more likely to encounter a horse", bad: "You will only recruit one or two out-of-box foodies "},
{Name: "interview", good: "The interviewer is in a good mood today", bad: "The interviewer is upset and will throw you out "},
{Name: "Submit your resignation application", good: "The company has found a guy who is more competent and cheaper than you, so you can't hurry up.", bad: "In view of the current economic situation, your next job may not be better than you do now "},
{Name: "Apply for a raise", good: "the boss is in a good mood today", bad: "The company is considering downsizing "},
{Name: "working overtime at night", good: "evening is the best time for programmers", bad :""},
{Name: "boast in front of your sister", good: "improve your poor image", bad: "will be recognized "},
{Name: "render manager", good: "Avoid buffer overflow", bad: "Xiao Yi yi Qing, da Yi Xi, strong yundun "},
{Name: "browsing adult websites", good: "regain confidence in life", bad: "You will be restless "},
{Name: "name variable \" % v \ "", good: "", bad :""},
{Name: "Method for writing more than % l rows", good: "Your code is organized very well and it doesn't matter if you have a long queue", bad: "Your code will be messy, you cannot understand it yourself "},
{Name: "Submit code", good: "The probability of a conflict is the lowest", bad: "A lot of conflicts you encounter may make you feel that you have crossed the time "},
{Name: "Code Review", good: "The chances of discovering important problems are greatly increased.", bad: "You can't find any problems. It's a waste of time "},
{Name: "meeting", good: "relax when writing code, and make a success.", bad: "You will be taken down by a raspberry "},
{Name: "DOTA", good: "You will be like God help", bad: "You will be abused badly "},
{Name: "going online at night", good: "evening is the best time for programmers", bad: "You are exhausted during the day "},
{Name: "fixing bugs", good: "Your sense of smell on bugs is greatly improved today", bad: "New bugs will be more than fixed "},
{Name: "Design Review", good: "design review meetings will be brainstorming", bad: "Everyone is exhausted, so the review is done "},
{Name: "demand Review", good: "", bad :""},
{Name: "Weibo", good: "What happened today cannot be missed", bad: "will be seen by the boss "},
{Name: "shangab Station", good: "Do you still need reasons? ", Bad:" will be seen by the boss "}
];
Var specials = [
{Date: 20130221, type: 'good', name: 'anti-nuclear exercise ', description:' In case a madman drops a nuclear bomb ...'}
];
Var tools = ["Eclipse Write Program", "MSOffice write Document", "Notepad Write Program", "Windows8", "Linux", "MacOS", "IE ", "Android devices", "iOS devices"];
Var varNames = ["jieguo", "huodong", "pay", "expire", "zhangdan", "every", "free", "i1", "", "virtual", "ad", "spider", "mima", "pass", "ui"];
Var drinks = ["water", "tea", "Black Tea", "Green Tea", "coffee", "Milk Tea", "Cola", "milk", "Soy Milk ", "juice", "fruit soda", "soda", "sports drinks", "yogurt", "Wine"];
Function getTodayString (){
Return "today is" + today. getFullYear () + "year" + (today. getMonth () + 1) + "month" + today. getDate () + "day week" + weeks [today. getDay ()];
}
// Generate today's fortune
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]);
}
}
// Add a predefined event
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;
}
// Select a random size from activities
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;
}
// Randomly select the size from the array
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;
}
// Parse the placeholder and replace it with random content
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;
}
// Add it to "Yi"
Function addToGood (event ){
$ ('. Good. content ul '). append ('<li> <div class = "name">' + event. name + '</div> <div class = "description">' + event. good + '</div> </li> ');
}
// Add it to "not suitable"
Function addToBad (event ){
$ ('. Bad. content ul '). append ('<li> <div class = "name">' + event. name + '</div> <div class = "description">' + event. bad + '</div> </li> ');
}
$ (Function (){
Response ('.date').html (getTodayString ());
(('.Direction_value').html (directions [random (iday, 2) % directions. length]);
Certificate ('.drink_value'0000.html (pickRandom (drinks, 2). join ());
Certificate ('.goddes_value'destination .html (random (iday, 6) % 50/10 .0 );
PickTodaysLuck ();
});
I hope this article will help you with jQuery programming.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
