TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 20:10:48
|
显示全部楼层
7 c2 ?' g' t, ?" P- |/ N
====Front Template====
% E* r8 E3 _0 y5 C<div id="front">
. `- Y8 `1 }, `+ d* B
( \# l0 _( g! i! p& P- t) n$ t <div class="headbar">{{Deck}}</div>$ \1 P! V6 i% U/ z
<div id="word">. t: T3 _4 w, Z. V& Y
{{单词}}, O) Q: H+ _% d* J3 C3 O! {. V) ?
<span id="rank"> {{ranking}} </span><span id='example_audios'></span>+ ~7 K' Z9 A6 j2 o! N
</div>/ e- ^5 d1 R: G3 I [, V
<div class="yongfa">
; j1 m$ ^' v5 J {{用法}}) D5 y) M7 c0 v$ H# P+ Q
</div>
, P) G; P9 @9 N) i, ?
- r& z, {6 `/ p. _$ E2 q0 T <div id="back">7 _) }* Y* f X9 _1 v/ T0 @7 y
<div class="headbar">有道词典 基本释义</div>
1 C5 N" V1 C% q$ T( V1 a2 k <div class="shiyi_youdao">
3 U' c+ `3 @+ M1 H( d9 N {{shiyi_youdao}}
: {. D3 ^$ _6 g" K1 B( i, L </div>
, \( Y1 P- R. H3 n
0 X1 U% l Q3 U2 i3 T( J <div class="headbar">LDOCE6</div>" b* A! C" |+ a$ r
<div id="ldoce6">
* g) ^9 I( A( ]4 u {{LDOCE6}}. `) Z9 p8 f, Y
</div>* H& f4 O2 H8 P \, z) E
0 ]9 x! s0 z6 q* K
<script type="text/javascript">
4 K* a$ f* d, U+ {, i // format yonfa
- d5 R# V3 g$ O [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {
# `4 T7 n2 t7 @* Z/ _2 `8 _ div.innerHTML = div.innerHTML
* D$ f6 K* q3 G x2 E3 a5 |; ~ .replace(/[1-9]+\)/g, function (symbol) {
, {* E6 g8 `8 y7 k7 C return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';2 U4 ]+ a1 V) w3 }. d
});. b7 h- F. X8 I5 A, }7 k
});3 b* a# S) \' i6 s8 P) C' x
# W3 Y) D) y8 w" p
// play the Ammerican pronouciation
: \7 M( Y; y: \0 s0 ^ var amevoice = document.getElementsByClassName("amevoice"); X* U c) D* ^3 V6 Q- |7 p
var anki_modified_code = amevoice[0].innerHTML;
! v) v% K, x0 o2 F0 X //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;2 m9 {% K( B1 O) e; E; E! Z
var filename = anki_modified_code.split('ankiplay')[1].split('\");')[0];' U* K( ?; N" ?
var audio = new Audio(filename);
: y1 f- s7 ?; z audio.play();
a0 C8 e+ v( w: x+ S
9 X3 x: j) v$ h3 J: _5 X- z5 ~+ `0 @, _ // add audios of the examples( {: k$ K$ x6 \# H0 J; \
var examples = document.getElementsByClassName("example");: t# G0 }* ~" ~1 X* D
var example_audios = "";
7 W4 c; l/ o: h3 \& z) x F4 e for (var i = 0; i < examples.length; i++) {. w# ?. V# S9 A2 o$ _
var e = examples.innerHTML;' M. P" L0 E* `; t
var index = i + 1;
$ F4 f: _2 x) z1 r1 z if (e.search('mp3]') == -1) {1 j3 R" d# z {+ a: {7 y9 w6 [7 N
continue;
- q' n) M0 B5 F0 e }
1 U# T+ J+ h3 J7 [7 W4 k example_audios += index + e.split('<img')[0];9 F# b6 R- Q) `
//if (i>10) alerta(e.split('<img')[0]);
4 o% \: p" a. U( k( I9 G8 H }: h% Q; v! Q" c; x: F# f$ l7 s
var rank = document.getElementById("rank");2 u0 G D5 i R5 z
rank.innerHTML += example_audios;
! y% A* `4 W0 x% d, U% U& W) @' Z( x
8 X* O" w# C# N; @2 O+ i, P/ U. F. f </script>
3 ? l J P# ^, K====
) l) T1 g% y/ ~5 u( E+ N# q( n1 S% Z; r) H
====Styling====
' e# f! U+ r2 b [) R8 r3 I/ i/*页眉页脚全局样式*/6 e/ o/ X% X p; e4 X! T& R8 f
.headbar {0 A& J6 K0 }- q4 w4 I" \
color: #aaaaaa; /*字体颜色-白色*/
3 J( f/ y$ C9 o$ ~6 J padding: 2px; /*四周留白-5px*/
2 |/ r+ O/ Q5 j) \ text-align: center;* {& x) C4 I5 P7 V+ m
font-size: 10px; /*字体大小-12px*/
4 C& C3 \# n; i3 x background: #365899;
\' `. s# i3 W5 r) k2 D; A" U}- {6 i3 ~: X$ k) w& q
& g& x1 ^) ]$ U" D8 z% P, M4 Tbody {4 v* j- P7 Y7 `8 J! B( R
background: #c7edcc;7 J' K5 C2 n1 i' @) c1 z
}. c5 G" h9 Q4 s3 Z+ H* U
0 t0 `$ S; d# o: X. L/ ^
#word { r" y% I. o9 d
font-size: 36px;
7 Q" z! t, R% G2 d font-weight: bold;, _" I# B/ x, S/ E0 x6 W
padding: 5px 20px;
' y7 o/ e/ l/ d- i}
5 m3 Q e! h" v9 C+ u5 r
, M4 s/ N( F" t) h, ]( U#rank, #example_audios {$ s' U2 ^7 O) K$ w* E8 y
font-size : 12px;% X, F* n; j( R2 K* S
}
8 @: Z" u1 R% l) k) V# `4 f8 w4 h% @+ g/ y; l! i- m' Y
.yongfa {
7 l; U$ e r { font-style: italic;: p" Y9 a2 r: _+ \0 H, y6 c. O* Y% H
display: block;- D8 G6 M$ K; C
color: blue;
( }; S v) R9 }( D) J3 O padding: 5px 20px;
9 |) P( _$ v, [$ d0 E font-size: 14px;( X! S" d/ a: V5 L, i" y
line-height: 1.2;
& u3 }( a3 e0 o: U9 |6 R+ U/ g}
7 F/ `& \( V- p3 N. O
* K. }& T$ l- b! B.shiyi_youdao {2 b8 ~+ X' a+ K6 k& @8 k! X3 @
font-style: normal;
0 u6 Y/ l9 e8 p& D g9 T. X font-size: 18px;
0 G. s, ~7 r, c" T6 z1 d line-height: 1.2;
: c% p3 W: ]6 q+ u! m# s padding: 5px 20px;
) I# j; s: U e# R3 U}
4 L& k0 L: \% y+ w; b% D4 }! N/ D. ~: v
.hightlight {
# a4 c' k" }" S5 n font-style: italic;8 Z8 ~9 o- D( x& S. U7 Q% p
font-weight: bold;
9 d0 Y* b1 x( |, I" a}
& @3 {1 B2 r/ ?; g1 s% d- W+ v3 s0 b+ p; f+ h
/*
4 P; |- P1 z, B7 J4 a, W* x._LDOCE6 {7 ]) N+ g& N! e" X
height: 480px;+ U, T2 `3 m, F. {4 ?5 g
overflow-y: auto;4 z3 @& ?+ n; l) L
font-size: 14px;
5 `, ]( z+ @$ ]0 m6 u. r8 [ padding: 0px 10px;2 u% h$ |* U! D$ n c7 M7 I+ t, H
}' X+ @! @( b1 A& ~2 _1 z
*/2 b4 N. `" y5 C9 _+ l. G
) ]' p* `" \6 H% L" K( U3 u8 N
#ldoce6 {* t9 @6 V9 M8 O: t
overflow-y: auto;
" j9 R+ N, a7 R* i% x! o x7 {+ J font-size: 14px;4 r: P8 k. c8 n* w3 u; `: W! a3 i
padding-left: 10px;; n% S) e$ {% A, H) T
}
# b5 } k! t3 v, `) A6 W" l5 `. x* s$ l' d
' d# ?" f( }4 x3 k, D/ u7 e
#back {
4 t2 v# ?' u4 f: T0 `4 tdisplay: none;# {1 t: s" ~; ^6 d- d& F" Y, I, t
}
% t' r. O5 c/ ^$ K% Y8 Y8 F# O# C
( S" R0 B+ U, k3 e$ \0 b( _4 W/*# D- B1 d' m3 u2 [6 |
.cixing {7 [, i- h, Z5 I T8 ~0 s
display:inline-block;
9 M; R9 P- w4 e9 [" y* T7 u' i text-align:right;
$ I- X7 A, G$ } `; Y width:40px;0 \9 v; S' T$ a/ B* e
}/ a5 I9 y1 a# A# k4 R5 _+ Y
*/
M- b* i2 K+ X8 f====
7 o$ H2 m4 {+ `2 P8 F. `7 s
$ }2 ~, J% c& `& u====Back Template====: G7 a3 s& \; R" I; `% a
<!-- 背面区块 -->
T6 b0 B4 U3 y7 s8 ^, O: X# p{{FrontSide}}1 C2 a3 f! Z B! J
<!-- 页眉区块 --> ]! R/ Z; ~( d5 {, ]* s
<script type="text/javascript">! ^5 U, C# e' R! F* \
, _ z8 ^" j& c b
// format shiyi_youdao0 p: \( q3 [! a, b O
var colorMap = {. F8 [8 q/ u% ~/ i) y
'n.': '#e3412f',) P3 x2 S' q: t* m1 |
'a.': '#f8b002',
7 W# F$ H& K- w/ ^) ]* ~ 'adj.': '#f8b002',4 D# p0 }, M' [) p+ e. ^4 L
'ad.': '#684b9d',
- u, S. b* c3 y1 a9 ^3 z+ u; [ 'adv.': '#684b9d',
9 {8 R. [6 O1 [+ B$ K# A 'v.': '#539007',
3 M0 u l: T& V 'vi.': '#539007',
. @# L: d; p, T 'vt.': '#539007',
, t* r" ]% w( l% F: V 'prep.': '#04B7C9',
+ n$ X, M( o; ^ 'conj.': '#04B7C9',
8 y8 @+ [6 w$ k; i; {9 e( H 'pron.': '#04B7C9',
9 w" w& J, p: P8 K5 q! l6 ]7 F 'art.': '#04B7C9',
0 b: j4 J. x$ l2 d$ [) I 'num.': '#04B7C9',/ C, b/ `+ u' H+ K; @
'int.': '#04B7C9',4 V' n& V ?# u: P# U" i5 [
'interj.': '#04B7C9',
, Y! x" U. D# }" b) ~6 B- @ 'modal.': '#04B7C9',* Z0 C; [* O: o& x+ r: i& U
'aux.': '#04B7C9',
) N% b3 X( B4 g A0 a: U! S g% I* g* @ 'pl.': '#D111D3',0 [) U8 [9 R8 W4 S+ p
'abbr.': '#D111D3',: G* v5 r! Q9 `0 x. E
};
3 l* E9 ?/ Q. T8 s# R [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {* }; B) ?8 c* a: S
div.innerHTML = div.innerHTML
" O, |& k$ s U3 D% d$ O .replace(/\b[a-z]+\./g, function (symbol) {
8 a I, r; k( b if (colorMap[symbol]) {
M" j" Z0 f% ~: [- i ]6 @: [ return '<span class="cixing"><a class="hightlight" style="color:'1 N x4 r4 }, I1 e! V; ~
+ colorMap[symbol] + ';" >' + symbol + '</a></span>';2 P1 D6 h9 H O W. F
} else {
3 O( a* ] J; s return symbol;( g- P4 P4 a$ U
}; y- q& b0 F# _- }9 z5 [. _3 j
});
" r, R. u; `" v4 o* r G" t7 d8 V( I: \9 O });% T5 X0 e: \! [ ]0 h
) V$ U0 |( U: i" ?* p var back_div = document.getElementById("back");
1 c0 `" ?$ y" ]3 h' t back_div.style.display = "block";0 J* J$ _9 a! D" P' @
; {. B! W. @& a& t4 s: n
window.addEventListener("resize", update_ldoce6_height, false);
" O" m' \: G' J( f2 |3 O* [ update_ldoce6_height();5 @$ Q4 ~4 e# `9 d! |; L
5 A) j; j2 t) T; Q/ V
function update_ldoce6_height() {: `- V/ q+ H& ^. t
var ldoce6_div = document.getElementById("ldoce6");
2 X5 y$ w# r: M% q' m) i r var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
- C* c2 |$ X: E% U9 Q# O/ p0 W var preferred_height = window_height - ldoce6_div.offsetTop - 20;
0 W5 @ h7 ~% F8 n7 ?+ L/ [ ldoce6_div.style.height = preferred_height + "px";
3 w9 m. W$ O$ H, y }+ i6 @3 b$ ^& l9 h3 F1 g: p
0 E/ K! I) B3 b1 ?2 B' r4 _. p
// test to show the file name7 Z3 y+ G/ @, @, S; q6 @* B
//document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;
) e; B3 C* y# S1 n& @8 U: \0 h5 V2 G8 w8 \' X; @' D
</script>
/ f4 J6 z. B. j' ]* A4 @ T. B( a9 I9 E<script src="_entry.js"></script>- {2 W: [* r2 k+ y1 H! J
==== |
|