不过，既然脚注有这些好处，我们当然要在网页中也加以利用，本文向您介绍了用 Javascript 和 CSS 实现脚注效果的方法。
代码如下:
// 说明：用 Javascript 和 CSS 实现脚注（Footnote）效果
var footNotes = function(){};
footNotes.prototype = {
footNoteClassName : "footnote", // 脚注的 className
footNoteTagName : "span", // 脚注的标签名
footNoteBackLink : " [back]", // 返回链接
format : function(contentID, footnoteID)
{
if (!document.getElementById) return false;
var content = document.getElementById(contentID);
var footnote = document.getElementById(footnoteID);
var spans = content.getElementsByTagName(this.footNoteTagName);
var noteArr = [];
var note = 0;
var elContent;
var len = spans.length;
for (i=0; i
{
note ++;
if (spans[i].className == this.footNoteClassName)
{
// 获取脚注内容
elContent = spans[i].innerHTML;
noteArr.push(elContent);
// 创建一个指向脚注的链接
var newEle = document.createElement( "a" );
newEle.href = '#ftn_' + footnoteID + '_' + note;
newEle.title = "show footnote";
newEle.id = 'ftnlink_'+footnoteID+'_' + note;
newEle.innerHTML = note;
// 清空原有内容
while (spans[i].childNodes.length)
{
spans[i].removeChild( spans[i].firstChild );
}
spans[i].appendChild( newEle );
}
}
// 创建注释列表
var ul = this.__buildNoteList(noteArr, footnoteID);
footnote.appendChild(ul);
},
__buildNoteList : function(notes, noteID)
{
if(!notes || notes.length < 1) return;
var ul = document.createElement('ul');
ul.className = this.footNoteClassName;
var li;
var len = notes.length + 1;
for(i=1; i{
li = document.createElement('li');
li.id = "ftn_"+noteID+"_"+i;
li.innerHTML = notes[i-1];
// 创建【返回】链接
var link = document.createElement("a");
link.href = "#ftnlink_" + noteID + "_" + i;
link.innerHTML = this.footNoteBackLink;
li.appendChild( link );
ul.appendChild( li );
}
return ul;
}
};
要实现脚注，我们需要下列元素：
代码如下:
CSS CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
其中：
article1 是你需要脚注的文章主体
.. 是注释内容，标签 span 和 class 均可配置。
artnotes1 是显示脚注的地方
按照默认的设置调用方式：
代码如下:
var footnote = new footNotes();
footnote.format('article1','artnotes1');
如果你想自定义一些内容，可以用下面的方式：
代码如下:
var footnote = new footNotes();
footnote.footNoteClassName = "footnote2";
footnote.footNoteTagName = "em";
footnote.footNoteBackLink = " [back «]";
footnote.format('article1','artnotes1');
测试代码：将下面的代码保存运行。
代码如下:
用 Javascript 和 CSS 实现脚注（Footnote）效果 - 注释, css, Javascript, footnote, 脚注,
用 Javascript 和 CSS 实现脚注（Footnote）效果
输出值赋予每一输入的『法则』(Wikipedia)。或者一个验证邮件地址的正则表达式正则表达式(Regular Expression)描述了一种字符串匹配的模式，可以用来检查一个串是否含有某种子串、将匹配的子串做替换或者从某个串中取出符合某个条件的子串等。，又或者一个简单的文件上传类，甚至一个效果不错的CSSCSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。
本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类类是对某个对象的定义。它包含有关对象动作方式的信息，包括它的名称、方法、属性和事件。，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。
Article 2
在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。因此，本站致力于收集整理一些类似的小知识，并且努力提高文章搜索质量，一来方便大家查阅，二来也算是支持一下开源事业。
本站收集的代码和教程中，有从世界著名开源软件中摘取的函数、类，也有网友提交的原创或翻译的精彩文章。本站的收录代码的标准是：简单、精彩、通用。
// var footnote = new footNotes();
footnote.format('article1','artnotes1');
var footnote2 = new footNotes();
footnote2.footNoteClassName = "footnote2";
footnote2.footNoteTagName = "em";
footnote2.footNoteBackLink = " [back «]";
footnote2.format('article2','artnotes2');
//]]>
返回 『用 Javascript 和 CSS 实现脚注（Footnote）效果』
