This article illustrates the method of making a simple almanac by JS. Share to everyone for your reference. Specifically as follows:
Today, I learned to use JS to achieve the production of the calendar, by the way to review the use of this, with the production of the tab a little different, the new use of innerHTML, I hope to stick to it, you JS big God also a lot of guidance.
The use of innerHTML
Now you can write HTML code to the location of this ID by using the top.innerhtml= "..." method.
For example top.innerhtml= "", you can have a button in the top corresponding position!
Program Implementation Ideas:
1. Similar tabs, just have a div at the bottom;
2. Use of innerHTML
3. Use of arrays
① definition: arr[0,1,2,3]
② use: arr[0]
4. String connection
① function: Connect two strings "+"
② problem: Priority in the connection () to resolve
To achieve the source code:
JavaScript:
Copy Code code as follows:
<script type= "Text/javascript" >
Window.onload=function ()
{
var arr=[
' Fast Chinese New Year, everybody together to set off firecrackers! ',
' Go to school now, not happy! ',
' Happy Women's Day! ',
' Very plain April ',
' Labor Glorious! ',
' Happy children's Day! ',
' Good hot July! ',
' Bayi! ',
' It's school again! '
];
var odiv=document.getelementbyid (' tab ');
var oli=odiv.getelementsbytagname (' Li ');
var otxt=odiv.getelementsbytagname (' div ') [0];
var i=0;
for (Var i=0;i<oli.length;i++)
{
Oli[i].index=i;
Oli[i].onmouseover=function ()
{
for (Var i=0;i<oli.length;i++)
{
Oli[i].classname= ';
}
This.classname= ' active ';
Otxt.innerhtml= ' };
}
};
</script>
Css:
Copy Code code as follows:
<style type= "Text/css" >
* {padding:0;margin:0;}
Li {list-style:none;}
Body {background: #f6f9fc; font-family:arial;}
. calendar {width:210px;
margin:50px Auto 0;
padding:10px 10px 20px 20px;
Background: #eae9e9; }
. calendar ul {width:210px;
Overflow:hidden;
padding-bottom:10px; }
. calendar Li {float:left;
width:58px;
height:54px;
margin:10px 10px 0 0;
border:1px solid #fff;
Background: #424242;
Color: #fff;
Text-align:center;
Cursor:pointer; }
. Calendar Li h2 {font-size:20px; padding-top:5px}
. Calendar Li p {font-size:14px;}
. Calendar. Active {border:1px solid #424242;
Background: #fff;
Color: #e84a7e; }
. Calendar. Active H2 {}
. Calendar. active p {font-weight:bold;}
. Calendar. text {width:178px;
padding:0 10px 10px;
border:1px solid #fff;
padding-top:10px;
Background: #f1f1f1;
Color: #555; }
. Calendar. text H2 {font-size:14px; margin-bottom:10px;}
. Calendar. text p {font-size:12px; line-height:18px;}
</style>
Html:
Copy Code code as follows:
<body>
<div id= "tab" class= "Calendar" >
<ul>
<li class= "Active" ><li><li><li><li><li><li><li><li><li><li><li></ul>
<div class= "Text" >
</div>
</div>
</body>
The effect chart is as follows:
I hope this article will help you with your JavaScript programming.
