TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 20:10:48
|
显示全部楼层
- F0 U5 c8 v+ m& ?$ @7 z" d
====Front Template====
. r0 n0 _' t0 ]. |* `# t<div id="front">& S. `9 U1 b5 j8 Y! t9 c
8 A. k# I8 n0 D7 t2 \" @ <div class="headbar">{{Deck}}</div>2 i' C8 S( C, K" s3 q
<div id="word">! H# h: h2 X, }8 ~
{{单词}}
7 L+ P! x1 o0 _8 i: C( H7 _( `* A <span id="rank"> {{ranking}} </span><span id='example_audios'></span>
# u9 g" K4 e5 W j. f; m* E </div>
4 {$ R- d: Z0 b. A <div class="yongfa">( b2 N, i! z' W; K# |; G
{{用法}}
3 E# b- @; M$ M4 U </div>1 y. f7 {3 T/ x* K5 d, ]
9 f- C% C- _( \2 Z/ o j8 ~0 z
<div id="back">2 R$ n& |1 d5 z
<div class="headbar">有道词典 基本释义</div>! N3 C0 e$ T |. B
<div class="shiyi_youdao">. ]/ B5 d! L( V% m3 f0 U) W
{{shiyi_youdao}}
0 p9 j. r b0 l5 @1 p; } </div>
" I' x9 k c1 X
. t/ t" N; P7 W1 ^5 e% x9 ^ <div class="headbar">LDOCE6</div>
2 O/ {* R3 G8 g0 ?% B <div id="ldoce6"> J" @) h4 F7 R" V- l. ^
{{LDOCE6}}
( c. {' ~3 c% s9 C! `) \5 m+ a </div>8 j2 y! U% i8 J9 h
6 K7 @, c+ v B, a/ c <script type="text/javascript">9 f$ P; s- @& B- p; ]
// format yonfa0 r7 [* Z3 V& D: y, q
[].forEach.call(document.querySelectorAll('.yongfa'), function (div) { y* ?% e9 r( R0 P5 ~
div.innerHTML = div.innerHTML$ i/ Q) t5 g; u% q7 X' ^
.replace(/[1-9]+\)/g, function (symbol) {
# h7 _& A) o( r$ h$ h3 G return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
0 [! g/ E9 t0 X! V2 m });
1 @* U3 c$ m) m* F, B% @ });
6 N* b0 p u: L4 @. N9 U& D9 U6 |* B3 u. k+ h% Y- _
// play the Ammerican pronouciation; Z1 z7 X1 S" s3 {* W
var amevoice = document.getElementsByClassName("amevoice");
5 ^. r, H+ {6 z var anki_modified_code = amevoice[0].innerHTML; N* ?( f: D4 G8 E' e! j$ g0 d8 q
//var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;# B9 V' I* ?; v; Z
var filename = anki_modified_code.split('ankiplay')[1].split('\");')[0];& [# X5 V( N3 s6 t
var audio = new Audio(filename);
+ m. y1 v. v( j, A* Z audio.play();1 }+ t. E/ _; X3 ^4 T; x
2 ?$ i5 C. N5 K$ x$ }' a // add audios of the examples
# L& b3 m: b/ f# w9 U' [ var examples = document.getElementsByClassName("example");6 d1 P1 M( f. n
var example_audios = "";& \; l8 l& c) n3 c1 N- Y0 q' V' A
for (var i = 0; i < examples.length; i++) {
M6 Z8 C3 W: R/ L2 b& E2 L var e = examples.innerHTML;0 o( A6 V; g: }+ A, B( Y
var index = i + 1;) y& c/ \6 p7 W0 D9 J7 i
if (e.search('mp3]') == -1) {) m6 o# \0 d9 G' B
continue;
T( ] _ w7 s+ |8 x }' x2 k9 O4 V$ F- f: g o
example_audios += index + e.split('<img')[0];
8 V& q0 x2 _# C' _5 G9 D+ H$ O//if (i>10) alerta(e.split('<img')[0]);
3 A6 w1 O6 F! e% B! x }2 j4 v- p! \1 N$ c3 S4 i+ l9 [& t) N8 M
var rank = document.getElementById("rank");
: Q1 J J n; ~, S7 R8 t rank.innerHTML += example_audios;- K$ i" F2 \. g) |
! H8 t9 S; c+ @( s$ h& l, I
</script>2 d7 G+ n& |' M
====
8 }5 h) E! b! y) \4 X: _% Q+ {" M
* B3 G1 Z7 |& t0 u+ f+ {====Styling====0 R* n/ q- d b* U/ f# T
/*页眉页脚全局样式*/
P. X: V0 y: `! Q.headbar {1 d4 _) y% j' f2 E T
color: #aaaaaa; /*字体颜色-白色*/
F: _% c [, V) a$ s8 U padding: 2px; /*四周留白-5px*/; S$ z# ~! q) S
text-align: center;' [/ ^+ u( w% x# }1 g7 M
font-size: 10px; /*字体大小-12px*/8 n& c8 `0 D F
background: #365899;
# b2 @ Y$ ^- m}
1 @ p' I) B- U' w8 r
% F. `$ p4 _( ~9 \( l. e* W8 I. Pbody {% x3 P" [) P/ z1 ]1 l
background: #c7edcc;
4 V, v3 G% h" L8 w3 Y}
2 H5 R6 U& X# U3 N& e2 G, e) b
" w# f7 {: m( V3 O% X#word {
. W/ o2 j) U" K1 i+ x font-size: 36px;
: J. Y) M& Q# j* _/ j+ U# c font-weight: bold;
& B( k9 \' |0 r. V" `* x padding: 5px 20px;
% L2 p8 c+ Z/ B) d9 O# d}
: z* e! x x/ L" _; z+ j
1 p' J' B, l) P# Q#rank, #example_audios {
: e) ^4 [0 f, D& M( V font-size : 12px;7 V) C1 u6 f4 u- p D
}% X: o. v) _% r- n. T
+ J6 a, I, ~# d! }* \2 J
.yongfa {8 u) O3 E: n3 o5 ]" ]
font-style: italic;
2 u- l4 p8 D8 | display: block;8 |% Q5 V) P7 p @
color: blue;
" |- G+ \, ^3 T; J$ M+ | padding: 5px 20px;/ G6 j, O2 C8 B1 B' w
font-size: 14px;. E0 b- D/ o4 Q* c
line-height: 1.2;
) G# {6 ]* w! p& a+ y}) B7 b$ W7 L# e' h! }$ `! h9 G
0 w. M z+ d4 q6 w% m.shiyi_youdao {
* l9 D. C7 H4 M1 ?7 {7 D' ~8 ~ font-style: normal;
7 u1 \4 @6 B8 N4 g font-size: 18px;7 U! e& t& O, e& F k* B* B
line-height: 1.2;
7 ^' P* i4 q+ Z8 }) B: f N padding: 5px 20px;6 A! w# x8 j" d! [- k' ^# W
}
! G( V" e1 y& j, {' ^! }) [8 E/ ^( n9 z; @
.hightlight {2 N& V; B/ @0 w# e+ }: g
font-style: italic;
6 v/ _, @& G8 U& _! Q font-weight: bold;% a" \' j' l! Y
}" V! H" ~" W( |( c6 b
- w: e. V3 o0 U5 [$ ]! J) W
/*
# H0 x& T. Q$ |5 U( D._LDOCE6 {
& T" @" @( W4 F( A0 }, }, ^ height: 480px;; n8 l8 r3 y' [& x! Y
overflow-y: auto;
2 G) e8 N6 v' @# n4 S0 h font-size: 14px;
$ J: m$ C+ U0 h* x, U& {' r padding: 0px 10px;% W$ x0 [) k$ b2 J; r) I/ X8 f- C
}- t% H+ s e7 R; U2 `
*/7 j3 |6 ?8 R. q# s
5 v- b9 h5 z9 H; L0 |+ W# ^#ldoce6 {
3 K+ d: T4 U3 v' E, E6 i/ M( D overflow-y: auto;3 `8 D1 ]$ H* w) n0 y
font-size: 14px;% T# a6 n8 @% a; u
padding-left: 10px;
H+ |2 r, P; W! c}0 s, r5 K$ n! X# C) [5 i. }' D
2 E+ _4 c* ~) Y3 M* p! k
! l9 b) N g( Q' z( L" c, i: b, A#back {3 r$ E3 x! |4 C8 u$ K/ P
display: none;3 ]( u+ A! d2 O( M3 c
}
( E/ R, {, |# ]9 o6 [/ P3 r" V, D3 M$ {
/*
9 q: J( K; j0 M8 R: p.cixing { F# w6 F4 r2 @9 v. O6 i
display:inline-block;) J. w( K2 ~( u% n
text-align:right;4 d1 O2 m" V! ~" T8 O# S/ l* T
width:40px;
! V6 c; h: {! a+ Q& m. X2 u% B% z}: l: q0 N) W8 M, M# E: C, ^% J
*/
3 u% \0 c5 l" C& V0 r7 q====7 T* E% X* E1 I' P; V, a6 z
; b2 D. R2 \8 ^" }! \4 P8 F# ?
====Back Template====$ I2 [( @+ ^* V; @
<!-- 背面区块 -->7 \: {1 \2 J+ c5 }* I9 Y: e1 z: `
{{FrontSide}}
" ^* ]8 M$ {# b9 E5 {: F$ c<!-- 页眉区块 -->
' n& h; X9 E# s6 j<script type="text/javascript">7 L l# w! p2 z% r Y# A K3 `
/ Z5 K0 R& E2 G" |+ G' d" \, F0 z
// format shiyi_youdao3 Z# Z* o& P. M* G9 w
var colorMap = {
3 j8 @5 ]& p5 L! m& |4 i- F# { 'n.': '#e3412f',
* X1 W+ Q/ F* z 'a.': '#f8b002',
9 W. V2 {; y' s 'adj.': '#f8b002',
# D9 k5 I) f+ t) Z( Q7 O 'ad.': '#684b9d',
2 k1 M6 Y% q- @- P 'adv.': '#684b9d',* F2 R D; f! |8 y
'v.': '#539007',
# A8 B' K6 H( j 'vi.': '#539007',* V' U2 ]+ g7 H1 q4 B( l1 ]- B/ Y
'vt.': '#539007',/ L0 w+ D5 q! Z& T* d
'prep.': '#04B7C9',
+ Y" @/ C) F/ @ 'conj.': '#04B7C9',! P4 Q# j' g9 E1 _4 F) S: {$ Z
'pron.': '#04B7C9'," \ D* |0 d$ ^. }# t5 t: i
'art.': '#04B7C9',! C% N5 l4 F, m$ L. h! K- q
'num.': '#04B7C9',9 J; j. A F% Z% u. i
'int.': '#04B7C9',4 u+ x& B4 J. |% r
'interj.': '#04B7C9',' E% R" z) J, q9 ^4 w7 _
'modal.': '#04B7C9', F' q1 R2 p. @$ r
'aux.': '#04B7C9',8 ^: e: Z5 a4 P) Z& c
'pl.': '#D111D3',
; }6 R9 m# R6 T( U, B4 d9 x3 Y" C4 F 'abbr.': '#D111D3',
: d* N4 l- n! ]+ I9 K };
& @+ A% F" @ s9 x2 t- b [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
9 K1 M. n1 `. Y2 e1 i% a div.innerHTML = div.innerHTML
, f. W7 Y* c K6 |0 q .replace(/\b[a-z]+\./g, function (symbol) {* u* O4 x- ?, Z: @4 ?0 P
if (colorMap[symbol]) {
0 F4 {4 h9 A0 c- m- J return '<span class="cixing"><a class="hightlight" style="color:'- y2 ^2 C6 R4 G
+ colorMap[symbol] + ';" >' + symbol + '</a></span>';8 n0 ?/ s- Q# X7 E* O# i
} else {
1 x% ^3 {9 i4 d4 z- \5 C( L return symbol;+ g* q. z9 C( A5 i6 A/ b. M
}) B- e, n# [ P
});
7 o' n6 t# e5 q3 q# S2 ^8 R });
: F4 L) q, z' z* f8 F+ X6 s1 e$ O$ i6 e( R5 \$ l. ] R
var back_div = document.getElementById("back");
, V$ l0 N! }6 L8 Z back_div.style.display = "block";
# z. [, M2 U9 [1 S" n
5 y+ A& f, K* C9 \2 H window.addEventListener("resize", update_ldoce6_height, false);. Y! Y6 @% w' p9 i5 X* h ^) b
update_ldoce6_height();1 D; P& _% v2 ^" ^+ h! @: q
6 b: z& n% X9 @: |4 F8 d function update_ldoce6_height() {% R! H* f& V1 H- @4 o, M' m% m
var ldoce6_div = document.getElementById("ldoce6");- L0 e, \" q/ e
var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
& _; S& ~6 h! F4 e( Y var preferred_height = window_height - ldoce6_div.offsetTop - 20;
2 H4 B- |9 v, ^% m ldoce6_div.style.height = preferred_height + "px";" C7 k( G f- n7 v5 \- I
}
3 A: e% W' V e+ }2 `
' }1 T" } a, ]9 d( W7 e // test to show the file name' L1 Z! f4 R+ l! Q1 V; N k2 x
//document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height; F9 L8 v9 ~/ x3 _( W, U
% X+ i. I8 y: v! R1 b9 M
</script>' o* c, A. ^' o' U- X3 U
<script src="_entry.js"></script>
; ^+ S% |8 D+ C3 I==== |
|