will_javascript 스킬에 여러 시퀀스를 추가할 수 있는 태그 기능

/**
* @author Supersha
* @QQ:770104121
*/
이 코드는 계획 없이 작성되었기 때문에 상대적으로 거칠고 코멘트도 추가하지 않았습니다.
주요 기능: JavaScript 코드와 HTML은 완전히 분리되어 있습니다. 여러 개의 하위 div 태그를 마음대로 추가하고 자동으로 확장할 수 있습니다.
JavaScript 코드:

코드 복사 코드는 다음과 같습니다.

<script type="text/javascript">
var tag = function(parentTagId, sunTag){
var oldHtml = [] ;
varspans=[];
var tagElemment = document.getElementById(parentTagId);
var sunElems = tagElemment.getElementsByTagName(sunTag); = 0; i < sunElems .length; i ) {
oldHtml[oldHtml.length] = sunElems[i].innerHTML;
var newElem = document .createElement("div");
newElem.innerHTML = oldHtml[0]; //div 초기화
tagElemment.appendChild(newElem)
varclearID = 0, index = 0;
clearID = setInterval(function(){
if(index>=1) 범위[index-1].style.border="1px 점선 #ccc";
if(index== sunElems.length-1) 인덱스 =0;
newElem.innerHTML = oldHtml[index];
index
spans[index-1].style.border="1px solid #666"; >}, 2000);
for (var i = 0; i < oldHtml.length; i ) {
varspan = document.createElement("span")
span.innerHTML = (i 1).toString();
span.id="span_tab" i;
span.html = oldHtml[i] //원본 div에 해당 HTML 저장
spans[i]=span ;
span.onmouseover = function(){
if(index>=1)spans[index-1].style.border="1px dotted #ccc"
newElem.innerHTML = this.html ; //해당 할당
clearInterval(clearID);
}
span.onmouseout = function(){
index=parseInt(this.innerHTML)
if(index>=1) 스팬[index-1] .style.border="1px solid #666";
clearID = setInterval(function(){
if(index>=1) 스팬[index-1].style.border= "1px 점선 #ccc" ;
if(index==sunElems.length-1) index=0;
newElem.innerHTML = oldHtml[index]
spans[index-1] ].style.border= "1px solid #666";
}
tagElemment.appendChild(span)
span
}
[0].style.border="1px solid #666"; //스팬 초기화
}
onload = function(){
tag("tag", "div"); 함수
}
</script>
<style type="text/css">
#tag {
테두리: 1px 솔리드
float: 왼쪽 ;
} # 태그 범위 {
경계: 1px 점선 #ccc;
배경: #eee;
여백: 8px; 범위:hover {
배경: #ccc;
테두리: 1px 솔리드 #666>}
</style>


HTML 코드:




코드 복사

코드는 다음과 같습니다.

<div id="tag"> <div> < p> <b>데모 1을 태그하세요. </p> ; <div> <p>데모 2를 태그하세요.

데모 3을 태그하세요.

;
</div>
<p>
<b>데모 4를 태그하세요

데모 5를 태그하세요.
.
</p>
<div>
<b>
&lt ;/p>
</div>
<!--...원하는 만큼 태그를 추가할 수 있습니다....->
</div>