TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 20:10:48
|
显示全部楼层
6 C* ^- F2 s9 m( E* I====Front Template====
0 f' d8 ?; N V7 y1 G& u: M8 |<div id="front">) A, |& W- T% a5 }' w8 j% t) P
& P8 o+ R; A z0 x" e$ @2 d2 a1 i; N h
<div class="headbar">{{Deck}}</div> Q2 m. m' D4 g$ @" g Z% J* F) [
<div id="word">9 U# U, ` B$ Q' D% i! ^
{{单词}}% S4 a) g* B- N6 W2 I6 j" c
<span id="rank"> {{ranking}} </span><span id='example_audios'></span>- w1 Y. b; ^3 V6 u! ^. w4 [
</div># F/ `: j& E- a' [! }/ n
<div class="yongfa">% ?& s$ s5 A) w. J! G# Q2 l: J
{{用法}}
+ I! X: `, b; j8 x6 J </div>
. P; J# j8 {) V8 G" z4 P8 Y* l1 s, m. T% `7 @; W* S' _% ?
<div id="back">7 h) c" V. _: Q7 N
<div class="headbar">有道词典 基本释义</div>
3 j( N3 o" m5 e% i1 O <div class="shiyi_youdao">5 A. p$ @- h2 `$ z {9 x
{{shiyi_youdao}}
2 x) n9 h7 x3 ` </div>2 z3 Z O5 H/ a8 ?, j8 j
2 b- U% _# u; ]5 R! e <div class="headbar">LDOCE6</div>
, b. m* b* S5 m8 f <div id="ldoce6">
) _. u( r. e8 n {{LDOCE6}}
$ L5 \9 P4 J% n, ? </div>, Y6 n5 `7 F6 q0 L
) P" L! ]% {6 u5 h' h* C
<script type="text/javascript">; ?5 ]) x h( u6 p; j7 S
// format yonfa
, J5 p4 ?% w6 B6 f [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {' b& c2 @ y! O% L) }
div.innerHTML = div.innerHTML
# w. _6 o8 V& [ w8 c( p! ] .replace(/[1-9]+\)/g, function (symbol) {
( I' N) x7 F V, C7 Q return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
# e3 ^ N+ a$ ?3 M& o });; K! T- @: _% o: {/ @* E: y
});' L9 B9 Z) r7 u8 M
) U7 G3 `- }" L1 W! U3 ] // play the Ammerican pronouciation+ u& n$ ?! @. P. {; W' |! c' l
var amevoice = document.getElementsByClassName("amevoice");
% Q; U& Z; T* {6 n var anki_modified_code = amevoice[0].innerHTML;5 v4 O& K7 t) y8 [. U8 ^
//var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
8 M ?3 |; \! t! B var filename = anki_modified_code.split('ankiplay')[1].split('\");')[0];1 m1 k1 k0 r. T5 u
var audio = new Audio(filename);$ i/ i+ y H: T- P) G5 e/ O4 G
audio.play();
2 Z) [* g, J7 g0 X$ ?( c( Z, o8 u B* M8 v7 N6 @6 s
// add audios of the examples
1 k1 r% f% Q2 E! C1 j var examples = document.getElementsByClassName("example");) o- M3 m) h) ~ ^' g- N
var example_audios = "";
+ `2 ~" m/ I) f for (var i = 0; i < examples.length; i++) {
. ]1 o* t; n! t+ V" M/ m var e = examples.innerHTML;4 M$ k8 ?# T ^9 [7 W$ [$ O
var index = i + 1;' k r* x. f8 g2 P
if (e.search('mp3]') == -1) {% c+ S; J) A2 e5 E! Y/ V% H
continue;- r' F& m1 f+ R. F
}
7 V# x5 s. f! p' V7 f( [' K9 p example_audios += index + e.split('<img')[0];
5 Z! m0 r3 ~, g7 m6 ], f' ^//if (i>10) alerta(e.split('<img')[0]);
9 M5 W4 U2 u+ m7 w, X( y# [! { }
: j/ \! Z' X' T9 X% X n var rank = document.getElementById("rank");& a# j$ @: `7 e# D: `
rank.innerHTML += example_audios;
6 ^ y5 M. R7 y6 W
5 o3 C! `" ^! J6 w% l </script>
& c1 ]' r) \ i t Y% R3 Z/ ?====% C/ W! b6 N, t0 W
3 [7 n9 s9 u; D7 y$ k- T
====Styling====
5 C. T) H2 Y3 m) V2 y* ~/*页眉页脚全局样式*/! @4 t9 r" W" u+ i
.headbar {3 z& U$ L4 l2 y. h* U+ j3 @
color: #aaaaaa; /*字体颜色-白色*/. I: i( M# F" v' t" t( p
padding: 2px; /*四周留白-5px*/
8 S+ L4 G2 c+ m% j2 F7 M text-align: center;
* y, T m9 h e9 ?9 A font-size: 10px; /*字体大小-12px*/
( ^! N0 D$ ~6 S, d4 A6 J background: #365899;
9 B' j1 ?& Q! X0 n w}
# j- T' C- w( v# j0 ?, M( ]7 B8 ]* j7 X7 x' \7 v. G
body {
2 c O/ Z( b5 S2 S7 l) J background: #c7edcc;7 _! b& i6 }% F' k, h: ], y
}
3 U. C3 U, B/ B, f
# C" r- @9 F' V! q% u#word {
$ t, Y* u4 w8 n6 [3 \ font-size: 36px;
1 W! @( r. f( {0 b font-weight: bold;
% C$ Y# H( b2 T6 m padding: 5px 20px;
! a" d+ v3 V8 I1 Z0 v P+ A: C} ]$ e0 @/ m* |. X, z4 f
/ b9 [8 s- ~# h. u6 D s& c) U
#rank, #example_audios {" {5 }) Y1 _ d8 u' Q
font-size : 12px;( Q) l8 m, O3 @; I1 w
}0 W2 n# _9 o: j: a0 F* I$ Z
5 d: m7 G# a3 q1 X% T: d2 C% p. P.yongfa {3 f3 |* Z! g% h3 s; q
font-style: italic;, p0 _% W3 f" Z7 Y. b4 U1 r
display: block;2 s2 H4 a4 f; _; H
color: blue;- E @! Z% M4 C
padding: 5px 20px;' E' ^. i9 ], ]+ K! q! \
font-size: 14px;1 d# s, r$ }7 N, s3 ?6 N2 z
line-height: 1.2;+ Z' u+ C3 r" k% B: t1 y
}5 s8 ?* @- S. v1 ]' M! h) k# a4 [
m G/ D. {7 `7 e' {# t$ ~+ ?. u.shiyi_youdao {4 b5 _- Q0 o: H4 E2 {- M
font-style: normal;
- _4 z9 S- I, G; b: Q# R/ U5 L9 a font-size: 18px;- Z$ N0 G$ n6 E" k1 y; _$ L
line-height: 1.2;3 ~/ n: U2 m( {
padding: 5px 20px;7 }$ X: k/ f% U' H5 r8 k9 k
}
, l5 {0 {0 Y6 q( _1 i$ Z
6 Z) H& u. H6 Q& }" }# ?.hightlight {
2 \7 H J. Q! v: S n# L3 P3 z font-style: italic;1 p% O' e8 x5 c4 `2 F& V
font-weight: bold;
Y: p; a+ Z9 k8 b7 x}5 \- s, B( A, P. o$ d
! y( g; o8 h; {4 ]' ~2 k6 z0 K) o7 R/*% g& r& g3 \& N" s* L) A, C
._LDOCE6 {
% L1 v7 ]0 w/ C/ B1 x. K- \& P9 p height: 480px;
8 g, z$ i4 O+ C4 ] overflow-y: auto;) x* n2 a' Y* @/ w% h
font-size: 14px;
, u; w" D. x# V* b) v" h- ~* I5 Y padding: 0px 10px;
4 q$ Z3 D1 q$ E3 z; |$ K- ]( h4 _}* s. e3 Z8 c. k4 r! w
*/
4 L# v. y1 i5 j6 j
' m3 Q# E8 Z" d" X6 p" v8 P#ldoce6 {4 d3 P B2 C. J! ?: ~! M
overflow-y: auto;
O! Y q: l# j, Q4 W# D8 O( R L font-size: 14px;
, Z# _( ?/ J3 S2 L# \0 C2 J padding-left: 10px;
8 N, l( R% \( ]+ q}8 ~1 S- O2 d8 M5 s, H
3 w. L: g2 @2 }5 Q' d; f. s$ B' q0 S+ X3 m; Z3 H8 B
#back {
# r& k( t8 ]0 Q" q& G- j$ t( d3 bdisplay: none;
+ v9 M# D$ C$ s/ u}
( T2 ^& T% Y5 j: Y, d, g0 |/ Q) K
$ O. r5 ?- I# ?" F. y/*, j8 p! j* \. @" e6 F7 g& o
.cixing {
: F4 R' n/ k3 A) i- {# I K; r display:inline-block;
9 h. X. _* L- X2 x% O; t8 l. O: `6 W text-align:right;
) u: N; c/ `$ V# @8 \ N width:40px;3 b" |) S1 u+ ?! ?/ l! }9 p) D8 d! d
}
! ]. J1 G8 _" k' n+ D* b' C*/3 Y: g& h& T2 _. n( ~
====0 H5 Z2 l* T3 V
, E% k( L; N% ]! v: x. H5 X/ h====Back Template==== k! J) m) g2 o$ ~
<!-- 背面区块 -->3 z( h0 C, ^) K3 {" q0 T/ M) H% d
{{FrontSide}}5 j) y* |. @% l
<!-- 页眉区块 -->& q) s) q9 d# ^
<script type="text/javascript">
- ~ b3 X8 a3 q% O1 v& l" s3 b6 C& D5 h9 {- y C8 V
// format shiyi_youdao2 F- _$ w& t0 J* s( [. u6 q
var colorMap = {
: F5 x! p& P4 H/ g3 n1 } 'n.': '#e3412f',, [. H6 C5 m$ n, `( O, S. D
'a.': '#f8b002',
6 G; s, d# k8 @' H9 g n 'adj.': '#f8b002',
& y/ C2 N& a6 m( }) | 'ad.': '#684b9d',* X( T2 |) c) L: a# Z6 {) _
'adv.': '#684b9d',
8 b1 e1 `0 t( t5 g- Y0 u3 O 'v.': '#539007',: U8 R: K4 [7 U: h
'vi.': '#539007',0 q2 N7 Z# ~) S8 ^9 e& B2 R
'vt.': '#539007',
0 s4 `1 a, f! m( H F 'prep.': '#04B7C9',. g5 S% m6 w5 s C+ I( ?
'conj.': '#04B7C9',
5 J* \ |" p/ l' k 'pron.': '#04B7C9',0 h9 \- k+ t: q7 C' {
'art.': '#04B7C9',3 Q w4 j+ |% |2 O( K9 a
'num.': '#04B7C9',! q% Y. ]& @; M: [( x
'int.': '#04B7C9',4 R9 q2 R' J3 G- B% ~$ A4 c' Q0 B
'interj.': '#04B7C9',
; l/ P0 x4 p$ c$ D6 |1 E 'modal.': '#04B7C9',5 D! N& s" b) U8 y+ Q7 X
'aux.': '#04B7C9',
# H& g, F" ]' k% `7 D 'pl.': '#D111D3',
% o+ W, D9 [' r 'abbr.': '#D111D3',
- r% p, h& o5 m$ Y# r7 q, \ };8 [9 r, D/ l& r
[].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {+ ^5 Z# A* g# N- `0 |; ^
div.innerHTML = div.innerHTML. |1 ~: u) e! o# p4 L' o% a
.replace(/\b[a-z]+\./g, function (symbol) {! {: k8 }+ L3 v$ p+ w6 V
if (colorMap[symbol]) {
1 t, }: ^2 |$ ]) W8 U3 r return '<span class="cixing"><a class="hightlight" style="color:'
8 K) p; H8 q+ h9 h; w/ E9 A* \ + colorMap[symbol] + ';" >' + symbol + '</a></span>';
& B& B2 l( R$ o9 J } else {* G# m5 A. m. z9 k9 p; O& E' A& S
return symbol;
, q) G- o+ R/ D& ~ }
/ N" U# i2 p* Q% t });
2 U% C; o! E9 Z( s- \9 O0 T4 l });) V0 ?9 B5 k7 v% M5 P4 H; c% K x
2 w) \# M& ]8 U& o5 [
var back_div = document.getElementById("back");
: ^1 l: l4 q( Y0 y; Z back_div.style.display = "block";
: g% \3 R1 ^' o, W6 _9 Y: }5 k6 Q+ U$ T4 W% C9 w: h# I2 \+ e
window.addEventListener("resize", update_ldoce6_height, false);6 B7 r$ S* O% m2 I
update_ldoce6_height();) K. s$ f4 b9 H" x) D! y8 B
! \$ v7 U4 N) v1 q% s4 g- \4 c9 h
function update_ldoce6_height() {
' d4 ^# g2 K& |& z( b: b. e var ldoce6_div = document.getElementById("ldoce6");8 Y+ ^+ a7 R0 A( N q: r( V
var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
0 V0 |8 o7 \+ D$ c8 ]% g, w2 U. | var preferred_height = window_height - ldoce6_div.offsetTop - 20;
8 H+ ]4 x& O5 P' B# l7 v2 b ldoce6_div.style.height = preferred_height + "px";# a4 A5 N9 @- |3 H) _) J8 ^+ V
}
0 V, _3 ~$ \' n. O6 ?6 A# W" |% c2 o' C6 `5 h0 b; n% `
// test to show the file name
, c% h; O9 b/ n! U4 G7 ~ //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;1 y7 Q8 y& \9 j( l" M
1 q8 }* a/ n! O# g9 L9 h
</script>1 ]2 F4 o5 t; e0 g f
<script src="_entry.js"></script>
! [+ G4 L8 o+ ^. }8 j2 L- l==== |
|