This article mainly introduced the jquery ancient history complete implementation method, elaborated the detailed steps and the skill which based on the jquery Implementation Almanac, needs the friend to be possible to refer to under
-->This article illustrates the jquery ancient history implementation method. Share to everyone for your reference. The specific implementation methods are analyzed as follows:
Let's take a look at how the program works:
The HTML page section is as follows:
The code is as follows:The STYLE.CSS style is as follows:
Copy code code as follows: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:
The code is as follows:var today = new Date ();
var iday = today.getfullyear () * 10000 + (Today.getmonth () + 1) * + today.getdate ();
var weeks = ["Day", "one", "two", "three", "four", "five", "six"];
var directions = ["North", "Northeast Side", "East", "South-east", "South", "Southwest", "Western", "Northwest"];
var activities = [
{Name: Write unit test, good: "Write unit tests will reduce errors", bad: "Write unit tests will reduce your development efficiency"},
{Name: "Bathe", good: "You haven't bathed in a few days?" ", bad:" will be the design of the inspiration to wash out "},
{Name: "Exercise the Body", Good: "", Bad: "Energy is not consumed much, eat more"},
{name: "Smoking", Good: "Smoking is good for refreshing, increase thinking agility", bad: "Unless you live enough, it's okay to die early"},
{Name: "Day on Line", good: "It is safe to be online today", bad: "may cause catastrophic consequences"},
{Name: refactoring, Good: "Improved code Quality", bad: "You are likely to get into the mire"},
{name: "Use%t", good: "You look more tasteful", bad: "People will think you are pretending to force"},
{Name: "job-hopping", Good: "Let go when it's time to give up", bad: "In view of the current economic situation, your next job may not be stronger than now"},
{Name: "Recruit", Good: "You encounter a great increase in the likelihood of the horse", Bad: "You will only recruit one or two of the layman to make a bread"},
{Name: "Interview", Good: "The interviewer is in a good mood Today", bad: "Interviewer uncomfortable, will take your breath"},
{Name: "Submit a resignation request", good: "The company has found a more capable and cheaper guy than you, and you're going to get the fuck out of Here," bad: "Your next job may not be stronger than it is now, given the current economic situation"}
{name: "Apply for a Raise", good: "The boss is in a good mood Today", bad: "The company is considering layoffs"},
{Name: Overtime at night, good: "Night is the best time for programmers", Bad: ""},
{name: "Brag in front of her sister", good: "Improve your image of short and poor", bad: "will be seen through"},
{name: "The Pipe", good: "Avoid buffer overflow", bad: "Small--------------------------"
{Name: "Browse Adult website", good: "Regain confidence in life", bad: "You will be uneasy"},
{name: ' named variable '%v ', Good: ' ", Bad:"},
{Name: "Write more than%l line", good: "Your code is organized very well, it doesn't matter long, bad:" Your code will be messy, you can not understand "},
{Name: Submit code, good: "The odds of encountering a conflict are the lowest", bad: "You encounter a lot of conflict will make you feel that you are not time to cross"},
{Name: code review, good: "The chances of discovering important problems are greatly increased", bad: "You can not find any problems, waste time"},
{Name: "Meeting", Good: "Relax and take a nap while you write the code, good health", bad: "You will be taken for a bowl of excrement"},
{name: "Play DotA", Good: "You will be like God help", bad: "You will be abused very miserably"},
{Name: "Online at Night", Good: "At night is the best time for programmers", bad: "You are exhausted during the day"},
{Name: Fix bugs, good: "You have a much better sense of smell for bugs today", Bad: "New bugs will be more than fixed"},
{Name: Design review, good: "The design review meeting will become brainstorming", bad: "Everyone is exhausted and the judges are Gone"},
{Name: "Requirements Review", good: "", Bad: "},
{name: "On Weibo", good: "What happened today can not be missed", bad: "will be the Boss see"},
{name: "Up AB Station", Good: "Do you need a reason?" ", bad:" will be seen by the Boss "}
];
var specials = [
{date:20130221, type: ' Good ', Name: ' Nuclear drill ', Description: ' In case any lunatic loses a nuclear bomb ... '}
];
var tools = [Eclipse Write program, "MSOffice writing document", "Notepad Writing program", "Windows8", "Linux", "MacOS", "IE", "Android Device", "iOS device"];
var varnames = ["Jieguo", "Huodong", "pay", "expire", "Zhangdan", "every", "free", "I1", "a", "virtual", "ad", "Spider", " Mima "," Pass "," UI "];
var drinks = ["Water", "tea," black tea "," green tea "," coffee "," tea "," cola "," Milk "," Soy Milk "," juice "," fruity soda "," soda water "," Sports drink "," yogurt "," wine "];
function gettodaystring () {
Return "Today is" + today.getfullyear () + "year" + (Today.getmonth () + 1) + "month" + today.getdate () + "Day Week" + weeks[today.getday ()) ;
}
Generate Today's horoscope
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;
}
Randomly select 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;
}
Resolves placeholders and replaces them 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,)% varnames.length]);
}
if (result.name.indexOf ('%t ')!=-1) {
Result.name = Result.name.replace ('%t ', Tools[random (iday, one)% tools.length]);
}
if (result.name.indexOf ('%l ')!=-1) {
Result.name = Result.name.replace ('%l ', (Random (iday,)% 247 +). toString ());
}
return result;
}
Add to "appropriate"
function Addtogood (event) {
$ ('. Good. Content ul '). Append (' <li><div class= ' name ' > ' + event.name + ' </div><div class= ') Description "> ' + event.good + ' </div></li>");
}
Add to "not appropriate"
function Addtobad (event) {
$ ('. Bad. Content ul '). Append (' <li><div class= ' name ' > ' + event.name + ' </div><div class= ') Description "> ' + Event.bad + ' </div></li>");
}
$ (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 ();
});
I hope this article will help you with your 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
