1. html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Cities</title>

    <link rel="stylesheet" type="text/css" href="styles/format.css">

</head>

<body>

    <table>

        <caption>Itinerary</caption>

        <thead>

            <tr>

                <th>When</th>

                <th>Where</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>June 9th</td>

                <td>Portland, <abbr title="Oregon">OR</abbr></td>

            </tr>

            <tr>

                <td>June 10th</td>

                <td>Seattle, <abbr title="Washington">WA</abbr></td>

            </tr>

            <tr>

                <td>June 12th</td>

                <td>Sacramento, <abbr title="California">CA</abbr></td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript" src="scripts/addLoadEvent.js"></script>

    <script type="text/javascript" src="scripts/stripeTables.js"></script>

    <script type="text/javascript" src="scripts/displayAbbreviations.js"></script>

    <script type="text/javascript" src="scripts/highlightRows.js"></script>

</body>

</html>

2.css

body{

    font-family: "Helvetica", "Arial", sans-serif;

    background-color: #fff;

    color: #000;

}

table{

    margin: auto;

    border: 1px solid #699;

}

caption{

    margin: auto;

    padding: .2em;

    font-size: 1.2em;

    font-weight: bold;

}

th{

    font-weight: normal;

    font-style: italic;

    text-align: left;

    border: 1px dotted #699;

    background-color: #9cc;

    color: #000;

}

th, td{

    width: 10em;

    padding: .5em;

}

/*tr:nth-child(odd){

    background-color: #ccc;

}

tr:nth-child(even){

    background-color: #fff;

}*/

.odd{

    background-color: #ffc;

}

3.js

/* addLoadEvent.js*/

function addLoadEvent(func) {

    var oldonload = window.onload;

    if(typeof window.onload != "function"){

        window.onload = func;

    }else{

        window.onload = function(){

            oldonload();

            func();

        }

    }

}
/* stripeTables.js*/

function addClass(element, value){

    if(!element.className){

        element.className = value;

    }else{

        var newClassName = element.className;

        newClassName += " ";

        newClassName += value;

        element.className = newClassName;

    }

}

function stripeTables(){

    if(!document.getElementsByTagName) return false;

    var tables = document.getElementsByTagName("table");

    var odd, rows;

    for(var i = 0; i < tables.length; i++){

        odd = false;

        rows = tables[i].getElementsByTagName("tr");

        for(var j = 0; j < rows.length; j++){

            if(odd == true){

                addClass(rows[j], "odd");

                odd = false;

            }else{

                odd = true;

            }

        }

    }

}

// window.onload = stripeTables;

addLoadEvent(stripeTables);
/* dispalyAbbreviations.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);
/* highlightRows.js*/

function highlightRows(){

    if(!document.getElementsByTagName) return false;

    var rows = document.getElementsByTagName("tr");

    for(var i = 0; i < rows.length; i++){

        rows[i].onmouseover = function(){

            this.style.fontWeight = "bold";

        }

        rows[i].onmouseout = function(){

            this.style.fontWeight = "normal";

        }

    }

}

addLoadEvent(highlightRows);

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

  1. 【js 编程艺术】小制作一

    最近在看js编程艺术,照葫芦画瓢,做了一个小网页.作为一枚前端渣渣,遇到了好多坑,在这里就不提了. 首先是html代码 /*gallery.html*/<!DOCTYPE html> &l ...

  2. 【js编程艺术】小制作六

    1.html /* movie.html*/<!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. 【js编程艺术】小制作五

    1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...

  4. 【js 编程艺术】小制作三

    1.html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...

  5. 【js 编程艺术】小制作二

    首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...

  6. JavaScript DOM编程艺术读书笔记(四)

    第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...

  7. 【js编程艺术】 之有用的函数

    学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...

  8. javascript dom 编程艺术笔记 第四章：图片库

    首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. JavaScript DOM编程艺术 笔记（四）

    DOM document   object model(map) 家谱树---节点树 父 子  兄弟 元素节点  <div> 文本节点  内容 属性节点   value  src getE ...

随机推荐

  1. SpringMVC文件上传报错org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.MultipartHttpServletRequest

    错误信息: java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to or ...

  2. 用php自动发邮件的简单实现

    如何自动发送邮件? php自带mail方法,不过只能在linux下直接使用,windows下要配置smtp服务器,有点麻烦. 可以用一些现成的类来实现,比如很有名的phpmailer,功能很强大,代码 ...

  3. （译）Windsor入门教程---第一部分 获取Windsor

    原文:http://docs.castleproject.org/Windsor.Windsor-tutorial-ASP-NET-MVC-3-application-To-be-Seen.ashx ...

  4. ComboBox值排序

    ComboBox值排序先是想通过冒泡排序,但是冒泡排序是int类型,又打算通过下标,进行字符串排序,然后想到了一个简单的办法……先存入ArrayList排序Sort清空ComboBox再遍历存入 ...

  5. PHP 实现冒泡法排序

    <?php $nums = array(10,0,20,30,50,40,80); function stor($numbers){ $length = count($numbers); for ...

  6. IOS开发－UI学习－UITabBarController的使用

    UITabBarController具体实例如下图 我们最常见的就是微信最下面的四个按钮,通过这四个按钮可以导航到不同的界面. UITabBarController是一个容器,以下的例程中给UITab ...

  7. 深入了解Bundle和Map

    [转]http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0402/2684.html 前言 因为往Bundle对象中放入Map实际上 ...

  8. My first essay

    今天是我开通博客第一天,从此开始了我的博客之路.为了实现成为程序猿的我,现在开始努力啦~今年大三,就读杭州电子科技大学,通信工程专业.现在在自学web前端,虽然与我就读专业并无多大相关,但是这是根据自 ...

  9. ASCII 码对应表

    Macron symbol ASCII CODE 238 : HTML entity : [ Home ][ español ] What is my IP address ? your public ...

  10. WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图（转载）

    WebGIS中通过行列号来换算出多种瓦片的URL 之离线地图 1.前言 在前面我花了两个篇幅来讲解行列号的获取,也解释了为什么要获取行列号.在这一章,我将把常见的几种请求瓦片时的URL样式罗列出来,并 ...