【js 编程艺术】小制作二
首先是一个html文档
/* explanation.html */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Explaining the Doucment Object Model</title>
<link rel="stylesheet" type="text/css" href="styles/typography.css"> //注意href所指向的文件
</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 Wide 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 an style of documents.
</p>
</blockquote>
<p>
It's an <abbr title="Application Programming interface">API</abbr> that can be used to navegate <abbr title="HyperText <arkup Language">HTML</abbr> and <abbr title="eXtensible Markup Language">XML</abbr> doucments.
</p>
<script type="text/javascript" src="scripts/displayAbbreviations.js"></script> //注意href所指向的文件
</body> </html>
注意我的 link 标签和 script 标签所引用的文件夹的位置。然后就是css
/* typography.css*/
body{
font-family: "Hevetica", "Arial", sans-serif;
font-size:10pt;
}
abbr{
text-decoration: none;
border:;
font-style: normal;
}
最后就是精髓之所在js文件了:
/* displayAbbreviations.js */
function addLoadEvent(func) {
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}else{
window.onload = function(){
oldonload();
func();
}
}
} function dispalyAbbreviations() { //检查兼容性
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false; //取得所有缩略词
var dlist = document.createElement("dl");
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]; //ie6及更早不支持abbr元素,但是添加if语句不显示
// if(current_abbr.chileNodes.length < 1) continue;
var definition = current_abbr.getAttribute("title");
var key = current_abbr.lastChild.nodeValue;
defs[key] = definition;
} //创建定义列表
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.chileNodes.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);
} function displayCitations(){ //检查兼容性
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false; //取得所有引用
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);
}
} function displayAccessKeys(){ //检查兼容性
if(!document.getElementsByTagName) return false;
if(!document.createElement) return false;
if(!document.createTextNode) return false; 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;
} //创建列表
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(list);
} addLoadEvent(dispalyAbbreviations);
addLoadEvent(displayCitations);
addLoadEvent(displayAccessKeys);
显示出来就是这样子的:
.
.
.
就这么多了。
【js 编程艺术】小制作二的更多相关文章
- 【js 编程艺术】小制作一
最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...
- 【js编程艺术】小制作六
1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- 【js编程艺术】小制作五
1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 【js 编程艺术】小制作四
1. html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- 【js 编程艺术】小制作三
1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- 牛客JS编程大题(二)
11.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var num = 0; for(var i = 0;i < arr.len ...
- JavaScript DOM编程艺术读书笔记(二)
第五章 最佳实践 平稳退化(graceful degradation):如果正确使用了JavaScript脚本,可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站.虽然某 ...
- Win8 HTML5与JS编程学习笔记(二)
近期一直受到win8应用的Grid布局困扰,经过了半下午加半个晚上的奋斗,终于是弄明白了Grid布局方法的规则.之前我是阅读的微软官方的开发教程,书中没有详细说明CSS3的布局规则,自己鼓捣了半天也是 ...
- dom编程艺术笔记1--第二章
第二章语法部分: 1.js注释:<!-- XXXXX 而“-->”这部分js会认为是注释内容的一部分 2.var 声明变量 不用声明变量类型 3.声明使用一个数组语法:var object ...
随机推荐
- Java中Date对象与String互转
package com.java.test; import java.text.ParseException; import java.text.SimpleDateFormat; import ja ...
- compass scss blueprint
[转载] 今天在执行compass create my-grid –using blueprint 命令时发现报错 google了一下,说是新版compass已经不包括compass-bluprint ...
- ftp linux-500 OOPS问题解决-jooyong-ChinaUnix博客
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- artTemplate-3.0(与项目实际结合)
引入artTemplate.js <script type="text/javascript" src="${ctx}/assets/plugins/artTemp ...
- [Unity]C#中 将XML和实体类之间进行相互转换的工具类
using System; using System.Xml; using System.Xml.Serialization; using System.IO; namespace LOTool { ...
- Tyvj P3276
题目链接:http://www.tyvj.cn/p/3276 这题是一个动归题,一直没有想出动归的做法,后来求教别人之后写了一个记忆化搜索,只有出题者又给我提供了DP的解法,下面我来写写DP的写法 设 ...
- GoEasy消息推送
1. 从GoEasy获取appkey appkey是验证用户的有效性的唯一标识. 注册账号. GoEasy官网:https://goeasy.io 用注册好的账号登录到GoEasy的后台管理系统,创建 ...
- CABasicAnimation 基本动画 分类: ios技术 2015-07-16 17:10 132人阅读 评论(0) 收藏
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
- CLR VIA C#: 基元类型、 引用类型 和 值类型
一.基元类型 . 引用类型 和 值类型的区别: 1.基元类型(primitive type):编译器直接支持的数据类型: 基元类型 直接映射到 FCL 中存在的类型. C# 小写是基元类型,例如:st ...
- Splay初步【bzoj1503】
做了一道水题,把bzoj1503用Splay重新写了一下. #include <bits/stdc++.h> #define rep(i, a, b) for (int i = a; i ...