一个可以随意添加多个序列的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 相关文章推荐
js利用div背景,做一个竖线的效果。
Nov 22 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
jquery根据属性和index来查找属性值并操作
Jul 25 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
jQuery简单实现仿京东分类导航层效果
Jun 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
原生JS+Canvas实现五子棋游戏
May 28 Javascript
详解Layer弹出层样式
Aug 21 Javascript
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
antd form表单数据回显操作
Nov 02 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
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
Fine Uploader文件上传组件应用介绍
2013/01/06 PHP
深入理解PHP内核(一)
2015/11/10 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
PHP-FPM的配置与优化讲解
2019/03/15 PHP
AngularJS iframe跨域打开内容时报错误的解决办法
2015/01/26 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
jQuery Plupload上传插件的使用
2017/04/19 jQuery
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序商品详情页规格属性选择示例代码
2017/10/30 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
M2实现Nodejs项目自动部署的方法步骤
2019/05/05 NodeJs
Node.js+Vue脚手架环境搭建的方法步骤
2020/03/08 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
centos下更新Python版本的步骤
2013/02/12 Python
python装饰器使用方法实例
2013/11/21 Python
python远程连接服务器MySQL数据库
2018/07/02 Python
详解python 利用echarts画地图(热力图)(世界地图,省市地图,区县地图)
2019/08/06 Python
keras多显卡训练方式
2020/06/10 Python
Python 打印自己设计的字体的实例讲解
2021/01/04 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
阿迪达斯奥地利官方商城:adidas.at
2016/10/16 全球购物
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
幼儿园庆六一活动方案
2014/03/06 职场文书
无财产无子女离婚协议书范文
2014/09/14 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
婚前保证书范文
2015/02/28 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
酒店工程部的岗位职责汇总大全
2019/10/23 职场文书