TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 20:10:48
|
显示全部楼层
/ L& C5 J5 J$ f+ |, I( y. p====Front Template====
: a9 \; k/ K0 F0 U<div id="front">
! l' o( T. a. b t0 g; |% M7 x: e, {( [) V" ?" C, E
<div class="headbar">{{Deck}}</div>! F& x S; N4 `
<div id="word">
& j. v2 \6 i3 \ {{单词}}
7 |% r( Y5 M8 i7 p8 _' S <span id="rank"> {{ranking}} </span><span id='example_audios'></span>
4 }. F" h( V' A3 E% T" r _ </div>
* w. ^: X' d ~8 S# j) F, V4 H <div class="yongfa">
+ i: T6 y! w8 p) Q1 J {{用法}} A$ s/ ^6 _; d1 Q
</div>( G# L: Y- Y& o8 N
9 g) E0 ^- R4 j% h7 z( L( U
<div id="back">. I" D; h- D# q* M( l* k- R9 x9 E
<div class="headbar">有道词典 基本释义</div>- P- C2 G0 V {7 M4 @
<div class="shiyi_youdao">/ ?- `, k2 v6 ~
{{shiyi_youdao}}; E H7 H4 D; ~3 W" A5 L U) }
</div>9 E3 M# H- |+ u# ~, w, ^
3 R. \/ E( q2 }$ \6 D <div class="headbar">LDOCE6</div>; l4 o5 s" U: P, d
<div id="ldoce6">3 J! k+ n. _0 k- T2 s" e6 d: X& l+ q
{{LDOCE6}}
+ h* M9 w* z* l2 b# m. N" a </div>
3 t; z/ u2 h' M) K, O% U* `4 u. S( h- e# }' ~9 ~
<script type="text/javascript">
0 v7 {. |4 H& A& I4 r$ w% q5 b // format yonfa
) f5 _9 K8 n7 | [].forEach.call(document.querySelectorAll('.yongfa'), function (div) { n* U( G0 i" ]+ z# U
div.innerHTML = div.innerHTML
$ W4 s* R. H5 S .replace(/[1-9]+\)/g, function (symbol) {
2 Q: N& x5 g! A" D5 w( L* S return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';( R( r! j0 h" r
});
9 M* V& k1 f* r. k3 k2 M });& [: T, C- K5 F1 `" m. z1 X
6 l, ]1 m/ U. V, e$ S) u // play the Ammerican pronouciation
( `* s+ E+ D/ g) x! r1 b! e8 ^ var amevoice = document.getElementsByClassName("amevoice");- G3 e& t% a6 x1 K7 I
var anki_modified_code = amevoice[0].innerHTML;9 F& m; \, ^/ ]1 H
//var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;
2 ^) D8 N7 b* |, {# p var filename = anki_modified_code.split('ankiplay')[1].split('\");')[0];
* r3 W8 |0 z) v4 a$ k5 [ var audio = new Audio(filename);* i( I0 |/ M0 f4 k
audio.play();
' c! M& A9 X \2 {+ Q4 I& {) `' O# V V, ~
// add audios of the examples
# `* T( B7 I9 p4 o0 s! M var examples = document.getElementsByClassName("example");, n! e8 ^3 u4 G$ ?
var example_audios = "";3 Z8 ?1 {4 E3 W5 A9 l: x# ^
for (var i = 0; i < examples.length; i++) {
. l0 S" V8 m# B var e = examples.innerHTML;9 _ m% V0 L! i8 m, E# O0 p
var index = i + 1;$ o. D! Z( O0 b
if (e.search('mp3]') == -1) { Q% j; y- e; g
continue;
: X1 i3 q9 S0 }3 `' S }. D" s. b8 U' H" N X( o9 s' h
example_audios += index + e.split('<img')[0];: m8 l* _* G3 b0 H( {% M
//if (i>10) alerta(e.split('<img')[0]);
+ E2 v" ?/ M) e# n% H }3 V7 n5 e" h6 a, O
var rank = document.getElementById("rank");
6 ?' U/ l- l. G' ?" B" r rank.innerHTML += example_audios;0 G& h/ y4 P b
0 A& W7 _5 B% h: u# y7 s </script>
' [' f: X7 @8 J( i) \====, v d% f$ {+ }3 m1 k* W
/ L; _& S6 v9 ]0 [====Styling====
9 x% a0 v9 I e) I1 a7 k/*页眉页脚全局样式*/) S: ^) N5 A& @ T# ^* F* [
.headbar { ~# K, w* R( \+ Z" P% J% Y
color: #aaaaaa; /*字体颜色-白色*/- B: d3 B5 c. U5 G/ z. |/ {
padding: 2px; /*四周留白-5px*/
u) c) Q- B4 F8 J, a" h- F1 T text-align: center;
9 U8 a2 E* M5 \8 w$ c, k* \% p font-size: 10px; /*字体大小-12px*/
6 A' U8 n# X; @ background: #365899;1 [1 w U4 q8 r( Q) J
}; @: y' F& w( A3 b0 _, Z
& `- I( C d; j& \* U0 \1 e# Y8 J6 S
body {
7 i0 z) l# V @. h4 t' s4 t' [% L background: #c7edcc;
1 x/ J1 C' x# s. {1 R}
+ o, ]. n* h! B+ u; S: d" ^0 d' I7 i1 U8 S& l$ }) T4 M
#word {
/ t& _1 Y! M" { font-size: 36px;% P0 w/ R7 ~# `. Y
font-weight: bold;
! O( X; X3 T Q' r2 o* s padding: 5px 20px;
& c5 t7 X% y/ Y# w2 t}
, B& o5 ~! g7 a6 I% E3 A4 c
! a6 D/ L. u/ n# |* Z, o#rank, #example_audios {' E8 g3 Y4 H0 d* W6 @ c+ C/ \6 g
font-size : 12px;9 |( X1 U+ G( L
}5 P2 B0 H3 t, o
5 E T8 p; x9 D4 w! E( p.yongfa {6 v2 E/ ~& o% l4 c7 W5 S; B
font-style: italic;) t" F( z4 o' | o& t
display: block;8 x8 i' }9 q& G3 ]
color: blue;+ Z% `1 t) O; Q5 H
padding: 5px 20px;/ L: O1 }4 N5 o) u# Z, l; {
font-size: 14px;
' K) J4 \" H! i- f9 h; m6 [/ F( B line-height: 1.2;
, _ q. R. Z* k( R c& ?, a3 ]# y, M}
. g( J: q4 ^/ b8 T5 k; B# X: M; r) p" R) V' G
.shiyi_youdao {
2 n6 c2 H) y! U4 V Q font-style: normal;
v4 E1 M1 \8 ?; h: m9 n font-size: 18px;9 _' f: a0 R4 K- X% l
line-height: 1.2;* r6 ] U' S, S9 U# y. v- P
padding: 5px 20px;
8 z+ I* G- u6 ~8 Y; x}7 r9 J, ]' o+ G v
2 v$ j. Y4 w. z3 ?& N) C# [.hightlight {6 l+ T( n3 @. [# Y) Q0 Z
font-style: italic;
1 L( B; x: q# K9 G font-weight: bold;
) o6 Q: R( p% M* Q' E0 r% m}
: i- a" ~2 ]/ j* F
$ i+ J0 F- _2 }( w4 {' ]/*' O: w0 E& U$ I! l+ A: L
._LDOCE6 {
+ }6 c. P Y/ R0 a9 Z( w height: 480px;
& v2 _9 \ a! m) g' ? @ overflow-y: auto;
9 I9 V i3 j$ _! q4 l7 V2 a font-size: 14px;% W5 _, ^' W! n
padding: 0px 10px;. I8 ^2 f k+ M' j, X
}
8 b4 ], w( o% ^: }7 Y1 Q*/- r: _7 z: k) o; ~
: a# ~0 h4 w% q& e% R' X#ldoce6 {
6 H i4 g) `" n) D* U! ] overflow-y: auto;
* L# @; q3 }6 L+ T' o% ]8 l1 l0 b font-size: 14px;
' w" M* o& j1 b* C. u$ `, ` padding-left: 10px;- u; n! ]; ?7 j. ?5 G3 m
}0 H: ?% ^6 P% o5 G
5 H% v8 r% O# Z$ r6 T9 p" o" X6 P8 @& }7 E! f( c8 }5 x" A# Z- K
#back {! V# L4 f5 W# _7 \9 y% @
display: none;0 \7 R8 y% A8 f/ J6 G
}
4 ^4 `- x7 N4 O* i" ^' M
9 e7 X' o, t |5 _; J/*2 R2 Z6 w E9 O1 Q; u: u
.cixing {2 v4 A) P( x: w) w' i9 n
display:inline-block;4 t- |$ ^) E4 c
text-align:right;
* Z' D; W' K; w9 y& _9 `# S width:40px;
# l# [0 V8 `* u7 U- ?}3 Z* _( y9 i' d& E8 f
*/8 w) g9 M# M# L; S: H4 @7 W$ @
====
- b7 Z8 W3 q# E
8 F) y5 l( p3 R) h+ i====Back Template====+ o" I$ z. f9 [( |; D
<!-- 背面区块 -->
0 ~0 }4 e5 C7 M{{FrontSide}}7 J1 L3 g, r, y3 h. |) p" a) E
<!-- 页眉区块 -->
" u: r o4 T+ ?: s) P<script type="text/javascript">* r' x" z' Q1 A C$ L2 q
+ o' n8 A4 C" J2 V7 M
// format shiyi_youdao7 g: G" |) X! m0 H/ u# O
var colorMap = {
! o8 i& b/ b) a8 o 'n.': '#e3412f',$ a$ `! X5 t. f2 L$ m% U3 P
'a.': '#f8b002',0 ~9 C) B6 F' o {( {4 ?( p
'adj.': '#f8b002',0 l$ N. r! q9 i- @4 L) K
'ad.': '#684b9d',
6 {; F. \6 [8 o9 r 'adv.': '#684b9d', D# u+ {% C2 f- g5 p% N
'v.': '#539007',
9 H A8 a( @# U, L; R/ n3 U0 X 'vi.': '#539007',. `: X4 T2 g/ D5 n, U3 L, `. Z
'vt.': '#539007',9 M' i0 f! R% L! ^' W
'prep.': '#04B7C9',8 {5 v; O! y1 B' ~2 y
'conj.': '#04B7C9',
3 w! ~9 q5 y" Z' x* \# u, c3 V 'pron.': '#04B7C9',
4 B: R, Q, Q2 ~: a: G! g 'art.': '#04B7C9',8 Q8 M: W$ }( D: C+ i/ {+ ?
'num.': '#04B7C9',6 l% h! r: p" Q# V+ X
'int.': '#04B7C9',0 y$ p2 {' Y( O
'interj.': '#04B7C9',
9 ?1 o. c) \7 }0 h 'modal.': '#04B7C9',5 d! X' R" g- L& Y
'aux.': '#04B7C9',- J2 Z" C. k5 k$ M$ p2 |5 O
'pl.': '#D111D3',
7 l" {/ u4 p; N# ]; S 'abbr.': '#D111D3',
- ~$ v: a- m* e9 G8 Z };. ]6 m* G5 `8 F
[].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
+ n4 x# f5 M/ U: l div.innerHTML = div.innerHTML* X& @) `6 p$ |* K6 F C
.replace(/\b[a-z]+\./g, function (symbol) {6 U( h$ m- s: N! L" t! ~* N
if (colorMap[symbol]) {2 j9 }- S' l. C7 B% D: N3 l
return '<span class="cixing"><a class="hightlight" style="color:'0 u+ N; V, ]$ D! x5 r5 a F! X7 X
+ colorMap[symbol] + ';" >' + symbol + '</a></span>';
& ]" V+ q5 |! ^ } else {3 ^7 s, d1 ~ P3 y: F0 |* S
return symbol;+ L! u2 r9 [( r+ Q) U
}
4 |& w6 X Z6 @$ {5 l" N* R" l });
1 T' T/ c0 P' w5 o1 y });& A0 @$ q% @9 O0 _* v
1 P8 J: k3 a3 {. J var back_div = document.getElementById("back");5 m) I- T! f5 Q8 k2 u# r- [$ ?0 j
back_div.style.display = "block";
# p" z2 P0 z) [3 x, {
9 {* f( m& M0 K+ G' K window.addEventListener("resize", update_ldoce6_height, false);% d) x# I. e7 }3 X2 ^0 l, A
update_ldoce6_height();
9 `! v' S) `& V9 v7 I6 A* y. C; K$ m. B: F
function update_ldoce6_height() {
9 u( c" X# B, k8 E var ldoce6_div = document.getElementById("ldoce6");# \- |9 l: c1 y2 D! |3 a5 C7 l
var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;
9 i' H; m6 ?0 S var preferred_height = window_height - ldoce6_div.offsetTop - 20;
+ e) @9 u6 R/ S& k4 [ ldoce6_div.style.height = preferred_height + "px";
- O8 s2 U% I8 I3 }, W6 N. I) _ }: f2 M, P# u2 \5 z" b4 y8 ^; f
; \, I+ w2 z9 @5 u1 Z: o // test to show the file name
' \5 s# l1 W3 h" ~9 H* c4 v //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;# _/ |) o) D* ~' f
% _2 u/ Q7 B: H! T2 a3 L! N
</script>
+ ~, u# x% O" {! c4 ^% w f<script src="_entry.js"></script>: q# y) p7 T1 W6 W2 {
==== |
|