首页 > 代码库 > 【js 编程艺术】小制作四
【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 编程艺术】小制作四
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。