TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
9 x5 F: h* r S. J9 f$ q& q, hFront Template:3 y, d, v( P5 V- W$ F: a: L) ]
- <div id="front">9 n" D, x& N" d! j
2 k6 f/ X V6 C; q- <div class="headbar">{{Deck}}</div>) p: D! N+ w. J$ {
- <div id="word">
5 _! [& P# z) Y1 T% h$ w - {{单词}}
5 M% L4 D; ?$ f5 i6 r" y - <span id="rank"> {{ranking}} </span><span id='example_audios'></span>- e0 h% D: m v! \. F; `7 W
- </div>
, V; r6 c" M; E0 ^5 C - <div class="yongfa">
: _9 u4 K$ k. [0 t1 ^* e - {{用法}}
\, Q" M1 \! ~ - </div>
; L9 Y$ L& o5 v* O) b
q- V, O1 v. G4 l+ P) w- <div id="back"># Q1 R6 c8 D) o& n# T. a; Z
- <div class="headbar">有道词典 基本释义</div>
, T" ^, L1 Q( y: g# ?. @ - <div class="shiyi_youdao">" n0 ]9 q3 J. j, w7 G! |
- {{shiyi_youdao}}0 n0 e+ ]' y* p W& t1 `- a5 w
- </div>* d7 A4 m9 V3 f" R
- , M: N. x' |( T/ P2 Y. L' [
- <div class="headbar">LDOCE6</div>3 B, b5 w& i$ d1 d5 T9 O, \
- <div id="ldoce6">6 A9 b# b2 G) i* q2 X0 s8 A9 J) G
- {{LDOCE6}}; T. w6 I$ f5 H
- </div>& b1 z3 |, w& D$ ~0 T
- , g$ r7 A, f2 C x' S3 F8 w; L
- <script type="text/javascript"> V7 k% p* _) F4 _( S- Q9 G
- // format yonfa
8 O Y2 A8 K# [$ S9 o0 Z - [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {4 A o, m& R- W) x( Y
- div.innerHTML = div.innerHTML, z6 G& q: k& M
- .replace(/[1-9]+\)/g, function (symbol) {
- ~8 ]1 t( T+ l! L" G) g. \( Q3 Y - return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
$ Z! ?) Q* X _9 W, B - });! x l' m- K) V- y9 I5 w9 o( ^: R
- });/ r7 a# k8 T6 T, v, U/ @+ B6 k- @
- ; Q6 {6 a' H( y
- // play the Ammerican pronouciation
' Q6 |; [/ H3 v% {; a1 a; { - var amevoice = document.getElementsByClassName("amevoice");2 b3 e; z+ c* E, L
- var anki_modified_code = amevoice[0].innerHTML;
' u) X! G% W+ V, l - //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
1 g9 P7 r5 N) f/ Q$ }7 b4 \ - var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];
& o7 \' \1 g* m6 s2 o7 [ - var audio = new Audio(filename);' [4 N9 m3 C& p$ D& R! k& d
- audio.play();
, p1 w( s. A, |3 D% L+ T: I- S - 8 P7 ^, Z. {9 b( x; F
- // add audios of the examples5 ^8 O, e9 I' j1 ?
- var examples = document.getElementsByClassName("example");
) u% o" Z$ G+ M$ F5 o - var example_audios = "";/ P! R( _) _' ]' `* s [$ E5 \9 a
- for (var i = 0; i < examples.length; i++) {
: @8 Y8 X8 i- Y5 t& M+ D - var e = examples[i].innerHTML;8 q( E6 y* D+ w' T' ?$ S5 r
- var index = i + 1;
- Q+ q B! p* k: F - if (e.search('mp3]') == -1) {
; R1 i$ U; i9 h9 g( W0 F; r0 m- J - continue;
0 E* M% x, Y8 ^4 ? - }: m* x |$ W! q* |) |! @9 a
- example_audios += index + e.split('<img')[0];
5 V0 R( X* o# S6 v( V0 X - //if (i>10) alerta(e.split('<img')[0]);; C# c, U9 K) I# T6 A. z6 A
- }
5 C$ l8 f ^9 [ - var rank = document.getElementById("rank");) R8 x) t7 [% M
- rank.innerHTML += example_audios;
) ~5 S* q, X- e4 h, O1 J - 1 [: @$ k4 A+ r* x7 E5 W
- </script>
复制代码
3 {5 u e5 @+ V- D9 O) X# s1 z* L+ G- R, q+ m4 T% R
Styling:
# O8 m+ T! u6 S) r6 G% I% g- /*页眉页脚全局样式*/1 a3 Q1 V5 m+ Q7 j' e6 Z- h
- .headbar {) G: k% Y2 Z4 y
- color: #aaaaaa; /*字体颜色-白色*/
& |) o0 S- `3 ^5 x& R) [ - padding: 2px; /*四周留白-5px*/, ]! u- K* B. A- G* U& s4 t. N% `+ Q3 r
- text-align: center;" A$ o3 c( o: m7 K3 i6 C6 `
- font-size: 10px; /*字体大小-12px*/
( v1 b1 y& Q' V. z( A - background: #365899;! G, y% n- x, H! x6 T9 a% d
- }7 Z2 B) t# ^! L) L: N0 ]& ~
% s3 D2 A1 J! j, ~; |- T- R. c: Y- body {0 \# k2 x; T" G8 ?2 j( w# j
- background: #c7edcc;- }( I% E$ H* G) ^0 {( ~' \6 g1 X
- }
" P, x: I8 g: z - " G! K0 E) c4 a! m1 C+ @$ @' ~
- #word {
" h+ x/ A' K `* n - font-size: 36px;
4 H( ~7 o' ` I: T ^. k - font-weight: bold;
+ \+ M1 J! R/ r9 i: Q/ `! b9 B! q - padding: 5px 20px;
7 h( n& X4 w& ~0 p$ W C - }
- v/ h" Z2 E0 p2 i, ~( R - $ [ v3 n5 ?7 |# E P# o) l& }
- #rank, #example_audios {$ a* M/ N3 T; Q7 R( W. e1 L+ \
- font-size : 12px;
2 x! M( F+ x- P& d - }) F$ K( t4 X4 h0 p+ _
- 7 l: x m- w- W+ c* S6 u( F% d
- .yongfa {1 b" k8 c% ?/ m! e
- font-style: italic;
; U+ ]1 t0 K4 x5 M3 H - display: block;
3 c# i% y" `$ X$ g" v% m# r - color: blue;, V$ O6 C1 p- q2 ?- k8 H3 s
- padding: 5px 20px;6 b! d: x" H9 J( o' E
- font-size: 14px;
+ t. K- X+ A6 N8 v0 L. G, l0 J - line-height: 1.2;
6 e$ ~! z9 i* [ - }
6 ^/ ?7 G( A% F
- T1 x3 I+ Z/ i' t" C- .shiyi_youdao {
, t. a, h! y( |1 p4 M - font-style: normal;+ `' Z6 O3 P! G+ I# Y4 ?: l& C
- font-size: 18px;$ K) x5 Z, `" f/ W) G5 ]2 N/ a
- line-height: 1.2;, ]3 o5 m6 n2 x
- padding: 5px 20px;
, j, b! k; Z; \ - }. Q8 `, h) g C, Y9 h5 G
- ' P1 d! l4 R$ g! t; F7 D
- .hightlight {
* m2 a( N4 C- R, Q7 O - font-style: italic;1 ~* K5 i9 c7 y3 ]3 V% c
- font-weight: bold;
4 N' u/ _- Z; [' f - }2 i& h5 X7 t' b& b$ M' K; E
- ( L7 _" x, m& K
- /*/ \& K( _1 m8 e8 I9 o
- ._LDOCE6 {$ E- i4 w; `, g) p z- E
- height: 480px;
4 J* d6 g4 i; G2 E1 U - overflow-y: auto;# m/ E8 f+ Z2 @, o2 q
- font-size: 14px;
& Y9 x0 p( E5 [/ J" ] - padding: 0px 10px;
5 f1 T* ^( T( t - }6 S+ ~) F( q3 ~
- */
/ G6 V2 `* |: Z- w5 @! m) e
. F7 @) g: z* i( i. o3 G c, F- #ldoce6 {
& [+ a1 ~7 g$ n3 f, ? - overflow-y: auto;) m {* i1 V9 ]: O+ f
- font-size: 14px;1 \0 g% ] ^' |& E0 N
- padding-left: 10px;0 v! m* W6 v6 F1 T5 A$ H% F
- }
+ a$ Y# Z7 V5 K: A - J; s1 v, n9 P+ _# o
; [% X+ w8 X2 s3 Y% a9 ?- #back {+ Q$ w- a' w# L1 g4 G
- display: none;
4 W+ e4 q+ `* S, e" G4 E - }
9 j/ O. A5 z2 z4 t3 s - z8 f& c# A' g/ L
- /*4 x/ t' y1 p b3 x/ J
- .cixing { {0 k; H- O5 p
- display:inline-block;
9 e$ `$ P. R. a - text-align:right;
& u/ I5 M4 a. d. H1 ~" v - width:40px;
4 Q0 I" _' R1 w3 J4 i; j9 D: p8 w - }
' ]2 R$ g7 n' ^ - */
复制代码
7 X+ D; t0 x9 u* y" l3 I
- R; b2 B0 ?& H; q. `8 mBack Template:
) s' m9 M+ z+ ?% \" q6 z8 p- <!-- 背面区块 -->
1 Y1 _, X1 z% K6 w5 O - {{FrontSide}}
& N0 l3 @, h8 T4 n# z6 l. Z - <!-- 页眉区块 -->% E$ Q- W1 Z4 D% K
- <script type="text/javascript">$ w3 |; P! x" p- T. u* x' V8 ?: {
4 T; w {$ [) A# ~( p5 d- // format shiyi_youdao; v: V8 k T, F& t3 W$ Z
- var colorMap = {
0 g' ~0 ]' ?. b* a) G - 'n.': '#e3412f',
, ]$ h2 q0 \0 ?6 i3 ? f7 V! | - 'a.': '#f8b002',
( C5 F6 L) n( U9 L' p/ h7 r7 t - 'adj.': '#f8b002',
a' p( r) O' ]# a: O - 'ad.': '#684b9d',+ J: X* B1 i: w' G; r. n* z
- 'adv.': '#684b9d',$ { y& W4 _; ]7 E% A- X
- 'v.': '#539007',
1 `, c# S1 B) N# Y) f$ t9 U' | - 'vi.': '#539007',& L9 q5 i3 E; j- `
- 'vt.': '#539007',7 ~4 p) A1 t# n9 V$ h/ I, [) N
- 'prep.': '#04B7C9',$ B, t2 K( m1 f( O7 c ]
- 'conj.': '#04B7C9',
$ Y- M3 j5 p+ ?1 s2 E2 @% J% ~ - 'pron.': '#04B7C9',
/ W u6 I# f# l! [8 P - 'art.': '#04B7C9',
2 J3 T/ T1 Z7 o2 T0 S - 'num.': '#04B7C9',7 L$ M4 Z/ Q0 A9 g( \- A, o, m
- 'int.': '#04B7C9',
- B. p% z% e0 O - 'interj.': '#04B7C9',' Q, X9 w4 S% N+ K4 |
- 'modal.': '#04B7C9',
9 Z4 f; l. @$ ^" r6 ]7 p3 b - 'aux.': '#04B7C9',7 A. ]( x8 ^8 j2 @' [- r" @. n! `- b
- 'pl.': '#D111D3',6 `/ O( U" |# Y" \) v
- 'abbr.': '#D111D3',
$ Q) }0 ?# K# h; j - };% [( `( z7 R/ ^, L
- [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
) ~; A6 Q$ y& @* ^ - div.innerHTML = div.innerHTML2 a/ M7 E) c$ V3 G6 V( c
- .replace(/\b[a-z]+\./g, function (symbol) {* Y' q. t7 G+ D/ J* R/ m6 `
- if (colorMap[symbol]) {0 J" r7 k' g, r
- return '<span class="cixing"><a class="hightlight" style="color:'
5 L! o A8 N O6 p, ` - + colorMap[symbol] + ';" >' + symbol + '</a></span>';
' i& r( s7 @8 m$ \7 R$ o9 H H - } else {8 ^: G4 s/ Z( Z6 o! I4 S
- return symbol;
% W5 L' q9 ?# a3 W - }0 P- W& G9 d9 ~3 n" O
- });3 W- I1 b8 z6 q# n
- });
; q# F6 d% Z5 H4 G0 ^# {4 A* y' M
/ p5 z9 O. v8 M- var back_div = document.getElementById("back");
+ S' _: A* m! K- y. ]$ }* [ - back_div.style.display = "block";
2 i2 v& z7 Y1 z - , O% z( [4 D' j- W3 ~1 j/ D, Y7 q
- window.addEventListener("resize", update_ldoce6_height, false);/ }: h) P$ A# r& i+ |
- update_ldoce6_height();' Y4 @1 q' s/ U) |; ?. i! Z4 A
A2 \ p) F' B/ j/ j' q- function update_ldoce6_height() {! \& O2 n, T/ X; D/ J8 o2 `& O0 ?
- var ldoce6_div = document.getElementById("ldoce6");
* y2 F# A+ R% ~# X* q F - var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
* t0 V, g. n: b7 t3 q: f - var preferred_height = window_height - ldoce6_div.offsetTop - 20;
8 @! }. F5 c9 B - ldoce6_div.style.height = preferred_height + "px";
! W0 V* h8 Y* R, L& p% m - }
0 `8 @& g& m" S
7 @, u" r) q$ g" C' o- // test to show the file name
* `. j( e3 n* y, R - //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;2 m5 ], w6 J$ A0 [* Z# V
4 Q E {0 {' t1 {2 U- u- </script>5 T3 Z" f* A [ H
- <script src="_entry.js"></script>
复制代码 |
|