Home > Developer > JavaScript
Complete and simple examples of js production and js Samples
This article describes how to create a simple callback using js. Share it with you for your reference. The details are as follows:
Today, I learned how to use js to implement pipeline. By the way, I reviewed the usage of this, which is a little different from the production of tabs. I hope I can stick to it, you can also give more advice to the js experts.
InnerHtml usage
Now you can use the top. innerHTML = "......"; Method to write HTML code to the location of this id.
For example, top. innerHTML = ""; you can see a button at the top position!
Program Implementation ideas:
1. Similar tabs, but there is a div at the bottom;
2. Use of innerHTML
3. Use of Arrays
① Definition: arr [,]
② Use: arr [0]
4. String connection
① Function: connect two strings "+"
② Problem: the priority in the connection is solved ().
Source code:
JavaScript:
Copy codeThe Code is as follows: <script type = "text/javascript">
Window. onload = function ()
{
Var arr = [
'The New Year is approaching. Let's set off firecrackers together! ',
'You are going to school now. You are not happy! ',
'Happy Women's Day! ',
'Very dull July 11 ',
'Labor is glorious! ',
'Happy Children's Day! ',
'Hot September! ',
'Bayi army building festival! ',
'It's school again! '
];
Var oDiv = document. getElementById ('tab ');
Var oLi = oDiv. getElementsByTagName ('lil ');
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 codeThe Code is 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 codeThe Code is 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>
As follows:
I hope this article will help you design javascript programs.
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
