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


Posted in Javascript onJuly 21, 2009

/**
* @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]; //存????脑?淼?iv?面的HTML 
spans[i]=span; 
span.onmouseover = function(){ 
if(index>=1) spans[index-1].style.border="1px dotted #ccc"; 
newElem.innerHTML = this.html; //???x值 
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>
Javascript 相关文章推荐
用showModalDialog弹出页面后,提交表单总是弹出一个新窗口
Jul 18 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
玩转方法:call和apply
May 08 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
Javascript this 函数深入详解
Dec 13 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
May 17 Javascript
在angularJs中进行数据遍历的2种方法
Oct 08 Javascript
layui清空,重置表单数据的实例
Sep 12 Javascript
通过实例解析json与jsonp原理及使用方法
Sep 27 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 #Javascript
js计算页面刷新的次数
Jul 20 #Javascript
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 #Javascript
Prototype Hash对象 学习
Jul 19 #Javascript
Prototype Array对象 学习
Jul 19 #Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 #Javascript
Prototype String对象 学习
Jul 19 #Javascript
You might like
xajax写的留言本
2006/11/25 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
9行javascript代码获取QQ群成员具体实现
2013/10/16 Javascript
javascript禁用Tab键脚本实例
2013/11/22 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
AngularJS 入门教程之HTML DOM实例详解
2016/07/28 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
js正则表达式校验指定字符串的方法
2018/07/23 Javascript
vue 单页应用和多页应用的优劣
2020/10/22 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python中is与双等于号“==”的区别示例详解
2017/11/21 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
pandas pivot_table() 按日期分多列数据的方法
2018/11/16 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
jupyter notebook 多行输出实例
2020/04/09 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
M1芯片安装python3.9.1的实现
2021/02/02 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
全球性的在线婚纱礼服工厂:27dress.com
2019/03/21 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
公司离职证明范本
2014/01/13 职场文书
征婚广告词
2014/03/17 职场文书
学校周年庆活动方案
2014/08/22 职场文书
2014年公务员退休工资改革方案
2014/10/01 职场文书
讲座新闻稿
2015/07/18 职场文书
TV动画《间谍过家家》公开PV
2022/03/20 日漫