A tag function that can add multiple sequences at will

/**
* @ Author Supersha
* @ QQ: 770104121.
*/
Because this code is not written properly, it is rough and does not add comments.
Main features: JavaScript code and HTML are completely separated; you can add multiple sub-div tags at will to automatically expand
JavaScript code:
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Var tag = function (parentTagId, sunTag ){
Var oldHtml = [];
Var spans = [];
Var tagElemment = document. getElementById (parentTagId );
Var sunElems = tagElemment. getElementsByTagName (sunTag );
For (var I = 0; I <sunElems. length; I ++ ){
OldHtml [oldHtml. length] = sunElems [I]. innerHTML;
SunElems [I]. style. display = "none ";
}
Var newElem = document. createElement ("div ");
NewElem. innerHTML = oldHtml [0]; // initialize the div
TagElemment. appendChild (newElem );
Var clearID = 0, index = 0;
ClearID = setInterval (function (){
If (index> = 1) spans [index-1]. style. border = "1px dotted # ccc ";
If (index = sunElems. length-1) index = 0;
NewElem. innerHTML = oldHtml [index];
Index ++;
Spans [index-1]. style. border = "1px solid #666 ";
},2000 );
For (var I = 0; I <oldHtml. length; I ++ ){
Var span = document. createElement ("span ");
Span. innerHTML = (I + 1). toString ();
Span. id = "span_tab" + I;
Span.html = oldHtml [I]; // store the HTML of the original div faces corresponding to the response.
Spans [I] = span;
Span. onmouseover = function (){
If (index> = 1) spans [index-1]. style. border = "1px dotted # ccc ";
NewElem. innerHTML = this.html; // response value
ClearInterval (clearID );
}
Span. onmouseout = function (){
Index = parseInt (this. innerHTML );
If (index> = 1) spans [index-1]. style. border = "1px solid #666 ";
ClearID = setInterval (function (){
If (index> = 1) spans [index-1]. style. border = "1px dotted # ccc ";
If (index = sunElems. length-1) index = 0;
NewElem. innerHTML = oldHtml [index];
Index ++;
Spans [index-1]. style. border = "1px solid #666 ";
},2000 );
}
TagElemment. appendChild (span );
Span = null;
}
Spans [0]. style. border = "1px solid #666"; // initialize span
}
Onload = function (){
Tag ("tag", "div"); // call the tag Function
}
</Script>
<Style type = "text/css">
# Tag {
Border: 1px solid # eee;
Float: left;
} # Tag span {
Border: 1px dotted # ccc;
Background: # eee;
Padding: 1px 6px;
Margin-right: 8px;
} # Tag span: hover {
Background: # ccc;
Border: 1px solid #666;
}
</Style>

HTML code:
Copy codeThe Code is as follows:
<Div id = "tag">
<Div>
<P>
<B> Tag demo 1, </B>
I will achive it.
</P>
</Div>
<Div>
<P>
<B> Tag demo 2, </B>
I will achive it.
</P>
</Div>
<Div>
<P>
<B> Tag demo 3, </B>
I will achive it.
</P>
</Div>
<Div>
<P>
<B> Tag demo 4, </B>
I will achive it.
</P>
</Div>
<Div>
<P>
<B> Tag demo 5, </B>
I will achive it.
</P>
</Div>
<Div>
<P>
<B> Tag demo 6, </B>
I will achive it.
</P>
</Div>
<! --... You can add multiple tags at will... -->
</Div>