-
Notifications
You must be signed in to change notification settings - Fork 2
/
myjs.js
142 lines (123 loc) · 4.81 KB
/
myjs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
//目录 *以下所有不需要参数的函数都要先加载addLoadEvent
//1. addLoadEvent //同时加载多个js
//2. insertAfter
//3. displayAbbreviations 缩略词一览表
//4. stripeTable 表格奇偶行样式
//5. styleElementSiblings
//6. moveElement
//1. addLoadEvent //同时加载多个js
function addLoadEvent(func) {
var oldload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
//2. insertAfter (使用时替换newElement, targetElement)
function insertAfter (newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement, targetElement.nextSibling);
}
}
//3. displayAbbreviations 缩略词一览表
function displayAbbreviations() {
if(!document.getElementsByTagName || !document.createElement|| !document.createTextNode) return false;
var abbreviations = document.getElementsByTagName("abbr"); //调所有的abbr元素从而建表
if (abbreviations.length < 1) return false; //检查abbr是否存在
var defs = new Array(); //数组是用来储存内容的良好媒介,用来存储abbr元素的title的内容和文本
for (var i=0; i < abbreviations.length; i++) { //历遍abbr元素
var current_abbr = abbreviations[i];
if (current_abbr.childNodes.length <1) continue; //确保browser就算不理咧abbr也不会出问题
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]; //创建dtitle
var dtitle = document.createElement("dt");
var dtitle_text = document.createTextNode(key);
dtitle.appendChild(dtitle_text);
var ddesc = document.createElement("dd"); //创建dd
var ddesc_text = document.createTextNode(definition);
ddesc.appendChild(ddesc_text);
dlist.appendChild(dtitle); //追加到定义列表
dlist.appendChild(ddesc);
}
if (dlist.childNodes.length < 1) return false; //当dl元素没有节点时,退出
var header = document.createElement("h2"); //创建h2 设置标题
var header_text = document.createTextNode("Abbreviations");
header.appendChild(header_text);
document.body.appendChild(header);
document.body.appendChild(dlist); //追加标题和列表到body
}
addLoadEvent(displayAbbreviations);
// 4. stripeTable 表格奇偶行样式
function stripeTable() {
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) {
rows[j].style.backgroundColor = "#ffc";
odd = false;
} else {
odd = true;
}
}
}
}
addLoadEvent(stripeTable);
// 5. styleElementSiblings 给标签添加class内容以供css文档直接修改。setattribute也可以增加,但标签无法用在css文件
function styleElementSiblings(tag,theclass) {
if (!document.getElementsByTagName) return false;
var elems = document.getElementsByTagName(tag);
var elem;
for (var i=0; i<elems.length; i++) {
elem = getNextElement(elems[i].nextSibling);
addClass(elem,theclass);
}
}
addLoadEvent(function() {
styleElementSiblings("h1","intro"); //eg class=“intro”插入到h1中 以便修改h1的格式
})
// 6. moveElement
function moveElement(elementID, final_x, final_y, interval) { //final_x, final_y为元素的left和top的最终px
if (!document.getElementById) return false;
if (!document.getElementById(elementID)) return false;
var elem = document.getElementById(elementID);
var xpos = parseInt(elem.style.left); //把top和left的具体数值提取出来
var ypos = parseInt(elem.style.top);
if (xpos == final_x && ypos == final_y) { //当top和left的px到了实际位置 那么停止;如果没到就++
return true;
}
if (xpos < final_x) {
xpos++;
}
if (xpos > final_x) {
xpos--;
}
if (ypos < final_y) {
ypos++;
}
if (ypos > final_y) {
ypos--;
}
elem.style.left = xpos + "px";
elem.style.top = ypos + "px";
var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+interval+")";
movement = setTimeout(repeat, interval);
}
addLoadEvent(moveElement);