|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
$ q; t% D \0 W
* r9 W, z3 W2 m/ ?) D% x- P, h
' l) H/ j6 A v/ |[mw_shl_code=html,true]
" s( ?. l/ N- z+ ~0 A& V6 ]. [1 {0 L: d+ x! _
<!DOCTYPE html>4 W/ d* z* C9 d: ^. T2 t, y
<html>
* W2 S& W9 K. r8 J( I<header>
3 @8 e) r/ q2 V' z <style>
: p' ?2 g/ o2 F2 s8 ?8 g table,: l# P3 d! T6 L* b
tr,3 w3 Z7 n2 w$ u" [
th,
0 ?/ O2 [# |) K td {& \ z& N) [. j" ~' I+ y8 O" M
border: 2px solid rgb(20, 59, 230);
7 P2 [$ i$ H! u+ ~, n: @; w; v1 } border-collapse: collapse;
% s" f) f4 N2 V: J text-align: center;$ S6 G! [& y# P' e( ?8 A9 Q
}$ D6 k$ R, K) ^% s# @% K
& m. y/ y0 d" O5 |9 {; |
th,
; }. p' e$ Y5 z9 J( r td {) [, c# P% c4 _0 A
padding: 5px;
% r1 C: s0 z5 P% V$ O/ K7 u7 Z$ k }: V$ `0 k+ ]' f; n
</style>7 F' S0 @3 z9 n% a i
</header>
6 @5 L+ O. O# Y7 {2 t1 R
) d6 z6 C b, a& n6 c, y0 m2 U0 r<body>
% q6 X! |8 B# \( O( J. B <h1>xml http request object</h1>
! ^6 V' ~1 I" T, t3 r5 A- W <button type="button">Display Music</button>
- z' a/ s1 P& B <button type="button">Previous</button>
2 s9 a2 r! C7 i2 E2 h <button type="button">Next</button>
* ~) N8 f% ]% D }0 r( R# _1 Q <button type="button">get my music list</button>
" @4 {2 x- P8 i) k' g <table id="showMUSIC"></table>& S& M" j; n) C
<table id="demo"></table>
; l9 F. }! J9 o% f; p1 w8 a( {7 |! ~ <script>
$ j, | Y2 Z8 W, q' x/ i; g3 l5 H! P# P. G
var x, xmlhttp, xmlDoc;
* R- k# u) _" a* ?; B* y% Q# K
0 U% {# W+ G* |7 k& Q5 `% W5 I xmlhttp = new XMLHttpRequest();
# W7 J+ p X4 m; } xmlhttp.open("GET", "/files/music_list.xml", false);3 p! B! k+ ^* {: d+ G
xmlhttp.send();& g2 G7 t$ ]$ L( u- Z
+ r, T$ V3 F l8 t" f8 ^; P, f
xmlDoc = xmlhttp.responseXML; " N( ]; B. q3 N' C
var table = "<tr> <th>Owner</th> <th>User</th></tr>"
) n" i2 x; d) a& P3 Z var content = document.getElementById('demo');
; M' M1 u: F! E$ m& m5 h6 Q% }# N var x = xmlDoc.getElementsByTagName('TRACK');! E0 z. q+ g. \1 z6 | e+ I" g
for (i = 0; i <x.length; i++) {
/ C- R6 f9 s8 v) v0 r0 e4 i- A3 Y! n table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
5 h8 _& k# S8 {5 E table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
5 F; v; Z- g8 B9 A* I0 U table += "</td><td>";& O' U0 q2 o( ]3 e7 m
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;, |; a* T* i9 r
table += "</td></tr>";
- H8 U( r( Q* p}
5 X. p2 ^. r5 m9 s1 v
, u0 \) M8 V2 `5 sdocument.getElementById("demo").innerHTML = table;' O' H0 n$ O8 ?* R1 @
var i = 0;: k! v# q# k: d# f
function next() {
1 j! s1 w7 ^ J5 } // 显示下一首歌曲,除非已到达最后一首
) i6 z7 D3 P4 A; I1 \- i# V1 s if (i < x.length - 1) {
2 x7 G3 h+ K7 w! S" y) b i++;. U! ], v, V1 _4 z; Z
displayMUSIC(i);$ {8 ~; S4 `* b8 {4 O3 t
}
- ?3 ^$ R; F! T }1 M6 Y. ~. N+ ?8 W2 Z
& u: ]! n! S- g$ s function previous() {. }% K% t( d: J i2 T" x
// 显示上一首歌曲,除非已到达第一首" _8 w4 O5 S6 D, P! N. Y
if (i > 0) {
- o/ G7 w2 p' Y' M i--;
- C" r1 Z9 g2 [6 Y1 {4 o5 }$ A displayMUSIC(i);& M- o% a6 N3 \1 M& X5 K `
}
+ K' A4 n9 i" z }0 o% ~9 O6 z E4 a! ^' s/ O
( V$ M/ R0 |6 e2 F) @: p function displayMUSIC(i) {$ D0 S& u. U5 l$ t
document.getElementById("showMUSIC").innerHTML = X7 d1 C* P E! n3 i+ {
"<ul>" +
, a4 B8 g7 \1 ^, v! f6 W "<li>曲目:" +" m$ [% b. l9 \- t" z/ y: D' ~- c
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
. n# ]0 \* L! v y "<li>艺术家:" +! a) g4 L% t0 N$ {) \
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +7 F3 r2 [- S5 P' b3 [
"<li>专辑:" +
( p9 {$ M. j- S& p8 j# p x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +3 a9 P2 k6 e! ~
"<li>国家:" + `! R. G5 V3 x9 n Z R1 E& }
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
! ^* r6 z+ P0 H6 f3 o, a "<li>公司:" +/ T, E' Y, b+ u! D# C( {
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
3 W7 `9 a2 G& I1 b "<li>年份:" +
. D. G+ A& z Q( {$ | x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +3 H9 b) z0 C! c* L4 D1 f9 _. t
"</ul>";
' l$ G% `/ j9 Q5 P }
- N1 I% n F: k* d* q9 ]) c( j' u4 \1 K) E9 j8 j
function loadDoc() {
- E) G+ E( n6 M/ c
% {! g/ ?0 ]# b/ k0 A document.getElementById("demo").innerHTML = table;
: @9 c B. {$ a% Z$ l0 E1 [) U2 h' y }' B+ }$ N3 f7 _, V( t' S' j* B: \3 ^
6 [% n0 J( g# U) n0 { </script>/ o' ~" G( @9 S3 _! w) @
8 ?4 u( G- Z" H) t
2 c! [3 J& C4 N1 M8 O</body>
( N2 x% W) ^0 }" |. V0 Y* ~: R" N8 D8 @. E6 j1 [
</html>/ s- v- R7 R% ^- O$ Y
$ `2 ~; {& u7 L8 ~. N
' a2 r/ p% r! {$ |; c[/mw_shl_code]" v2 W. k. F$ O+ _
$ G2 B! u2 G7 m, X& A K
% L" J7 ^+ o) s6 N8 k8 u
% m# y$ ^! ]# M) r: D6 KXML文件
: L3 a9 W9 ?. B7 e) ^* G
* T" ~" b' L) `) ][mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>+ g) H0 i7 l- W% Y
<CATALOG>' @) j7 a# ~+ X( J
<TRACK>& G4 }7 w4 n. T z9 A' b: @- t
<TITLE>再见</TITLE># e# r* X3 C% V9 K4 q
<ARTIST>邓紫棋</ARTIST>
" A) w% j' z" J4 E$ N/ w<ALBUM>新的心跳</ALBUM>
2 D# A/ \; j& s+ V<COUNTRY>中国</COUNTRY>
' [6 R3 h5 b+ \. m m2 {<COMPANY>邓紫棋工作室</COMPANY>
. D8 E) ^, _6 |2 b<YEAR>2016</YEAR>
: ~/ T% O3 ?. k, @7 Q% z$ [/ z</TRACK>+ B5 |2 @ l! ?/ A6 V
, f/ D' S; t0 G
<TRACK>
) W$ T8 O& o# i0 v<TITLE>All I Ask</TITLE>
! N y2 _% @% c5 _/ b" C<ARTIST>Adele</ARTIST>
* o7 i3 `0 l4 E7 E4 l: L) X<ALBUM>25</ALBUM>
% F' V) y- k+ P7 N, k" _<COUNTRY>英国</COUNTRY>
' h( X/ [3 ~! q, k' x<COMPANY>XL Recordings</COMPANY>- M4 @" D6 L, U: w9 I8 w
<YEAR>2015</YEAR>4 R9 |# p) i, ], q
</TRACK>
3 a& |3 p! S* Z# Y5 B& y
B; Y+ x1 X% u+ Q% Q& M$ `0 L<TRACK>
# [/ \7 i$ `! I$ S" s$ t& d<TITLE>之乎者也</TITLE>
$ P& Z0 F2 O+ l7 L8 A8 o<ARTIST>罗大佑</ARTIST>4 S2 p r6 }- n, R: [" I
<ALBUM>青春舞曲</ALBUM>
. Y! t, b+ N( X2 \. W' u<COUNTRY>中国</COUNTRY>( x7 v, R4 h4 v# E1 Q( F/ L, m) {
<COMPANY>滚石唱片</COMPANY>
5 v/ ~1 g; R4 x<YEAR>1982</YEAR>9 p- ^8 s' _( p* V
</TRACK>
+ ~* \) e2 ]# h4 G" x( M3 x3 B+ F6 {) u4 U! h
<TRACK>- p% S6 _. ^0 ?6 `
<TITLE>Never Be Alone</TITLE>5 u; c, J2 n+ Y5 Q
<ARTIST>Shawn Mendes</ARTIST># v& J/ d/ _% Z0 k2 J
<ALBUM>Handwritten</ALBUM>
" }& T$ U4 l3 A \6 M; X0 L1 x<COUNTRY>加拿大</COUNTRY>
: _! Q; I4 d7 z+ B" M% T<COMPANY>环球唱片</COMPANY>
9 X% e. @( l2 q) i2 B! c) A<YEAR>2015</YEAR>
+ s' j: i8 E8 D0 p- T R7 w+ J</TRACK>
8 b9 G" N! g2 U, H2 l. G9 K, }+ l( U) I
( E8 M- o( W" Q3 I8 b<TRACK>% \9 S3 h4 o- i1 k* [+ V1 }
<TITLE>慢慢</TITLE>
+ b$ l4 R& Y: {( G' Q; q<ARTIST>张学友</ARTIST>2 n/ {- |$ ?% M' W% f# |! z
<ALBUM>忘记你我做不到</ALBUM>% f6 m) R) e3 O) C4 u3 j/ P5 {
<COUNTRY>中国</COUNTRY>2 C& ^4 @4 e8 I4 K$ q
<COMPANY>环球唱片</COMPANY>8 i1 ]" _5 Z5 v2 n4 K1 l# ^
<YEAR>1996</YEAR>
) y/ k4 p: S" p7 N</TRACK>" r# c. I+ `. V& t
( ]* r+ j ]/ @6 O7 u8 G- e$ n; U
<TRACK>
- ?. O# a- y6 q! V6 a1 m<TITLE>Complicated</TITLE>
z+ v$ @- k2 n+ h2 C<ARTIST>Avril Lavigne</ARTIST>
% Z5 M. r4 k6 D; A<ALBUM>Let Go</ALBUM>
9 I% L* T# q1 s. f1 r" B8 L<COUNTRY>加拿大</COUNTRY>+ I( R) p k) W$ A6 W ]" j: ?+ v; {
<COMPANY>索尼音乐</COMPANY>& `1 B# b4 [0 W+ v
<YEAR>2002</YEAR>4 l/ T0 @3 p8 Y& C5 p/ q* d+ W
</TRACK>$ {' g3 b7 N/ F/ ?, q- W d. O
( D/ R! F: R) Y L( }2 h" |<TRACK>
/ B# ~' {4 P @* T& r6 I<TITLE>三生三世</TITLE>$ x% y7 [# L# _' F' W. ?$ {# x% ?" |
<ARTIST>张杰</ARTIST>
8 }; B" V$ Y% V2 P8 T3 S$ ?<ALBUM>三生三世十里桃花</ALBUM>
! p8 ]. p8 j l4 M" p$ l<COUNTRY>中国</COUNTRY>
0 r, a4 Y* J( A4 [<COMPANY>仁溪音乐</COMPANY>
3 a/ r o9 C& [, |/ E2 ^<YEAR>2018</YEAR>
; k& L3 j* x/ N7 ^</TRACK>
. h8 X/ n) F7 q( o0 ?, d2 ^5 e0 T5 i; h8 R
<TRACK>
" T8 f& [! X+ M: F7 ?<TITLE>Five Hundred Miles</TITLE>
+ b9 o3 k+ X3 K( r<ARTIST>Justin Timberlake</ARTIST>5 P. X' A m1 Z r! [
<ALBUM>Inside Llewyn Davis</ALBUM>) m% [1 M" T# _9 w5 K! o/ e
<COUNTRY>美国</COUNTRY>& J3 D0 f; \4 z. e9 d- c, }7 c
<COMPANY>华纳唱片</COMPANY>" P" {" {6 y9 s: g4 l
<YEAR>2013</YEAR>
0 F# H) R7 Q5 W. N, g</TRACK>* L+ F: ~" l0 r$ |. K) n! C9 Z1 a
! @ Y7 ?1 \ n& |! b<TRACK>
( y! n! p* G& z ]0 z<TITLE>演员</TITLE>
8 h5 Q0 ]' S+ f/ ]2 [<ARTIST>薛之谦</ARTIST>5 V! P7 Z9 K# ~; _1 L
<ALBUM>绅士</ALBUM>: w) N& ^* T) y$ X
<COUNTRY>中国</COUNTRY>
, o% _0 B9 w# p& o3 R<COMPANY>海蝶音乐</COMPANY># b: ^0 O! I9 T7 [) a- g( P
<YEAR>2016</YEAR>
: F# }) i4 h( V' _5 V</TRACK>
8 ]) w2 @3 X0 L
) z2 Q6 s! r4 f' O; b8 H9 J<TRACK>
/ w0 y' T+ o( J<TITLE>Numb</TITLE> ?. b! H* Z0 e5 g
<ARTIST>Linkin Park</ARTIST>
, R" a# j5 n% J% f7 M<ALBUM>Meteora</ALBUM>
, c" _" ?, \+ k6 s) F1 y2 K0 M, V<COUNTRY>美国</COUNTRY>
1 O# `4 v* Z" ~ y8 N<COMPANY>华纳唱片</COMPANY>5 U/ r; d& D' a# R6 F3 a8 p
<YEAR>2003</YEAR>( ?; F$ A1 Z' p% V6 {
</TRACK>5 v1 k8 O. ?$ k g
# A5 S4 _! T1 m4 d9 O<TRACK>! T* E! d) D) Z/ p% `
<TITLE>给未来的自己</TITLE>9 i. v! p! L0 ]
<ARTIST>梁静茹</ARTIST>6 U0 G% z( }2 o: V
<ALBUM>崇拜</ALBUM>3 C4 B, f% d' r
<COUNTRY>马来西亚</COUNTRY>
9 \* m' m T( z; u5 W<COMPANY>相信音乐</COMPANY>
' v# o. X `9 `6 n/ Z8 r- P<YEAR>2007</YEAR>, Y+ b& j! Y% O4 [3 w, m# e
</TRACK>
& { f/ u/ }9 X M( l4 x: Z# d- r* ^- O4 X
<TRACK>
+ j0 o4 ^5 I9 _3 h( {; [, q: o<TITLE>The Monster</TITLE>0 V2 x& n) v5 I% ~ z. H) C) R
<ARTIST>Rihanna</ARTIST>
3 r' F$ Y D, A2 T8 {+ r9 c; _4 z! @<ALBUM>The Marshall Mathers LP2</ALBUM>2 l7 L& I+ M6 B% j" ?6 E7 B8 r9 {
<COUNTRY>巴巴多斯</COUNTRY>. P$ S9 w8 x! b2 P: [% Z
<COMPANY>环球唱片</COMPANY>
! o6 {) f% N, m3 u; B: E* w% N<YEAR>2013</YEAR>1 J2 Q% [8 Z: I, ~
</TRACK>" K5 k* G' z9 i. R
2 z$ ^1 G2 W7 r3 `' q
<TRACK>
1 \1 [! y! C9 k8 u5 k9 C<TITLE>我终于失去了你</TITLE>& u- f+ J+ z5 K
<ARTIST>赵传</ARTIST>! A: v* m" L* o% q0 m& j( `
<ALBUM>我终于失去了你</ALBUM>
+ j. z7 e' n9 ^4 d<COUNTRY>中国</COUNTRY>
6 w2 i$ @6 z6 S( g Z& }/ |<COMPANY>滚石唱片</COMPANY>" u( ^4 d2 Z8 i% E1 h
<YEAR>1989</YEAR>
. P0 R) g0 q# P& X</TRACK>
+ [( G, r: [+ O+ k R' N
% D+ V& [8 ~4 `<TRACK>8 h" m! h1 B- ^1 j5 _+ A
<TITLE>Main Titles</TITLE>! L* U# r- G7 J5 y6 ]3 j; t
<ARTIST>Ramin Djawadi</ARTIST>
3 H2 Y& i( f( Z! K<ALBUM>Game of Thrones</ALBUM>% U" ]# S* P( j$ C9 B: `
<COUNTRY>德国</COUNTRY>
0 i/ t* z; `/ Q* ^. z<COMPANY>索尼音乐</COMPANY>/ U) K& W2 m% F2 m
<YEAR>2011</YEAR>1 W8 `8 n9 W' {4 ^/ c$ c( w
</TRACK>
# m- i7 |: m: @0 P5 t6 {5 g: R3 h, |! N3 y9 m/ U: O8 _
<TRACK>
I A) Q* k B) ~. ]2 p<TITLE>传奇</TITLE>" v7 ^+ g7 T- m1 g! E! S* z$ D
<ARTIST>李健</ARTIST>
; M2 D4 e( W) r6 ?5 p% N: n3 n& a<ALBUM>似水流年</ALBUM>3 m" \. X" M. r6 H2 E7 v& j6 a
<COUNTRY>中国</COUNTRY>
: k& N1 x( [9 K# k4 u5 p<COMPANY>北京完美坚持文化艺术工作室</COMPANY>' E, d6 D4 v5 r, q
<YEAR>2003</YEAR>8 a. I% r: F7 Q- g, ^) J
</TRACK>
& {* f4 q/ \0 c1 L
) `9 z4 h. F2 ~1 |8 Z<TRACK>
2 W# r" }- G2 ?; ^7 q<TITLE>完美生活</TITLE>, a2 Z x2 ?# W1 d
<ARTIST>许巍</ARTIST>
0 X: j! c5 j2 Z2 Z. ^<ALBUM>时光漫步</ALBUM>
1 G0 G; ]; {* H7 l7 }3 E4 ~<COUNTRY>中国</COUNTRY>
3 m. W0 \ S: s$ G1 n4 T<COMPANY>金牌大风</COMPANY>
: N& ^5 P* V' @5 Q" d1 y<YEAR>2002</YEAR>! h) O! E' w; o0 A9 g5 t$ j& k/ J
</TRACK>
7 v. a) j& I5 B</CATALOG>[/mw_shl_code]! T0 ^0 K$ ~9 C' l9 E+ ]
|
|