TA的每日心情 | 衰 2018-4-23 09:34 |
---|
签到天数: 4 天 [LV.2]偶尔看看I
|
楼主 |
发表于 2018-6-5 07:51:00
|
显示全部楼层
' x* G$ M8 n( y5 _; z4 B
Front Template:$ g: e* g6 y6 e, U
- <div id="front">
# P! t9 z5 D+ \* s5 H2 Q
, y* y' a# b# ^7 o1 s- <div class="headbar">{{Deck}}</div>( X/ K& d. p! M- G5 g% Q$ d" {
- <div id="word">
) ~1 o! I+ ?6 C! c - {{单词}}- H3 D8 [. O' p( A
- <span id="rank"> {{ranking}} </span><span id='example_audios'></span>, a9 P; X' ?. r- G5 `" ]2 q" w
- </div>
$ y4 T' f: p% M! B - <div class="yongfa">5 ~8 U+ h! ^& x7 a# T" y
- {{用法}}# s) {9 q& n) i' O
- </div>5 N5 |1 ] p0 C! W7 o9 X ^' g
% y. w0 u7 {% q4 N6 W( T o+ A6 a- <div id="back">
$ `, ~( u8 I6 H - <div class="headbar">有道词典 基本释义</div>
1 H* ~$ x$ ]6 a! d O; T8 R - <div class="shiyi_youdao"> v- q* |. M ?; l0 h8 ~
- {{shiyi_youdao}}3 s T& M9 A0 y- s
- </div>
; [$ s! n8 x. ~/ f4 L- C - , T6 E6 \8 Z0 E
- <div class="headbar">LDOCE6</div>
/ d$ f" c6 `1 O7 O) M - <div id="ldoce6">
( F+ {- }! q5 P: ^) t: {1 Y - {{LDOCE6}}
4 ~: u* G: i% Z8 T1 ~ - </div>: N2 I- U x) j
- 7 Y6 g" p2 y, y! d
- <script type="text/javascript">
$ e) V" t, ?0 G- o5 w - // format yonfa/ C' x( q" q5 e3 P: |$ Z
- [].forEach.call(document.querySelectorAll('.yongfa'), function (div) {
$ m* f- B% r) k- _/ K, O% k' d - div.innerHTML = div.innerHTML; w7 J" e2 ^% V- {* ]
- .replace(/[1-9]+\)/g, function (symbol) {
9 u, c w8 Z* c$ q* F$ m - return '<a class="hightlight" style="color:#539007;" >' + symbol + '</a>';
+ N& h+ F) o3 ]$ f8 T9 ` - });2 }' [1 p2 ]$ y. y) n' B1 i
- });
$ U" p# ^6 p/ ?; [: h4 Y7 ? - * }. w, ?# z9 `# ^2 ^: g1 H; k
- // play the Ammerican pronouciation- X+ d2 @$ P& i2 R0 A f- Y
- var amevoice = document.getElementsByClassName("amevoice");
5 X! k8 _ {" P" I( H - var anki_modified_code = amevoice[0].innerHTML;
7 I6 T3 c# }& M& i8 R$ `, S( |2 `" j4 X - //var filename = '_' + anki_modified_code.split(':')[1].split(';')[0].split('_')[1].replace(/"\)/, '');;/ ~0 R+ [1 ?' O( L
- var filename = anki_modified_code.split('ankiplay')[1].split('");')[0];
6 {/ h! b( w [- h6 |8 a- m6 v6 O6 f) |: r - var audio = new Audio(filename);9 j- O0 Y9 a# A( x# t% v
- audio.play();
# @& |5 @+ n V( U; U
* J5 ~# f3 f# @5 Q1 q$ D, P- // add audios of the examples0 k. n( M; c, B
- var examples = document.getElementsByClassName("example");
/ Y/ a& Z" l' e0 m, m' e( ] - var example_audios = "";2 K; a7 Q& m3 ?) l; B
- for (var i = 0; i < examples.length; i++) {7 P, P0 V6 N5 v1 K
- var e = examples[i].innerHTML;, ]3 d2 s( e n/ r5 {' m0 x/ y6 c
- var index = i + 1;( H& R; L% }) }0 p* W, @' \
- if (e.search('mp3]') == -1) { M8 h% |0 A; O
- continue;" I' s% b1 E5 L/ `, Y( F! F
- }' I5 @) B6 p" f# V
- example_audios += index + e.split('<img')[0];
, _7 ]) A1 j) _: c2 B - //if (i>10) alerta(e.split('<img')[0]);4 d; B- M9 h. ?) q. k6 K
- }
3 J8 t. f2 K2 P% B' D6 Q* h" V: j9 \ - var rank = document.getElementById("rank");; i B& l" g$ z( S( `) P& m
- rank.innerHTML += example_audios;
9 A6 d+ U& v3 _$ U; q - " E% r" z) Y1 s5 O% ~
- </script>
复制代码 ; f F- F, h& N4 _
' M% A4 O0 U/ ?$ e
Styling:
) W$ y# r& y# s" v8 M5 I3 g- /*页眉页脚全局样式*/
5 [7 n) F* I; x7 m3 W - .headbar {/ T0 H: q: D6 c1 w8 F" G
- color: #aaaaaa; /*字体颜色-白色*/+ Y' E2 T% q, l- ^, b5 p, N" L
- padding: 2px; /*四周留白-5px*/
" D: F0 y) b# B3 L - text-align: center;! V( X8 H+ m5 l
- font-size: 10px; /*字体大小-12px*/
. P+ y" W; j$ | - background: #365899;, l" d8 F/ n8 y5 v
- }" W& `, i% G# E
- . R% Z" {+ C8 x1 Z0 a6 K, M
- body {5 m$ M2 h$ Q! }" r
- background: #c7edcc;
' D- q% ?% Z/ G, d7 U( ^ - }
. d* @) e! [/ \3 D/ R/ [7 c - 7 h4 J" {' m% w0 _: p
- #word {2 O+ l, r9 U% D
- font-size: 36px;# H$ f) B% ^4 J2 }$ ~' o R
- font-weight: bold;5 _$ z. f! q* Y$ @5 r8 O
- padding: 5px 20px;
& p: i0 J% l* u% o - }# Z$ j4 u$ v6 I4 X, l X
- 3 |+ v' K' j6 s% k, C
- #rank, #example_audios {
/ ^5 D6 {' q, y+ N. i3 j - font-size : 12px;3 P# F8 V; k6 Q4 W
- }
0 v2 A, x$ u g- h7 H* y3 g, J
/ P+ B% G e3 s! a- .yongfa {
% J8 y! t# @9 _! t$ i# {, H0 E/ B - font-style: italic;
2 H# ]1 J. w2 @% B' I0 s - display: block;
. Z5 V- {7 t. u! o3 \ - color: blue;
N( L6 L9 ^& A) X' C - padding: 5px 20px;8 e) \( C' y% p; r
- font-size: 14px; V p6 l6 {# S9 z5 l6 r! H. ]
- line-height: 1.2;0 ~8 l( Q0 n( t" E7 n% o
- }* z' k+ E- J" t! I9 D* ~! e% e
# c! V; P6 ]9 h( }9 Y- .shiyi_youdao {# } X: F# U0 \/ I# w) R- D
- font-style: normal;
* e$ T3 F% }" [, i+ f - font-size: 18px;
' t( D! e: X6 f3 c! G5 @6 W - line-height: 1.2;
3 K! I0 J; ]8 C" G- r - padding: 5px 20px;( `) M+ ^( g3 Q2 W* e h: R6 l
- }$ k) Q* }, F/ }$ L
- n6 l: Q; h$ y3 U+ r
- .hightlight {0 l1 @3 c0 E2 P8 t9 |: B% m4 j
- font-style: italic;
" ]# x4 r) @0 c0 _. D - font-weight: bold;
: c6 h i+ @# M- q$ E$ u - }, B4 w1 v! t- x7 q
' c! r# V& } n( y# k' R- /*
# k( u' e' }* B - ._LDOCE6 {
0 b' [9 L' y! L! L0 y' ~ - height: 480px;
# F* e8 S" Z! ]! B/ t# i - overflow-y: auto;
* U* o: t( ~* x" J9 { - font-size: 14px;1 _1 R3 o# l( C. `
- padding: 0px 10px;: D- A+ ~8 e: T1 _9 l5 h
- }
" g4 C& f- m" x, ?8 L; Y - */9 _7 J0 j- ~9 t; e& R0 k( G
- , L3 }" i6 S: ^% V1 T* m, H; |; {! O
- #ldoce6 {
N* A/ L8 \! Q, `2 z - overflow-y: auto;* h9 g. L6 l/ ?; _* K" T
- font-size: 14px;: h$ e0 n, C* p S ^
- padding-left: 10px;! C; O4 f- `: X
- }
; l, F% t; y& }; q, _ - 5 m2 Z. k! \, O0 A5 Z: `0 l8 X/ V
' F) J) a0 s4 G- #back {8 i4 d$ }4 q; g
- display: none;2 U) U4 m9 {0 J, z" q
- }- d0 O7 W: |$ F% X, e8 r* h
* O2 ~, q Y% e2 j* a- /*
. W7 \% l* U. k; ^# G. x, B - .cixing {* p- i6 k# a! o. m& t8 U
- display:inline-block;: d( d9 m8 w+ t8 o
- text-align:right;$ P' u- m5 |0 u: U/ F
- width:40px;9 Y/ I9 D' U) A' h3 a+ L
- }3 [3 f: f: G4 ^
- */
复制代码 " }* u9 R$ t. ]% @+ p
6 J9 Z3 V B/ v H3 e7 K5 d8 yBack Template:2 q- g0 b. p5 d- |+ I; e6 h, `
- <!-- 背面区块 -->& U7 x5 B# s' P* _' I% |5 D0 b! S0 G
- {{FrontSide}}& w7 m- q# L6 D M- N/ v
- <!-- 页眉区块 -->9 K: E" s% x8 ~( j0 z
- <script type="text/javascript">
. j; s9 x- I" p- W- y9 H - ; U9 |3 U( S3 k6 I3 _% i' ]
- // format shiyi_youdao3 g$ M2 _, X1 B4 W3 }; M
- var colorMap = {
! @5 e# E' D4 l* m3 u4 W - 'n.': '#e3412f',
% E2 \! I9 I; Z% G - 'a.': '#f8b002',
; g2 \) Z' P3 L4 q8 n - 'adj.': '#f8b002',
% H2 b% ^: [3 P6 F2 w } - 'ad.': '#684b9d',
' D2 R) f( z# j - 'adv.': '#684b9d',4 f. Y- Z* D8 d b/ q. U$ Z$ ?
- 'v.': '#539007',
* C7 L# _' M1 p9 Z - 'vi.': '#539007',8 g' k/ H3 n4 ~0 H: n& b# Q4 V
- 'vt.': '#539007',
/ V; L* C7 P+ L9 q8 A - 'prep.': '#04B7C9',/ G# g+ ~8 G) j& u1 B
- 'conj.': '#04B7C9',) O8 ^ B Y. V7 ]3 O ^
- 'pron.': '#04B7C9',
1 V& z- k7 ~7 z! E4 r - 'art.': '#04B7C9',! O; w3 f# I$ j4 T
- 'num.': '#04B7C9',
; L! a$ Q" A; r6 [4 Q - 'int.': '#04B7C9',
+ ~ y- W2 B( e2 T4 f0 D7 ?( J @ - 'interj.': '#04B7C9',
" x, v* b. I9 Y4 S7 q. l - 'modal.': '#04B7C9',+ f* Z$ s8 c+ K( I$ L) k, m
- 'aux.': '#04B7C9',
. E" z% u- p) @( ~/ E - 'pl.': '#D111D3',
5 Y& C# B& d3 u& i8 n: q" F - 'abbr.': '#D111D3',* E6 @) B3 g) {
- }; |( F8 n. k E% z( {
- [].forEach.call(document.querySelectorAll('.shiyi_youdao'), function (div) {
. B% t9 M8 N4 V# j - div.innerHTML = div.innerHTML
1 x, s, C4 e+ _: U2 Y, a8 K - .replace(/\b[a-z]+\./g, function (symbol) {2 g6 q) o2 a0 |. Z& L+ c e. D' ~
- if (colorMap[symbol]) {
1 n0 c- F4 T! C- j0 X0 F - return '<span class="cixing"><a class="hightlight" style="color:'
2 P+ x' g8 R" ], N. H9 w - + colorMap[symbol] + ';" >' + symbol + '</a></span>';
2 h) q$ U, D: C7 l - } else {" c) ]" f- x& i8 M" f7 q
- return symbol;
& i" ?: [7 |5 d. r+ w - }) `. w% c5 n: ?* E, r$ W. V
- });
/ J$ Y% X3 W8 M0 w1 g! b# R - });
7 e7 J& F- u+ W4 E! _ - ! g+ ?* g I" V- s6 o
- var back_div = document.getElementById("back");5 \6 N4 }4 ^- [- ` v
- back_div.style.display = "block";/ Q! N5 M6 F p& U, Y# J7 {9 q
- : D+ Y7 a3 t. e' o; u
- window.addEventListener("resize", update_ldoce6_height, false);
; B, B6 x0 p, B; Z& K% R& ? - update_ldoce6_height();
9 y* u- m9 N# M$ k D, F
- {# @: |: i1 _. S! {( |# J- function update_ldoce6_height() {
5 ^! x" y* Q9 I, r( v - var ldoce6_div = document.getElementById("ldoce6");, @& a7 g5 W' w' K7 O5 J
- var window_height = "innerHeight" in window ? window.innerHeight : document.documentElement.offsetHeight;/ L v, f: A2 @
- var preferred_height = window_height - ldoce6_div.offsetTop - 20;
8 m# D6 a' P. v- m" A - ldoce6_div.style.height = preferred_height + "px";
3 D! B) y! X8 Y - }2 ]- p/ \+ a" U" _4 g" g3 D/ i
& t9 N! ?) n/ V- // test to show the file name* Z1 a1 }$ b# g4 C/ ]9 R# `) c: w
- //document.getElementById("rank").innerHTML="top: " + ldoce6_div.offsetTop + "<br/>height: " + back_div.offsetHeight + "<br/>window height: " + height;
9 j: Z6 ^- Q9 s
9 o( [: v" U/ W6 V m! }+ f$ R- @- </script> R, E5 N" Q' X5 X1 ]& t
- <script src="_entry.js"></script>
复制代码 |
|