TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
9 @: M- o9 H# I. x- _: V. e5 aFront Template:9 K. E# q8 y5 ]2 f+ h7 | M$ d
- <div id="front">
. v6 u8 t& S7 s$ T* G! z$ \! j& } - : c) I* R% v' h
- <div class="headbar">{{Deck}}</div>6 N0 z" c4 H, s/ E8 {
- <div id="word">7 O% h1 }! j/ A/ }4 ?
- {{单词}}
0 Y( K0 B1 z- I6 t- q& V - <span id="rank"> {{ranking}} </span><span id='example_audios'></span>( i, X* i& r$ V @# V5 ~" }7 i
- </div>" ]: k5 `( h+ m6 `
- <div class="yongfa">
+ j4 I, Y- Z/ l/ z. `: h- O0 [ - {{用法}}4 o, y: L: \/ _8 n7 y# Q: h6 c9 R
- </div>
" v8 u- B0 q" v/ m8 p! D0 ]
1 }2 U/ p0 ]& M4 A* {8 @- <div id="back"> C) v9 W/ E! ~! f
- <div class="headbar">有道词典 基本释义</div>- S2 k- Q" |3 B7 o
- <div class="shiyi_youdao">
4 b- m4 a$ S' L7 c3 j - {{shiyi_youdao}}
6 U: F/ ^; D- o, G( V% q - </div>
c% Q/ c. \9 V7 p3 ~( t - * v7 m5 Z' L* O0 [, R
- <div class="headbar">LDOCE6</div>
) F3 h5 {! [$ ]* m5 h+ w - <div id="ldoce6">; ?1 W. u. v6 I+ F- h- Z
- {{LDOCE6}}
6 l8 T( ]0 k$ j" `5 Y: j( ?$ i% \. g' K - </div>
' G) I# ?. I8 C8 m0 e5 z+ h* A6 v - 6 X/ w1 Q) j& q8 p# H
- <script type="text/javascript">% x2 O; M% ^. a/ U: F3 c: L
- // format yonfa- T& t& ^/ w t7 I( z4 E9 S
- [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {/ ~- I/ J2 k! a. J" T ? o( ?
- div.innerHTML = div.innerHTML7 ]( x5 O5 f+ l* t# P, D
- .replace(/[1-9]+\)/g, function (symbol) {& V3 E+ r. m2 _
- return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
% T- y5 l* m& @3 m* k - });
$ s5 Y7 T/ o5 P0 g* ^2 s* {9 l - });
" v; U% c6 {6 r- C% @ - 0 E# {$ R: M7 p& `( m! o
- // play the Ammerican pronouciation
- j/ y+ K! ^( b+ D6 Z$ z3 V4 D4 \ - var amevoice = document.getElementsByClassName("amevoice");2 ?; _" M4 w& W) r8 d2 n/ U G
- var anki_modified_code = amevoice[0].innerHTML;4 M$ V0 S8 o. E, n. n0 z
- //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
+ J& X: T1 Z) A/ O( ~5 U" G4 D* m - var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];
' b+ J, F1 t- f S! F - var audio = new Audio(filename);) d0 `' u t Y3 w- W
- audio.play();
% A2 r" d5 V& ^/ i* ~, G8 k - # V% @9 O; O, g. x4 Y1 _! B
- // add audios of the examples! a! ?: A% C7 {) u5 r
- var examples = document.getElementsByClassName("example");
- G+ I9 W0 p( u+ m5 ~ - var example_audios = "";
( }6 H+ d- z. `& K1 J! n6 W3 Z( e - for (var i = 0; i < examples.length; i++) {
% S0 }/ f! h0 W - var e = examples[i].innerHTML;
: d2 \. T' d2 u) u( z - var index = i + 1;8 E: I1 W# m& N7 S
- if (e.search('mp3]') == -1) {( V- _1 R% ]' X% _
- continue;' T9 p! Q& F& O& g0 D
- }
* i0 I4 H! W5 D; g0 e - example_audios += index + e.split('<img')[0];* X! r0 U# q$ g- U3 V# I
- //if (i>10) alerta(e.split('<img')[0]);
, C( I$ t5 ~! } - }
4 U, p# c7 T: i/ Q - var rank = document.getElementById("rank");. B* J% q6 c+ z8 V8 k
- rank.innerHTML += example_audios;
4 O+ t, M6 g1 {- R; b. ?
( t0 R7 H8 j0 c1 q L9 z# L" [( e- </script>
复制代码 : x* e; s y% d! [$ I
h8 l! S7 n& j r. n9 T3 p1 z
Styling:6 u" S) G% ^4 O
- /*页眉页脚全局样式*/
7 E; `3 o. Y; t( Z* | - .headbar {
6 ^( k* f* X+ h - color: #aaaaaa; /*字体颜色-白色*/3 D' B% h# H, x3 U( K
- padding: 2px; /*四周留白-5px*/
6 a. Q- w& o1 L5 Z. e - text-align: center;
) B* d: f+ C( x - font-size: 10px; /*字体大小-12px*/3 U9 L$ L2 J1 N2 d( {, G) B3 u
- background: #365899;
7 X4 n/ T$ \0 N! s7 z/ m7 h- A - }9 x9 h9 s4 J8 m; V0 j
( J4 y3 N0 Z1 |# b- body {
+ l* Z( c/ y4 D/ N/ }7 T - background: #c7edcc;
5 Y B' V6 H5 E) W; n- P - }5 v& c' M1 Q, e* X$ E
% C) F, A$ x7 ^) B: s% b/ g- #word {
M4 I8 s5 N/ H: \ - font-size: 36px;/ ^- ]. v% c; q+ [: q& v! U
- font-weight: bold;8 i$ F* T5 G1 ^! a! E. c; d
- padding: 5px 20px;
3 @6 H* d: M+ W( G0 Y6 h - }: \8 P6 d( p/ o- B
4 _* Q) C: I% `7 l) f5 {# |- #rank, #example_audios {
, `% Y, ?' ]. g% {+ J - font-size : 12px;
% C& }. n2 Q k" E+ _2 c - }& v, x# T+ L# D# ]9 O
- ) u7 q6 {1 ~. T
- .yongfa {. I" ]7 \: \1 x' d6 A7 S
- font-style: italic;8 M0 Z7 g' W7 n: t1 `
- display: block;0 g2 U" [8 Q9 I% M7 ?8 k# f& g
- color: blue;
3 f( E0 |/ [0 D5 Q" k - padding: 5px 20px;
6 N, m9 t6 t2 M - font-size: 14px;2 O( d9 @9 o ^
- line-height: 1.2;
8 J: U* W/ O% O0 R. s7 I - }5 N1 J/ d, }* V7 U" Y) q% [
- , l, R, Y h1 I' W5 B7 w) d
- .shiyi_youdao {
4 v$ Y' M k) f E( F8 N3 E! h) B - font-style: normal;
. ~- A( e% ~. o" ^8 s4 X8 Y - font-size: 18px;
& M+ W. }% O2 f) @. C' S6 n8 R - line-height: 1.2;
2 F, G/ b9 T7 G& U3 \1 f2 R - padding: 5px 20px;
8 l2 h4 X5 f/ e% a+ c1 g - }2 A; H3 t: w' u, F
- " i# F; X7 H# t* C- C2 F. X8 C, g
- .hightlight {& i/ q2 b. G$ t! ~3 @6 p
- font-style: italic;9 E+ J. v4 [7 e& J$ J
- font-weight: bold;# E$ t: I* {1 E0 l) v0 I7 @0 j1 M
- }
4 u2 A4 |3 x& w2 I [
7 S5 D6 i! z% q2 ^. S* I$ K- /*
1 N6 F$ a* ^6 A! a' | - ._LDOCE6 {. p& B- B' s2 Y
- height: 480px;
. a( [, b! X$ n7 O, i8 [; U; U - overflow-y: auto;9 U5 O% U. C5 E( O" r# I) w4 w
- font-size: 14px; n% I* s. e6 ^ R6 ?% i* Y: R
- padding: 0px 10px;7 l$ x+ d! N% [1 x
- }4 |) g" g1 x( G6 H
- */. ?4 L( Y$ f: J2 _, B
- j2 g4 i9 k: [- #ldoce6 {" B# Q9 c5 [" F. n
- overflow-y: auto;+ f1 H% c1 G( y3 Q
- font-size: 14px;* L# a( ~: h" S' w' Q% u
- padding-left: 10px;
0 C3 J* J& j/ O& }, `) G" ?; @ - }1 R4 Y3 ]5 E# P2 F7 ^& [- Y$ B
- & E" |1 U' o' C2 \8 f0 H
- % O. b. L4 L1 }2 v
- #back {" C3 T& s Q2 j8 R; F: j
- display: none;
4 m2 g9 T2 N& V! t, R; Y" A8 f$ @ - }% X) Y6 D; `; S& i4 A9 {( Y
7 ^; G5 ~( N) B |* `- /*, \* t/ U0 ?& j3 `1 o
- .cixing {/ Z3 b5 a$ U8 i# L
- display:inline-block;" Y, U5 {# x: H9 f- q
- text-align:right;8 a6 x* ~, ~: y8 O3 m
- width:40px;3 d Z1 U' w5 F5 _/ V
- }
; K' b$ Z% j1 T - */
复制代码 " g$ S( Y7 A; t" `7 x( J; a8 p
8 n" z8 B7 H' C5 j c% @5 T
Back Template:
2 j- [1 }" Y& ]/ l: o- <!-- 背面区块 -->2 o! q8 @1 \' P, \3 D7 K
- {{FrontSide}}
$ ?; \6 x1 S+ k& E - <!-- 页眉区块 -->
% g* X: Q0 d) D6 S* |4 { - <script type="text/javascript">6 ]7 m: c( \! S
/ t: ?6 ^' N8 C3 E& y2 l- // format shiyi_youdao5 t/ o2 O$ A, F# H, J
- var colorMap = {3 D5 H. W2 |! w i2 Y' a" T/ y# f
- 'n.': '#e3412f',! u% }- c3 [( A: e9 y
- 'a.': '#f8b002',2 T4 ]+ o& _" a( P: W8 |
- 'adj.': '#f8b002',
) _& r; ~1 x' f5 i, j5 l/ g - 'ad.': '#684b9d',
0 c8 Z. R" Q u! K. _$ U - 'adv.': '#684b9d',; \( |. J6 E, f4 g, [; ~: H/ N, {) H8 I
- 'v.': '#539007',1 y1 u( ~ ?& P1 K; p
- 'vi.': '#539007',
4 j2 P7 m4 d; s/ K; ^ - 'vt.': '#539007',
; `! Q+ t. I2 G' F - 'prep.': '#04B7C9',
% \/ ~0 I4 Y% k5 F - 'conj.': '#04B7C9',
: I4 a8 ~8 k& l8 I - 'pron.': '#04B7C9',
$ f" B3 M# Y9 t* G - 'art.': '#04B7C9',
$ |8 m; E1 n- J) ?8 Y- G, t - 'num.': '#04B7C9',
) g! D: ~, `7 U# F - 'int.': '#04B7C9',
' m# l% X/ O: x7 U2 B+ H. l, q; e+ t - 'interj.': '#04B7C9',
+ r# o/ D8 `8 s4 I' @8 m: u5 ? - 'modal.': '#04B7C9',
# A( Z. d/ c, F! b- Q - 'aux.': '#04B7C9',! `7 N. E t, ?2 [
- 'pl.': '#D111D3'," s6 B T( I; G# `
- 'abbr.': '#D111D3',* a Y: z0 U! r- l k
- };
6 a/ T. G- w. I - [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
% J9 m; t5 c O" n m% f - div.innerHTML = div.innerHTML. ]% n" A9 X$ Q
- .replace(/\b[a-z]+\./g, function (symbol) {
& x+ A3 t% ~) f - if (colorMap[symbol]) {' w" E) F1 v4 u% p9 f2 @, t3 k
- return '<span class="cixing"><a class="hightlight" style="color:'6 M# C5 U3 F. O: }/ p6 c, X2 s
- + colorMap[symbol] + ';" >' + symbol + '</a></span>';0 l/ j# |; V3 Z! s% ^2 z
- } else {
/ K1 q/ G# p) [4 h* R: U - return symbol;
% [) d2 } ]9 ^1 [/ _0 X$ K - }' D- c( d n( e+ p' d4 N
- });) X' Z5 l' W3 t) T/ n% K' I
- });
0 a/ x, G# J! {9 |0 v) H" x - " x, Q3 E1 X. @5 O
- var back_div = document.getElementById("back");5 v) k. Z3 d6 c3 {7 |3 O& l1 z
- back_div.style.display = "block";
- j" Q) r, a2 E( L) b
& V: X8 k- u1 u* U- window.addEventListener("resize", update_ldoce6_height, false);5 A* z/ u& l P8 E% e" Q
- update_ldoce6_height();+ ]* d: X5 e6 G# J' G9 O
- # q, ~% v2 [" b% V9 b! G; l% }
- function update_ldoce6_height() {4 O: B# l, d, a4 k
- var ldoce6_div = document.getElementById("ldoce6");/ [4 Q- f0 z1 ]) X. f# u
- var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;& Q# ~8 A( C! }! e9 u
- var preferred_height = window_height - ldoce6_div.offsetTop - 20;$ [ S4 E% T: f
- ldoce6_div.style.height = preferred_height + "px";- x2 }# F6 F- M3 e# l5 H
- }1 I+ t5 q! h2 I
- 9 d, F5 T" @. B0 g) ~, Q
- // test to show the file name
0 ?% ~6 a8 G/ G _ - //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;
" T* X6 D5 b$ t
3 O. ?. F: o e- </script>
" I2 w( U6 r' z# _0 z - <script src="_entry.js"></script>
复制代码 |
|