【js 编程艺术】小制作四
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 编程艺术】小制作四的更多相关文章
- 【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"> < ...
- 【js 编程艺术】小制作二
首先是一个html文档 /* explanation.html */<!DOCTYPE html> <html> <head> <meta charset=& ...
- JavaScript DOM编程艺术读书笔记(四)
第十章 实现动画效果 var repeat = "moveElement('"+elementID+"',"+final_x+","+fin ...
- 【js编程艺术】 之有用的函数
学习js的过程中有几个有用的函数. //添加事件函数 function addLoadEvent(func) { var oldonload = window.onload; if(typeof wi ...
- javascript dom 编程艺术笔记 第四章：图片库
首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
- JavaScript DOM编程艺术 笔记（四）
DOM document object model(map) 家谱树---节点树 父 子 兄弟 元素节点 <div> 文本节点 内容 属性节点 value src getE ...
随机推荐
- sencha touch环境搭建
引入touch文件,包括resources和sencha-touch-debug.js文件 index.html文件内容如下: <!DOCTYPE HTML> <html> & ...
- 计算机学院大学生程序设计竞赛（2015’12） 1002 Polygon
#include<iostream> #include<cstring> #include<cstdio> #include<cmath> #inclu ...
- Linux在shell中df半天没反应
问题描述: df -hT 一直没反应,只能Ctrl+c中断此操作! 解决方法: 多是mount挂载远程服务,而远程服务已关闭,出于一直mount状态,df -hT是查看本地挂载和远程挂载! df ...
- hibernate--session的CRUD方法, delete, load,get,update,saveorupdate, clear, flush
删除方法: 新建的对象立马被删除 @Test public void testDelete() { Teacher t = new Teacher(); t.setName("t1" ...
- avi格式详细介绍
百度:http://wenku.baidu.com/link?url=KB7qKc6UG4aeU-i9FtXeV8Uou4JHPceiyz3HNbzCrQw4phY-qRlcp3tTSwYPeIgdx ...
- Quick Cocos2dx Http通讯 JSON
参考: 1 http://stackoverflow.com/questions/5975952/how-to-extract-http-message-body-in-basehttprequest ...
- [iOS Animation]CALayer-图层时间
图层时间 时间和空间最大的区别在于,时间不能被复用 -- 弗斯特梅里克 在上面两章中,我们探讨了可以用CAAnimation和它的子类实现的多种图层动画.动画的发生是需要持续一段时间的,所以计时对整个 ...
- 比较实用的webpack配置代码
var path = require('path');var webpack = require('webpack');var ExtractTextPlugin = require('extract ...
- laravel无法显示路由界面
安装完laravel项目后,开启了重写,/app/storage也设置好了权限,但是始终无法显示出页面,并出现: "Whoops, looks like something went wro ...
- MySql存储过程—7、游标(Cursor)
|字号 订阅 1.游标的作用及属性 游标的作用就是用于对查询数据库所返回的记录进行遍历,以便进行相应的操作:游标有下面这些属性: a.游标是只读的,也就是不能更新它: b.游标是不能滚动的,也就是只能 ...