TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
% f, z- ~3 Z g. u& @% k3 G
Front Template:! }0 V; g7 b, j9 J1 ~7 N
- <div id="front">
B6 f; A& @: e9 U }4 M; M+ J* ~1 U
1 e# P% u$ M8 G0 n- <div class="headbar">{{Deck}}</div>
3 `+ v( w$ ]! Q1 K- N - <div id="word">0 Y. Z8 a$ H9 t7 r! L* q, G- e
- {{单词}}# n# _" a2 h5 Q1 @, n- N
- <span id="rank"> {{ranking}} </span><span id='example_audios'></span>
" _% F2 X& v; ^0 n - </div>* B7 ^' s {/ {
- <div class="yongfa">
* @; E; h6 d: `* D - {{用法}}
; I8 ~7 ?( Y9 h - </div>
8 i, Z0 I8 t8 N$ [) Q - 1 }, F5 Q! `2 i6 K
- <div id="back"> T Y( v9 H7 T; X9 M
- <div class="headbar">有道词典 基本释义</div>' t0 ?$ P6 ~- F( S4 p }1 m
- <div class="shiyi_youdao">/ i0 O$ Q" B% q! p
- {{shiyi_youdao}}
" q+ g( j! z2 _' C; X; ]/ x. X) _ - </div>- V4 j2 B" p7 ?: v& x
) V' y( s+ f8 Y8 ^3 ]- <div class="headbar">LDOCE6</div>
, V) G7 ^, g' M# g8 V& D# S8 h - <div id="ldoce6">- n2 P9 g* M6 G% E
- {{LDOCE6}}& P' T( P' [- @2 P' I2 M" ]+ r: Z
- </div>
% k5 j: o( E Z) ]
& x l! |! r5 B3 H; b) S2 V- <script type="text/javascript">
) }! T- ]( ? o d' y! a2 v( P9 ] - // format yonfa
0 ^' O ?* J( H - [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {: U4 H, a4 @# c! F
- div.innerHTML = div.innerHTML
" A4 r* Q- |7 O8 J% V - .replace(/[1-9]+\)/g, function (symbol) {
* B) _: G2 |8 A6 @2 f1 Y - return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
* j6 J; Q4 u7 V( N: ~4 C: ^ E0 _' y - });3 N4 K5 V& ]# m' K( |
- });
b. h( x/ K* }, S+ P8 ^
x0 Q1 r/ _. b3 }1 }5 M, W7 Y; w- // play the Ammerican pronouciation" ~- |9 ^6 t* i9 B
- var amevoice = document.getElementsByClassName("amevoice");5 A! {# {5 Y) M, }0 M, B
- var anki_modified_code = amevoice[0].innerHTML;
[( o7 A- S" F* G - //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;" m' T( D5 I- B4 T
- var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];4 v, a, S5 |0 E ^( [9 |
- var audio = new Audio(filename);$ f) T9 D. p1 f; S; U2 [, e8 p# H
- audio.play();
3 T% g- y7 k, s# A& e4 t
( L- n @ a# Y, o- // add audios of the examples
* U9 [( |, Y; s$ X9 A" D* b - var examples = document.getElementsByClassName("example");; F4 X& F+ Q6 T9 X l
- var example_audios = "";
- {- k; Z: }! p& [# D - for (var i = 0; i < examples.length; i++) {
' I; G$ K3 z. u( _( e* E2 W" o - var e = examples[i].innerHTML;0 t' h* S0 E3 c. g2 D7 \2 }0 U
- var index = i + 1;0 L# V8 x2 a& U# c# u
- if (e.search('mp3]') == -1) {$ U# \5 G" p5 P9 U5 @1 S% P
- continue;& L: Y" l. q) g; t% O, ?, C
- }
( D; K) a* `' G - example_audios += index + e.split('<img')[0];2 b2 M# U; X, y
- //if (i>10) alerta(e.split('<img')[0]);
! K B1 U3 y' y) }. K - }
7 e: n& I' k }' W5 g0 S: N/ ~ - var rank = document.getElementById("rank");
# `6 f8 c: E- n3 K" W! |% I/ }# M - rank.innerHTML += example_audios;/ b# J) z" Z' W
- & c% K' j$ p' U( n( T, x
- </script>
复制代码
: Q/ u2 E$ E5 r% e6 j! C
. K `1 T, X; L. OStyling:
, P. \7 W2 K% X# `/ u1 F, U, @+ [- /*页眉页脚全局样式*/
R) r, S* j8 ?# V$ E( K& |) o - .headbar {
4 d6 K- j7 h& u- n - color: #aaaaaa; /*字体颜色-白色*/
; c9 H+ z- m" O; `# L - padding: 2px; /*四周留白-5px*/+ v) j; z9 @6 j% c* M' z) y$ ?6 L
- text-align: center;
, H3 M0 c- l: t: @ - font-size: 10px; /*字体大小-12px*/- S% e8 O0 |8 C1 W
- background: #365899;
) n9 _9 \ h- {* ]! j, m$ C - }
4 `6 A6 N* {6 R! l4 r% x
* m4 K3 g w; U- body {
* S m) w6 E6 _- l - background: #c7edcc;2 G2 k. @; ]; B+ c3 L* B4 p
- }6 F# B8 j" \6 K$ f
- 6 t+ [3 P6 f0 L6 D2 h! l
- #word {
0 T- m7 Y) W$ L) b0 D0 V5 A - font-size: 36px;
' Y9 ]' a! ]$ l; m" c - font-weight: bold;- h* _5 p! }. _+ q* b
- padding: 5px 20px;
, r: J7 X7 h+ j; D9 K0 Z% v - }
' x) g: q) X: b n: G1 U8 L - 8 _' W0 s; F2 Z3 J; A7 h
- #rank, #example_audios {
, K, V w/ ^2 f1 D/ G5 h/ \ - font-size : 12px;: x6 [+ @* b6 u! M6 D, b/ `
- }9 R# K3 M' k6 d' L7 t( }' I' I( v
; U/ C Z5 x5 R- m- .yongfa {0 `6 V1 z v8 R1 @
- font-style: italic;
7 T& ~2 K+ T7 }1 ^, Z - display: block;
7 B& p6 Q% @$ O - color: blue;
9 e6 M8 j( X' P% |0 v2 ^5 Q - padding: 5px 20px;
- D! @0 h% r9 B2 h4 ] - font-size: 14px;0 \. f' C% |8 l8 `
- line-height: 1.2;
( F5 d1 d& Q2 [! S2 H- M- C - }
( L4 A* ]* `/ I ~ - & ^% q* |9 E# {( s
- .shiyi_youdao {
$ ~- c& K& E. I K! S - font-style: normal;# A8 S4 }4 |( @5 s
- font-size: 18px;
. Y( c- O- H/ K9 x& c2 ^ - line-height: 1.2;
1 t6 o: d* i8 ~6 B2 L! }. Y - padding: 5px 20px;- L( i; ^$ s5 f& I( \4 ?
- }
3 H0 Z x7 d7 F# u; H W7 t( h - , v, Z: w8 J o, a$ b7 X
- .hightlight {& f h0 K3 R1 [ b+ j' H
- font-style: italic;, N6 [, M( e% P I7 G d# m
- font-weight: bold;' s8 k% h; F/ L0 Z$ ?- k
- }$ A& e4 Z" H6 I8 W6 _: j# y" J
8 c+ ~( E* m `, R0 s- /*
* ]# a2 w. g# ` - ._LDOCE6 {. N) r7 \) Y+ }; N% s4 ^5 Q
- height: 480px;$ Q$ o% T v$ q& B2 J0 Z+ A! F
- overflow-y: auto;
6 z, f' _/ ~, ]- x8 F3 T. h$ u - font-size: 14px;' [( C2 |9 ^- U: X* \9 a3 [
- padding: 0px 10px;6 M+ H$ k( C. \2 d) P
- }
1 a# }! e6 ?) g, G! Y. F7 j4 \ r* i - */
5 @- E; ~: I: \( n2 m# }8 w2 X4 K
1 \9 |/ ^$ t: h! V5 }' ~' h- #ldoce6 {
+ [! I! d ?8 v; O+ \ - overflow-y: auto;
! S# F' @" w9 z( G - font-size: 14px;9 F( _7 Q: P5 W# `) O
- padding-left: 10px;
% T$ S( @# O1 E) o& N - }
8 h! r5 V* d, c; w - 0 |* Z4 c( H5 }/ _( B% V) C
- % u- f P A; Q1 \- y1 n
- #back {
" \# k% L2 L- b - display: none;
`$ f) _0 Q2 C Z, x" `5 h6 I - }
# z, t% X1 ^4 ?, {% |2 J - * g" x9 n7 G. D: i8 F2 r, r
- /*
7 m# ?0 p% Y- k* Z3 Y4 ]: ?+ p9 x8 k - .cixing {# {8 ?6 K0 ?3 G6 @, w1 `
- display:inline-block;
% O8 D( _5 d- s6 o - text-align:right;
4 T$ Z4 g) k! ^% N( C - width:40px;, b, O8 t* z$ E/ O
- }1 l, k* S, i0 T/ F; c
- */
复制代码
9 h6 h! D# V/ K8 p0 k' F2 `* v
+ B1 r# ?1 v: h7 m- q2 I2 [' L, ?Back Template:/ E+ G# ~4 d1 l( N4 ?
- <!-- 背面区块 -->
) e1 p% j' q ], T* b - {{FrontSide}}
0 a% u- n. `8 m4 y8 q - <!-- 页眉区块 -->
0 u' V3 Y( `; r$ l - <script type="text/javascript">
" \8 a2 I+ e6 I' X# b1 Y - ; K1 g3 `; X* b. i8 J. q8 |+ q
- // format shiyi_youdao; C& ^: W" h! J% K
- var colorMap = {
6 ?5 ~$ H& C9 x) F1 z - 'n.': '#e3412f',
# I- T6 A! w1 C8 R8 j) j5 ?' u - 'a.': '#f8b002',
0 h6 P8 M& y2 ? ?1 ?" I - 'adj.': '#f8b002',# P1 b3 F" N1 I5 b
- 'ad.': '#684b9d',
+ d/ m9 p6 |6 K% B" }$ G" w. n' } - 'adv.': '#684b9d',4 f* A+ L) L& ?. _3 [
- 'v.': '#539007',& I0 z; E f1 L9 {
- 'vi.': '#539007',1 v1 e) @) A1 K. }6 }
- 'vt.': '#539007'," ?4 o' [' t0 Y9 S. z
- 'prep.': '#04B7C9',
# z8 ^* R* m4 o$ s% j- _! ?" P - 'conj.': '#04B7C9',5 H6 g! f/ }0 Q# B; o3 @
- 'pron.': '#04B7C9',3 Q' B5 l2 o0 h4 {- d
- 'art.': '#04B7C9',' G5 U# v# S' d4 {0 n* S
- 'num.': '#04B7C9',
3 S i# }" h6 m. l1 D4 K - 'int.': '#04B7C9',
' I3 J! d; J$ O5 K( K8 e } - 'interj.': '#04B7C9',
2 N2 K; b. U: [9 g - 'modal.': '#04B7C9',
& ?" G5 e2 m0 N) @4 d& n - 'aux.': '#04B7C9',4 c, S7 S% a$ n: G, S' G+ f
- 'pl.': '#D111D3',
' A/ |0 q- Z$ M1 ]- j# @% l - 'abbr.': '#D111D3',
* q1 m+ N8 V4 Q, g* }6 g - };; L; ^: t1 @1 v' {( }
- [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {& f3 ?( E- u* w6 a% I4 I
- div.innerHTML = div.innerHTML
$ L) R+ h! i% G) W5 Y4 g1 E - .replace(/\b[a-z]+\./g, function (symbol) {
- ^8 b2 E8 ?+ g3 F+ H, A5 Z - if (colorMap[symbol]) {; s" L: {& I- k' U# g; h* N
- return '<span class="cixing"><a class="hightlight" style="color:'
/ \+ f/ P* E6 I8 H: h9 M - + colorMap[symbol] + ';" >' + symbol + '</a></span>';6 k) P$ o0 q- \5 a d" H( z6 Z
- } else {
Q0 y9 O/ F. v s9 y; g - return symbol; z4 f5 y- c3 ^ {" Z( {
- }
5 ]6 V( ~5 P' t) k - });1 I; i. n/ W. _1 A8 o
- });) B. o# s" C% e! v7 Z" y) s
5 v4 J3 T/ f* W! ]- var back_div = document.getElementById("back");
# F4 W- D" \3 S3 E6 a. v - back_div.style.display = "block";$ u& l% K7 S7 _, a; o
- $ X$ @) ~) t# n+ V0 f
- window.addEventListener("resize", update_ldoce6_height, false);8 E7 {* Y8 B7 T& K; C
- update_ldoce6_height();
) J) k, |, a% z8 T7 l1 h - . ^* B! r0 U8 x4 `+ K$ u
- function update_ldoce6_height() {' y! h7 u, k4 y0 p# a
- var ldoce6_div = document.getElementById("ldoce6");
$ B; }4 v" H6 Q - var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;% P$ D5 \" {/ H* e2 c! k
- var preferred_height = window_height - ldoce6_div.offsetTop - 20;/ }# R" E: {: e% ?# T" J
- ldoce6_div.style.height = preferred_height + "px"; y( k4 u5 M: N: I# T% P
- }! u* }: w4 p* F1 v3 E4 B- o
- ' ~+ c0 ]% ~/ n
- // test to show the file name
" B; n( b5 ^2 @. h# d6 @& l - //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;
; {0 [3 B! p6 y* K' H9 ^ W0 h3 G
# ?+ i$ T2 V I, O1 g- </script>$ T7 _* Z0 I! g c5 B
- <script src="_entry.js"></script>
复制代码 |
|