TA的每日心情 | 衰 2018-4-23 09:34 |
|---|
签到天数: 4 天 [LV.2]偶尔看看I
|

楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
, ^9 O/ I4 {2 }6 s9 \8 M
Front Template:4 T9 |6 f* r3 T& x X
- <div id="front">: T0 X7 a: @8 I+ q# ~
/ @3 C, n1 e' n9 h+ J0 N$ D" }- <div class="headbar">{{Deck}}</div>
: `4 n9 |$ a5 C9 E - <div id="word">
$ L- V" X3 _# z - {{单词}}
& J7 x, D% N7 ^1 | - <span id="rank"> {{ranking}} </span><span id='example_audios'></span>! g8 ] g$ X( z+ @& Q
- </div>
' z% j" ]" J7 L! ~4 t4 C - <div class="yongfa">
/ f, f* F- \4 d" T+ d0 A - {{用法}}
% }8 h# S* B/ v1 I9 t - </div>
- Y0 r0 V0 D6 H7 b; a: ?
- R$ R; c3 d3 w( f0 c- <div id="back">6 T1 N) e+ G4 {/ E% S2 T5 j
- <div class="headbar">有道词典 基本释义</div>
1 g0 k9 e- R- y - <div class="shiyi_youdao">- S! r9 V+ ?7 [8 v7 l
- {{shiyi_youdao}} l. `/ x4 k7 v2 `
- </div>' ~! Q; B5 ?7 h3 s6 \3 @# W
- " m* a9 P- w: N1 d- ~, V" g
- <div class="headbar">LDOCE6</div>4 `' M6 L& I. P$ O! a# G+ c
- <div id="ldoce6">! }+ K% ]5 S" H& A
- {{LDOCE6}}4 Q {& u* x' @* i) p2 R* h
- </div>
' i4 [( h. @. D y+ u; @ - 8 L4 m" E9 P9 `) X! c5 l
- <script type="text/javascript">, h8 _6 {: x5 g( O. y$ L
- // format yonfa2 U. }( B- ]5 T
- [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {
# c7 b! V, U. l" E8 b - div.innerHTML = div.innerHTML
1 P0 \- I3 B% i+ E+ O' i. J4 K5 C7 X - .replace(/[1-9]+\)/g, function (symbol) {; u. ?' Y* D3 H- M3 @
- return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';1 S9 R7 m/ s* i( y
- });
: `; r' O4 t; D* [ - });
4 r8 l. x" x: w E7 y - . V- p( A" J3 {4 u* _* P1 P
- // play the Ammerican pronouciation9 J6 c+ k f. \3 p1 p
- var amevoice = document.getElementsByClassName("amevoice");& O' L* g3 {1 h& V
- var anki_modified_code = amevoice[0].innerHTML;
% v7 i5 q+ z. u& N8 n: k( w - //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
( X% j/ s2 f# B3 y5 } - var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];# u. L5 L a! i& {
- var audio = new Audio(filename); F+ D H0 I9 b/ c5 ]7 h5 T" D
- audio.play(); U9 ]5 R& B1 }
- ( i( P6 x, k9 o
- // add audios of the examples; V" D# ^0 K7 D2 q W
- var examples = document.getElementsByClassName("example");) M' y* Q9 i2 B; c% T; j
- var example_audios = "";2 v& ?# B: ]3 Z4 @! C0 U* A
- for (var i = 0; i < examples.length; i++) {/ \1 X8 j9 d& D. V
- var e = examples[i].innerHTML;8 s! Q( O" A% R
- var index = i + 1; f% K. q) f6 B+ J7 b) G# w$ H
- if (e.search('mp3]') == -1) {" i$ ]5 W( t" e, W3 D
- continue;
y' n& M6 ]( K7 T+ F - }- k; z) B* d' F0 a
- example_audios += index + e.split('<img')[0];6 u' `* ?: X* Y6 e
- //if (i>10) alerta(e.split('<img')[0]);! Z& F! I- N0 S- C
- }
; ~; L, k' C1 a* J - var rank = document.getElementById("rank");0 u; D6 j. e- `
- rank.innerHTML += example_audios;
, r1 I: R8 O. H% s/ z7 u+ @9 w1 ^7 ^ - 1 U4 \ [$ y; F# R: o
- </script>
复制代码
! K0 x' Z3 X, u; L! h8 W
4 R: X1 m* X, h9 a8 m7 cStyling:3 s6 m9 l+ O8 S/ A2 S; j$ ?
- /*页眉页脚全局样式*/
% d/ @# M4 |+ O$ d - .headbar {' a+ o" a4 b8 ]- n7 y* O
- color: #aaaaaa; /*字体颜色-白色*/1 q: X7 B4 J5 I. q. w7 H
- padding: 2px; /*四周留白-5px*/: c" G6 m( N8 @' z- l
- text-align: center;
' f: F6 F1 i# i! y9 b$ B( i9 { - font-size: 10px; /*字体大小-12px*/
( T+ b& p8 ?+ N0 ?+ a8 S - background: #365899;
U' r( W8 T- I! [& m1 r - }+ ]& y# S' s/ Z# \
" X, e( h9 d0 m7 _. ?- body {- k R) Z0 T: X2 Z9 v! A- C# E) d
- background: #c7edcc;
" p" ?$ o! Y/ v6 }/ ~" K) Y$ ] - }5 S, i! D8 l3 l0 l) E
- ! F; x) _/ Z, n$ x% `$ k
- #word {/ J( l" v4 H) }) a1 v1 F) b' v3 E
- font-size: 36px;" A' _6 E1 M, E3 X) u! a7 T! |3 g! h* _
- font-weight: bold;7 i3 I, \. D9 o$ w% k5 L/ s
- padding: 5px 20px;
5 |8 ]# }( i0 I8 f! B7 x9 J - }) W( {0 k# o1 E9 w+ r2 J& b9 E
* h: o3 `8 g7 {0 M8 @! J- #rank, #example_audios {
7 ~7 n2 ]% Z, V) ` - font-size : 12px;
: O+ X* ^ A/ y3 b - }
# @, j& d8 H8 k% A+ W! {; L
+ N2 v, C* X- }- .yongfa {% z2 S% a+ J7 V' L' i
- font-style: italic;
/ A, y C+ n' F, S, ~& {$ Y - display: block;
6 | v3 L; K! t/ [/ U1 Z% h - color: blue;
# o1 Z4 _8 X/ j1 a% h0 T, B - padding: 5px 20px;0 y+ y3 y" Z! U9 q1 G* ^7 {+ T
- font-size: 14px;9 q3 W: V0 N5 ~* x7 A, N( l3 m
- line-height: 1.2;0 d; [9 z" R2 |; _
- }7 ?, u- d* w4 J4 _3 B$ X
5 o6 A/ a/ Y c' {; w, p( r- .shiyi_youdao {
$ [2 t. g+ ?0 P* q- h. W - font-style: normal;3 b2 L6 s R8 S% w! i
- font-size: 18px;$ o# }' ?+ R1 P+ }4 ]
- line-height: 1.2;
' P( Q% K8 l8 m1 q& X" ~, j - padding: 5px 20px;
5 I( z: J& m- |! d }$ d, ? - }0 S ]' ?6 F; k$ ]" |8 o6 M* i
- 6 @" x, V' N8 W; f h
- .hightlight {
" \% \2 d G1 N. c1 w - font-style: italic;7 B! L, l+ ~0 M3 S- _% e
- font-weight: bold;) s: E n5 n9 s- r3 U
- }) D& B1 ]+ m3 f4 I
; H5 Y, c) {/ W& P- /*
1 D! v2 Q, _1 {2 O5 e - ._LDOCE6 {
+ Q* N5 C+ t1 E8 v& y: T& J - height: 480px;
0 d; L6 O, a7 J& M - overflow-y: auto;
: A2 U) m2 H) S8 p - font-size: 14px;5 r' y3 y3 x" F. e; K
- padding: 0px 10px;
) f# r7 e9 H: q- H( n* E! y - }0 a' a8 `6 @2 ]6 P! v
- */4 J: B9 B" ~) w' H/ D; N
- ! i& |5 y) A1 F: m
- #ldoce6 {
% B# s( e0 y- m8 {& n, s - overflow-y: auto;
, J: c4 m4 A7 I - font-size: 14px;
$ g3 [' v* \5 y+ u3 v3 F' ~ - padding-left: 10px;2 E; v" _" ]7 e- {
- }
7 |' V1 w, H4 F' ^
# x5 E! k, u$ ^9 ~# n; M M5 Q- ; { F5 F5 M5 d- W* `6 a
- #back {- U+ \' Q+ h- x# w, `5 u$ U
- display: none;
: t0 Z3 K: M( w9 a! g! u" Z - }
) [0 d2 I% g+ I; H% O8 V" K - 2 S( ]" ?: ^- I
- /*# g4 K; c; u# t* n% G1 P5 E' ]- l
- .cixing {
4 n8 ?; S# _2 B/ U - display:inline-block;
/ ?" |' S" \$ V+ B# i5 f+ y" i - text-align:right;- Q" I! a% B, g! k1 N, Z- e
- width:40px;& Q- A! i2 T1 Y& K; W
- }1 k8 ]; L X& @! _. E0 u
- */
复制代码 0 U) `3 @. W S' J+ j
+ t# @' l4 x6 `# x* T- l+ S
Back Template:
$ I2 i! O8 z, m) B7 y- <!-- 背面区块 -->
# [( I& H& Q4 l; E6 g9 h7 y - {{FrontSide}}
7 D2 ~& d: [0 H: Y; F5 B& C1 Q9 Y# m3 R* } - <!-- 页眉区块 -->$ Y+ F! ]% x1 {) y: t: A% w* a
- <script type="text/javascript">4 r0 }; A8 h. y4 H, s1 w4 `& V; [7 f
9 r" m/ O! F% ?! R- p' y- // format shiyi_youdao
, o7 `* Q `+ c {) Z8 T+ @0 S - var colorMap = {
. F* R4 E( u% z8 L* @ - 'n.': '#e3412f',
* s2 [7 g4 U. ^! j+ A) Q - 'a.': '#f8b002',
g4 ]6 g: Y. L6 ` - 'adj.': '#f8b002'," {/ Z; w+ X# e- Q1 w" Q7 j4 b8 @2 ^
- 'ad.': '#684b9d',) C: [; A+ N" ]
- 'adv.': '#684b9d',+ j" X9 D8 \* ]
- 'v.': '#539007',9 d: Q; G: c& _0 b. e! H6 {" \1 k
- 'vi.': '#539007',) G) X7 i3 y2 u( b3 q0 k
- 'vt.': '#539007',
2 a/ n9 I# U5 @ - 'prep.': '#04B7C9', g7 L5 T. z2 c9 h9 v' |- j, c1 u
- 'conj.': '#04B7C9',
+ t9 ^" V4 Z1 R, Y7 X6 B - 'pron.': '#04B7C9',
" I8 W- b+ f* g7 P) ^$ b: @% P( Y - 'art.': '#04B7C9',( f3 h" I3 l6 o& A' n9 T
- 'num.': '#04B7C9',3 m8 T4 W4 I: X& i$ Y& z2 c0 x
- 'int.': '#04B7C9',4 Z5 r* ^) d$ d* j
- 'interj.': '#04B7C9',& T$ v7 Z. r; y( X; i5 t# U
- 'modal.': '#04B7C9',
8 h# r" ]# i) g9 ` - 'aux.': '#04B7C9',
% j! _' \2 u* B' N& h# @6 p* p - 'pl.': '#D111D3',
# K* a3 g7 ]2 q) r7 u - 'abbr.': '#D111D3',
6 m$ |1 v/ a5 x7 B, \& t- ?2 U - };: [% F; s/ u1 [: z4 L
- [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
/ J0 ^+ c' `$ ^. a& t" Z - div.innerHTML = div.innerHTML
8 l; M$ m$ D7 f/ `1 C! Q3 @ - .replace(/\b[a-z]+\./g, function (symbol) {2 [* ^. a1 [2 g: I% _6 F
- if (colorMap[symbol]) {4 q) f& p; C/ R. L# [
- return '<span class="cixing"><a class="hightlight" style="color:'/ U, |& d/ d& w' ?+ m" w
- + colorMap[symbol] + ';" >' + symbol + '</a></span>';7 [- s% E8 ?( o' ^# ?3 i- F6 U4 E
- } else {4 p7 o' C1 ^, Y' F5 H9 G
- return symbol;6 `/ f4 W; n h7 |( q4 Q
- } R" {# n* r! e t* @
- });9 F. [$ E' ^: [6 _+ O4 Y
- });
! U! ?) @( t2 d! M2 V: X. H
% l4 @ r3 t( k% B. Q: Z+ ~- var back_div = document.getElementById("back");; s1 z$ {2 P9 {3 g! d* L& _# R6 _
- back_div.style.display = "block";, E, J- w" ^& w' p( S5 k( t
) _2 k9 P0 s. T ?) y- window.addEventListener("resize", update_ldoce6_height, false);
# ?5 y8 S; y7 j1 z; m- e: K7 E - update_ldoce6_height();5 K1 k5 g2 o/ | U- X1 M" [
- 6 @0 V3 S; ], D& y- T- U: [- ]7 m
- function update_ldoce6_height() { f- i$ x. A& Z$ a T7 _5 O4 Y' Q6 n5 t
- var ldoce6_div = document.getElementById("ldoce6");$ y/ v! Y" \" ~2 \
- var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
8 P: x& N! ^* ^ f' U# z' K$ k - var preferred_height = window_height - ldoce6_div.offsetTop - 20;
1 {* r5 B1 {3 t D* p - ldoce6_div.style.height = preferred_height + "px";# w) D, D0 e4 i+ B
- }
2 j9 m! u" e* G6 ?* s2 ~) c" \% g - / I; A: W, j$ H+ [9 s) N
- // test to show the file name
, G4 d2 u( T/ L1 `7 X; X C - //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;0 N! h" ^( F5 s3 ?
2 N9 V) q/ W' N2 p" ^# p- </script>( h4 g3 b" Q+ ]' {, b8 w
- <script src="_entry.js"></script>
复制代码 |
|