TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
* A$ T: P2 B8 V" i) u, MFront Template:3 p/ u6 z9 o& A: r
- <div id="front">
; F2 z; d1 ?2 H7 _' P
* z2 b) G; |" @. v% m- <div class="headbar">{{Deck}}</div>/ F8 p( _, H# O0 X- A. V
- <div id="word">
: s% }( Y& y& e3 n# f1 s( Q& P; G - {{单词}}: a: v# G* }) u6 p8 i) `, s
- <span id="rank"> {{ranking}} </span><span id='example_audios'></span>
; A5 `- f* q& B0 e( w+ A) \ - </div>; T3 s( e* K0 A5 v# }% Q) G- u
- <div class="yongfa">
: u. _6 V1 Z5 m2 s - {{用法}}
# J" \" J4 d/ U1 C - </div>
4 H0 e5 M, v# N) k- x& m+ X. E2 O+ I - * H3 ?& ]5 S3 f, b c4 C
- <div id="back"># H7 w5 E B' E4 w/ ?
- <div class="headbar">有道词典 基本释义</div>
% h3 r+ \7 `7 R1 A3 d% [8 I - <div class="shiyi_youdao">2 Q" T( @' }3 |) x, t, Z
- {{shiyi_youdao}}. a* k) L" f: K$ \+ e6 e
- </div>
1 a/ J' E- A* s8 `) X; c" ]9 ~/ | - 9 t1 d6 I4 B; N- e" B* a: }2 D
- <div class="headbar">LDOCE6</div>7 p) ?, T) [* s* Q6 l9 ]1 ^5 m& \. S
- <div id="ldoce6">
0 v9 H/ M! G3 o( `/ B - {{LDOCE6}}
# U, [. {/ m) S - </div>% K3 ^7 f2 F$ ?0 `
9 J0 `- c' u @- <script type="text/javascript">
" X8 w& p5 U- @; C - // format yonfa3 @/ _9 ]* U B. N6 E$ Y& z- O
- [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {: Y" G1 l# Z+ x* Z% O: Y$ y
- div.innerHTML = div.innerHTML
2 V+ ^7 O6 ]% Z* S5 Z6 C - .replace(/[1-9]+\)/g, function (symbol) {$ E7 J* w, r1 m9 l9 z
- return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';* T/ Z. C& ]: l# M. t
- });& z5 w: `" Q' l
- });7 b; f6 \, t6 X0 }; A( B) j0 |
& H8 K4 {3 W, x% k5 k- // play the Ammerican pronouciation
7 ^7 }3 g4 S+ w* |& E - var amevoice = document.getElementsByClassName("amevoice");
- f# H: v% j: ~! P; x - var anki_modified_code = amevoice[0].innerHTML;, @8 E7 @6 v/ P4 q, Q
- //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
: P: P" G4 o! R8 B3 g9 Q1 r - var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];
5 K+ S9 |' \ ?' m) N+ L - var audio = new Audio(filename);. f& c3 o1 r( q
- audio.play();
' Y V t( A9 Q- b! s& z - 1 a: E3 |1 H; B
- // add audios of the examples
- @! T/ l" s, m - var examples = document.getElementsByClassName("example");
/ J4 g- H0 m0 _, r5 K) s D - var example_audios = "";0 Q# s- M' d" Z8 A) w% Y# F# l
- for (var i = 0; i < examples.length; i++) {. }$ Z5 x/ ]0 F7 [
- var e = examples[i].innerHTML;7 u3 g; W0 `( \) _+ v' Y
- var index = i + 1;( V7 G3 W/ D1 A% @9 s
- if (e.search('mp3]') == -1) {0 } P( k4 j H, h: V4 U
- continue;. s6 q( T. O" H: k" K0 h
- }
6 n d9 g" j4 Y& j l( Z) @1 v( J - example_audios += index + e.split('<img')[0];
% s5 L4 X6 e& f' r3 t; ^9 t2 c - //if (i>10) alerta(e.split('<img')[0]);
. R; |: t) `( o8 d - }
+ F5 {. L8 y- C - var rank = document.getElementById("rank");
; z+ M* R1 C; ^! c/ b6 m - rank.innerHTML += example_audios;
k8 K5 g8 n. n# h0 S9 S7 |
8 q6 t* J) c- l" n- </script>
复制代码
' C2 B# x4 v. a j/ D7 e2 P, _5 Z" r. U9 g. ]6 a& q% f( r) i
Styling:: [) y# d# I& s, z" N% M1 `
- /*页眉页脚全局样式*/) X1 [- s& z$ ~' @2 X5 g2 x \
- .headbar {
! J8 H/ h/ R0 B - color: #aaaaaa; /*字体颜色-白色*/
8 J4 U7 Z; p4 h" p- v - padding: 2px; /*四周留白-5px*/% E0 Y3 C5 B. K$ M2 Z( O0 ?
- text-align: center;# L+ f# M |% N) |' [
- font-size: 10px; /*字体大小-12px*/
6 K- y$ `9 T3 {7 ~4 m5 f; J - background: #365899;
$ m: d& H5 q0 O" G. ^ - }* ]3 h$ d P+ X: j( z$ H
, f, y( ]. y* M, v4 b+ [- body {4 G7 |$ _0 ]+ r" x5 \% M/ v1 c7 i
- background: #c7edcc;: Z) I4 h- t1 W: N; T6 G
- }) v( t. W+ w! c* _
- - p s4 {( c) k
- #word {: R8 |' i$ R/ T" Y# g4 u r* h
- font-size: 36px;' C6 l4 b* a6 _ p% j
- font-weight: bold;
2 c, c( H7 y/ y; k0 z3 l - padding: 5px 20px;
) | s9 U: Q( w8 z4 |* q5 q/ O - }
7 R+ Z4 L) y: K" P8 t/ T" \1 C8 g
4 a I, Y$ S p$ i- #rank, #example_audios {# f! m( i* z* C; w" ^ \
- font-size : 12px;
' h; s, s8 W j% _ - }4 o4 H% w% y9 X. @/ S7 k
- 5 G3 `: g9 u/ i" D) h1 \5 q0 u
- .yongfa {& b; n5 g. [2 }! L& ?
- font-style: italic;0 G! R$ Z. e0 {6 S9 ?. ?1 B8 X
- display: block; O( F1 m1 ]% j
- color: blue;
1 z! t, Q) y1 p5 E( d - padding: 5px 20px;
/ e5 q' r4 s ~8 K+ L0 N' X/ W+ i- W - font-size: 14px;" a4 U) n0 z7 o; c
- line-height: 1.2;
* n% w! a' Y4 K7 F4 a u. J - }
) ^1 t" Y* A+ R* t3 T7 Y% p5 y
, ?: {( N2 F! R( p6 O5 z- .shiyi_youdao {& Z( I; t8 S& n6 Z6 S
- font-style: normal;+ A- h1 p# Y) r9 |7 }3 _
- font-size: 18px;
8 E7 W) ~; U) _% s: e - line-height: 1.2;
$ [, }8 J1 `3 W7 H) E9 J' w4 G# Z; E - padding: 5px 20px;# a3 j) Z1 ~7 C
- }
5 Z: z/ _+ I/ J5 R. N- `+ W - / \& }% r& }( K6 ]" ?
- .hightlight {6 ^3 f# b% y+ u4 |
- font-style: italic;
* T, W+ G- R0 r" K - font-weight: bold;- X- t- D. V' ^6 X$ n
- }. g) h' i+ m0 I2 z/ @- \
- ' q [% F U' g% i" ]
- /*" d/ i1 v- ?& U0 _$ ~3 A% E f
- ._LDOCE6 {5 w" v* m2 c- o r/ W4 H( Q
- height: 480px;5 G$ y( a/ S4 f" N6 S: }" n+ x
- overflow-y: auto;" h, L$ R# x" d' v7 F& s
- font-size: 14px;, h( g2 u) p& O3 [! z2 y
- padding: 0px 10px;, R9 c ?4 `2 L
- }
8 S% C( y, S9 A1 a7 Q - */
- u5 _% ~- I& a D v [, I j - " G/ m- U% f$ g) ]& M5 C
- #ldoce6 {: D) t/ R7 Y- x; w/ T' r) |% f1 n- b
- overflow-y: auto;
: n8 d5 F, M( R - font-size: 14px;
) j Z( C% h( _' b3 V+ I - padding-left: 10px;
U3 f5 J- M% G8 l, I# z. z- G - }
1 O( ]7 l4 [6 h# V! H) |5 f) L
) g2 j" F. ^8 C6 s6 |4 j- 7 w* A; N* K0 R* }( U2 U
- #back {
+ V$ I: X8 S; H - display: none;% K9 ?: k( ]6 i$ [
- }
. j9 _7 L _" i% s
* t: D5 a0 t, }- /*
4 C- o1 b7 i0 D) k6 Y - .cixing {, @) `* W. q( z8 A
- display:inline-block;* {" e( Q: ]; ~* D, a
- text-align:right;" T5 d2 d: O1 p! a: B
- width:40px;- k! A$ {/ L2 Y) p
- }" ^2 J7 j, P2 _$ C- R4 u* ?
- */
复制代码 % h+ X6 s/ G/ ], A: |9 _! r
& c# {9 ~! y1 b" bBack Template:1 C0 q( n( k$ b! b' P' e& Z
- <!-- 背面区块 -->$ i$ I; {/ _/ {! ]* ^4 }. i
- {{FrontSide}}: }- x" Y' Y+ x0 A8 A, V* A, y
- <!-- 页眉区块 -->
, Q5 R/ w; S. l/ A) ` - <script type="text/javascript">
! O. Q! {1 ~6 ~" V: h. p - * P% s0 J' n( `( r8 R l
- // format shiyi_youdao
W1 }6 C5 f. D9 }- | - var colorMap = {% m+ `5 J' M0 g4 B
- 'n.': '#e3412f',
" T! y+ m ~9 g' n, B5 T - 'a.': '#f8b002',8 u+ B6 j+ E- R# S% f2 _/ }
- 'adj.': '#f8b002',/ C/ o& t4 \0 Y h: ~% N" a
- 'ad.': '#684b9d',( [9 H! Z- a4 ~
- 'adv.': '#684b9d', @% p( s. U2 s+ G
- 'v.': '#539007',
1 p1 ^+ ]' h! f! _, P - 'vi.': '#539007',
9 j( i9 m2 F+ P- | - 'vt.': '#539007', k" B; t% H- y U. J' M
- 'prep.': '#04B7C9',
$ i/ S/ O. g) f - 'conj.': '#04B7C9',
: ^& h" j3 x7 a; C! Z - 'pron.': '#04B7C9',$ |9 L% x4 d' C/ j
- 'art.': '#04B7C9',( P- o2 {$ K1 |. O% ~
- 'num.': '#04B7C9',3 K! B7 y0 a% b1 V* I& [
- 'int.': '#04B7C9',
/ G7 O6 y8 s1 n* Q: t2 q3 c - 'interj.': '#04B7C9',
5 f5 f2 t/ I! P! v1 j+ D5 k - 'modal.': '#04B7C9',
' e: a8 h0 n8 Q w$ e5 \# c - 'aux.': '#04B7C9',# d- M0 ^' P9 z l8 @/ k
- 'pl.': '#D111D3',
, Y& a: t7 G9 h0 H6 D) c& ^' i - 'abbr.': '#D111D3',2 Q( `/ [ {1 `3 X) n+ g7 y
- };; K* T& o: m9 E1 r' c( @0 B$ Q
- [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
) S. A" b d& R- i - div.innerHTML = div.innerHTML
q+ [% R" d- `& ^; a7 a8 X - .replace(/\b[a-z]+\./g, function (symbol) {5 r& k* I! B* Y& B
- if (colorMap[symbol]) {1 g- J, M/ @4 i# G" Y7 P: H
- return '<span class="cixing"><a class="hightlight" style="color:'
( G/ O! E5 }' c8 p - + colorMap[symbol] + ';" >' + symbol + '</a></span>';/ J/ p3 ]/ ^2 b! Z, O9 M
- } else {1 a$ V$ g/ M& y8 C$ B% h. O
- return symbol;
, Q. g4 }7 t! N$ M) c - }
& U- Y* D" _) V1 x) E - });
) }. d3 K# _' A9 B" l3 H& N - });- h+ P! Z! I, D8 |
- ( w3 H' M8 O1 _( S
- var back_div = document.getElementById("back");9 W0 C: E& A* B: d5 u) K3 H
- back_div.style.display = "block";
+ A/ q& t4 P7 E! Y' p
H5 b- R( q% t" Y) M$ p- window.addEventListener("resize", update_ldoce6_height, false);" ~! l9 Z9 @$ U8 L
- update_ldoce6_height();
# w$ m7 _3 U/ p
& Y1 L0 R1 e: x* C: v8 x1 A- function update_ldoce6_height() {
; r/ g! u2 e& S - var ldoce6_div = document.getElementById("ldoce6");
! w1 w4 x& X) ] - var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
1 P+ M$ ~& I h; |7 k7 d6 ^ - var preferred_height = window_height - ldoce6_div.offsetTop - 20;1 w4 z- l9 V+ K. d; B, C4 m# g
- ldoce6_div.style.height = preferred_height + "px";
$ w, B' K# X) M( h& P - }
+ \9 a; o! I p! v4 @- ^+ @
$ m% j0 h7 |$ z9 j) t- // test to show the file name
% V6 ?" O1 G$ K6 L6 ]" ]2 L* `( T - //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;
* V1 d9 o9 e$ k! c1 a! K! @: ] - 0 O1 R+ I- ]' _6 g$ I; r
- </script>, X, d, c/ i: D6 t. F* m1 L/ f$ s
- <script src="_entry.js"></script>
复制代码 |
|