【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注释:”这部分js会认为是注释内容的一部分 2.var 声明变量不用声明变量类型 3.声明使用一个数组语法:var object ...

随机推荐

支持持久化的内存数据库-----Redis
一.Redis概述 1.1.什么是Redis Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集合和有序集合 ...
CodeForces 621C Wet Shark and Flowers
方法可以转化一下,先计算每一个鲨鱼在自己范围内的数能被所给素数整除的个数有几个,从而得到能被整除的概率,设为f1,不能被整除的概率设为f2. 然后计算每相邻两只鲨鱼能获得钱的期望概率,f=w[id1] ...
HDU 5613 Baby Ming and Binary image
因为第一行和最后一行都是0,我们只需枚举最左边或最右边一列的01情况,即可得到整张表然后再检验表是否符合要求 #include<cstdio> #include<cstring&g ...
基于LNMP的Zabbbix之Zabbix Server源码详细安装，但不给图
Zabbix Server安装看到那里有错或者有什么问题的话,求指点邮箱:losbyday@163.com 上一篇PHP源码安装参见基于LNMP的Zabbbix之PHP源码安装:https://i ...
浅谈mysql主从复制的高可用解决方案
1.熟悉几个组件(部分摘自网络)1.1.drbd —— DRBD(Distributed Replicated Block Device),DRBD号称是 "网络 RAID" ...
Sping--自动装配(byname, bytype)
UserDAOImpl.java: package com.bjsxt.dao.impl; import com.bjsxt.dao.UserDAO; import com.bjsxt.model.U ...
CABasicAnimation 基本动画
几个可以用来实现热门APP应用PATH中menu效果的几个方法 +(CABasicAnimation *)opacityForever_Animation:(float)time //永久闪烁的动画 ...
Linux 分区的概念
事实上无论是linux 还是 window 都必须遵循以下分区的规则分区类型 1.主分区:最多只能四个. 2.扩展分区: - 最多只能一个 - 主分区加扩展分区最多只能有四个 - 不能写入数据,它存 ...
abs函数
absolute 绝对值函数 abs函数是一个取绝对值函数,你得确保ABS()括号里的表达式所计算出的结果是数字,String是字符串的意思,你括号你的数据肯定是字符串了,如果A.B两变量你是这样定义 ...
IOS之富文本编辑
之前做项目时遇到一个问题: 使用UITextView显示一段电影的简介,由于字数比较多,所以字体设置的很小,行间距和段间距也很小,一大段文字挤在一起看起来很别扭,想要把行间距调大,结 ...

【js 编程艺术】小制作二

【js 编程艺术】小制作二的更多相关文章

随机推荐

热门专题