I haven't written it for a long time. I feel that HTML5 is still just a way of playing tickets today. I hope w3c standards can be introduced earlier. Do not let the compatibility and support of various browsers end up with JavaScript:
The Code is as follows:
// Initialization page
Function init (){
Var ary = JSONToArray (XMLReader ("node", "content. dibi "));
Var ptoc = document. getElementById ("p_toc ");
PageCount = ary. length;
For (k = 0; k <ary. length; k ++ ){
Obj = eval ('+ ary [k] + ')');
Ptoc. innerHTML + = ""
+ Obj. label + "";
}
Page = 1;
ChangeImage (page );
Var pageManager = document. getElementById ("p_page ");
PageManager. innerHTML = "Previous Page"
+ "Next page
";
Var ary2 = JSONToArray (XMLReader ("meta", "content. dibi "));
Var pmeta = document. getElementById ("p_meta ");
Var styStr ="
"For (l = 0; l <ary2.length; l ++ ){Obj2 = eval ('+ ary2 [l] + ')');StyStr + ="
"+ Obj2.name +" |
"+ Obj2.content +" |
";}Pmeta. innerHTML = styStr +"
";
}
// Parse the. dibi file.
Function XMLReader (key, fileName ){
Var parse = BrowserValidator ();
Parse. load (fileName );
Var json = "";
Try {
Var dom = parse.doc umentElement;
Var attrLength = 0;
For (I = 0; I <dom. getElementsByTagName (key). length; I ++ ){
AttrLength = dom. getElementsByTagName (key) [I]. attributes. length;
ObjMsg = ",{";
For (j = 0; j <attrLength; j ++ ){
ObjMsg + = "'" + dom. getElementsByTagName (key) [I]. attributes [j]. name
+ "':'" + Dom. getElementsByTagName (key) [I]. attributes [j]. value + "',";
}
ObjMsg = objMsg. substring (0, objMsg. length-1 );
Json + = objMsg + "}";
}
Json = json. substring (1 );
} Catch (e ){}
Return json;
}
// Determine the browser type. Supports IE and fireFox.
Function BrowserValidator (){
Var result;
If (! Window. DOMParser & window. ActiveXObject ){
Result = new ActiveXObject ("Microsoft. XMLDOM ");
Result. async = false;
}
Else if (document. implementation & document. implementation. createDocument ){
Result = document. implementation. createDocument ("", "", null );
Result. async = false;
}
Return result;
}
Var page = 1; // current page
Var pageCount; // the total number of pages.
// Click to change the page Image
Function changeImage (page1 ){
Page = page1;
Var pimg = document. getElementById ("p_img ");
Pimg. innerHTML = "";
}
// Previous and next pages
Function changePage (flag ){
If (flag = 0 & page> 1 ){
Page --;
}
If (flag = 1 & page <pageCount ){
Page ++;
}
ChangeImage (page );
}
// Convert JSON data into an array
Function JSONToArray (json ){
Return json. replace (new RegExp ("},", "g"), "} |"). split ("| ");
}
HTML:
The Code is as follows: