实现一个简单的网页（缩略词表、文献来源链接、快速访问键列表）

最新推荐文章于 2023-01-05 16:16:28 发布

lishichengyan

最新推荐文章于 2023-01-05 16:16:28 发布

阅读量393

点赞数

分类专栏： JavaScript HTML CSS

本文链接：https://blog.csdn.net/lishichengyan/article/details/77857050

版权

JavaScript 同时被 3 个专栏收录

23 篇文章 0 订阅

订阅专栏

HTML

9 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

1）html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<link rel="stylesheet" type="text/css" media="screen" href="styles/typography.css"/>
		<title>Explaining the Document Object Model</title>
		<script type="text/javascript" src="scripts/addLoadEvent.js"></script>
		<script type="text/javascript" src="scripts/displayAbbreviations.js"></script>
		<script type="text/javascript" src="scripts/displayCitations.js"></script>
		<script type="text/javascript" src="scripts/displayAccessKeys.js"></script>		
	</head>
	<body>
		<ul id="navigation">
			<li><a href="index.html" accesskey="1">Home</a></li>
			<li><a href="search.html" accesskey="4">Search</a></li>
			<li><a href="contact.html" accesskey="9">Contact</a></li>
		</ul>
		<h1>What is the Document Object Model?</h1>
		<p>
		The <abbr title="World Wid Web Consortium">W3C</abbr> defines
		the <abbr title="Document Object Model">DOM</abbr> as:
		</p>
		<blockquote cite="http://www.w3.org/DOM/">
		<p>
		A platform- and language-neutral interface that will allow programs and scripts
		to dynamically access and update the content, structure and style of documents.
		</p>
		</blockquote>
		<p>
		It is an <abbr title="Application Programming Interface">API</abbr> 
		that can be used to navigate <abbr title="HyperText Markup Language">HTML</abbr>
		and <abbr title="eXtensible Markup Language">XML</abbr> documents.
		</p>
	</body>
</html>

2）css：

body{
	font-family:"Helvetica","Arial",sans-serif;
	font-size:10pt;
}
abbr{
	text-decoration:none;
	border:0;
	font-style:normal;
}

3）js：

①添加函数到window.onload事件

/*
simply use window.οnlοad=function(){...}
An alternative way:
*/

function addLoadEvent(func){  
    var oldοnlοad=window.onload;  
    if(typeof window.onload!='function'){  
        window.οnlοad=func;  
    }  
    else{  
        window.οnlοad=function(){  
            oldonload();  
            func();  
        }  
    }  
}

/*
window.οnlοad=function(){
	displayCitations();
	displayAbbreviations();
}
*/

②显示缩略词表

function displayAbbreviations(){
	if(!document.getElementsByTagName||!document.createElement||!document.createTextNode) 
		return false;
	var abbreviations=document.getElementsByTagName("abbr");
	if(abbreviations.length<1) return false;
	var defs=new Array();
	for(var i=0;i<abbreviations.length;i++){
		var current_abbr=abbreviations[i];
		if(current_abbr.childNodes.length<1) continue;
		var definition=current_abbr.getAttribute("title");
		var key=current_abbr.firstChild.nodeValue;
		defs[key]=definition;//如：dfs[W3C]=World Wide Web Consortium
	}
	var dlist=document.createElement("dl");
	for(key in defs){
		var definition=defs[key];
		var dtitle=document.createElement("dt");
		var dtitle_text=document.createTextNode(key);
		dtitle.appendChild(dtitle_text);
		var ddesc=document.createElement("dd");
		var ddesc_text=document.createTextNode(definition);
		ddesc.appendChild(ddesc_text);
		dlist.appendChild(dtitle);
		dlist.appendChild(ddesc);
	}
	if(dlist.childNodes.length<1) return false;
	var header=document.createElement("h2");
	var header_text=document.createTextNode("Abbreviations");
	header.appendChild(header_text);
	document.body.appendChild(header);
	document.body.appendChild(dlist);
}

addLoadEvent(displayAbbreviations);

③显示引用链接

function displayCitations(){
	var quotes=document.getElementsByTagName("blockquote");
	for(var i=0;i<quotes.length;i++){
		if(!quotes[i].getAttribute("cite")) continue;
		var url=quotes[i].getAttribute("cite");
		var quoteChildren=quotes[i].getElementsByTagName("*");
		if(quoteChildren.length<1) continue;
		var elem=quoteChildren[quoteChildren.length-1];
		var link=document.createElement("a");
		var link_text=document.createTextNode("source");
		link.appendChild(link_text);
		link.setAttribute("href",url);
		var superscript=document.createElement("sup");
		superscript.appendChild(link);
		elem.appendChild(superscript);
	}
}

addLoadEvent(displayCitations);

④显示快速访问键列表

function displayAccessKeys(){
	var links=document.getElementsByTagName("a");
	var akeys=new Array();
	for(var i=0;i<links.length;i++){
		var current_link=links[i];
		if(!current_link.getAttribute("accesskey")) continue;
		var key=current_link.getAttribute("accesskey");
		var text=current_link.lastChild.nodeValue;
		akeys[key]=text;//eg. akeys[1]=Home
	}
	var list=document.createElement("ul");
	for(key in akeys){
		var text=akeys[key];
		var str=key+":"+text;
		var item=document.createElement("li");
		var item_text=document.createTextNode(str);
		item.appendChild(item_text);
		list.appendChild(item);
	}
	var header=document.createElement("h3");
	var header_text=document.createTextNode("Accesskeys");
	header.appendChild(header_text);
	document.body.appendChild(header);
	document.body.appendChild(list);
}

addLoadEvent(displayAccessKeys);

效果：

lishichengyan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现一个简单的网页（缩略词表、文献来源链接、快速访问键列表）

1）html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Explaining the Document Object Model Home Search Cont
复制链接

扫一扫

专栏目录