一个可以随意添加多个序列的tag函数

187 阅读 0 评论 124 点赞

我是靠谱客的博主悦耳中心，最近开发中收集的这篇文章主要介绍一个可以随意添加多个序列的tag函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

/**
* @author Supersha
* @QQ:770104121
*/
由于在没有规划好的情况下写的这个代码，写的比较粗糙，也没有添加注释。
主要特点：JavaScript代码和HTML完全分离；可以随意添加多个子div标签，自动扩展
JavaScript代码：

复制代码代码如下:

 
<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]; //初始化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]; //存儲對應的原來的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) 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"; //初始化span 
} 
onload = function(){ 
tag("tag", "div"); //调用tag函数 
} 
</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代码：

复制代码代码如下:

 
<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> 
<!--....可以随意添加多个tag....--> 
</div> 